JavaScript에서 프로토 타입 프로그래밍을 사용하는 경우

나는 다음과 같은 방법으로 프로젝트를위한 간단한 위젯을 개발하는 데 많은 시간을 보냈습니다.

var project = project || {};

(function() {

  project.elements = {
    prop1: val1,
    prop2: val2
  }

  project.method1 = function(val) {
    // Do this
  }

  project.method2 = function(val) {
    // Do that
  }

  project.init = function() {
    project.method1(project.elements.prop1)
    project.method2(project.elements.prop2)
  }
})()

project.init();

그러나 형식을 다음과 같이 변경하기 시작했습니다.

function Project() {
  this.elements = {
    prop1: val1,
    prop2: val2
  }

  this.method_one(this.elements.prop1);
  this.method_two(this.elements.prop2);
}

Project.prototype.method_one = function (val) {
  // 
};

Project.prototype.method_two = function (val) {
  //
};

new Project();

물론, 이것은 바보 같은 예이므로 악셀 주위를 감싸지 마십시오. 그러나 기능상의 차이점은 무엇이며 언제 하나를 선택해야합니까?

첫 번째 차이점은 다음과 같이 요약 할 수 있습니다 . 클래스 this의 인스턴스 를 나타냅니다 . 정의를prototype 참조하십시오 .

다음과 같은 클래스가 있다고 가정 해 봅시다.

var Flight = function ( number ) { this.number = number; };

그래서 우리는 this.number클래스의 모든 인스턴스에 연결 하고 있으며, Flight모두 자신의 항공편 번호를 가져야 하기 때문에 의미 가 있습니다.

var flightOne = new Flight( "ABC" );
var flightTwo = new Flight( "XYZ" );

반대로 prototype모든 인스턴스가 액세스 할 수있는 단일 속성을 정의합니다.

이제 항공편 번호를 얻으려면 다음 스 니펫을 작성하면 모든 인스턴스가 새로 프로토 타입 된 객체에 대한 참조 를 얻게됩니다 .

Flight.prototype.getNumber = function () { return this.number; };

두 번째 차이점은 JavaScript가 객체의 속성을 검색하는 방식에 관한 것입니다. 를 찾으면 Object.whateverJavaScript는 기본 Object 객체 (다른 모든 것이 상속받은 객체) 까지 올라가고 일치하는 항목을 찾으면 즉시 반환하거나 호출합니다.

그러나 이는 프로토 타입 속성에 대해서만 발생합니다. 따라서 더 높은 계층의 어딘가에 있으면 this.whateverJavaScript는이를 일치 항목으로 간주하지 않고 검색을 계속합니다.

그것이 실제로 어떻게 일어나는지 봅시다.

먼저 [거의] 모든 것이 JavaScript의 객체 라는 점에 유의하십시오 . 이 시도:

typeof null

이제 내부에 무엇이 있는지 살펴 봅시다 Object(대문자 O와 .끝에 주의하십시오 ). Chrome 개발자 도구를 입력하면 .해당 특정 개체 내에서 사용 가능한 속성 목록이 표시됩니다.

Object.

이제 동일한 작업을 수행하십시오 Function.

Function.

name방법을 알 수 있습니다 . 그냥 가서 해고하면 어떻게되는지 보자.

Object.name
Function.name

이제 함수를 만들어 봅시다 :

var myFunc = function () {};

그리고 우리가 name여기 에 방법 을 가지고 있는지 보자 .

myFunc.name

빈 문자열을 가져와야하지만 괜찮습니다. 오류나 예외가 발생하지 않아야합니다.

이제 그 신과 비슷한 것을 추가하고 Object다른 곳에서도 얻을 수 있습니까?

Object.prototype.test = "Okay!";

그리고 당신은 간다 :

Object.prototype.test
Function.prototype.test
myFunc.prototype.test

모든 경우에을 참조하십시오 "Okay!".

각 방법의 장단점에 대해 프로토 타이핑은 작업을 수행하는 "보다 효율적인"방법으로 간주 할 수 있습니다. 각 객체의 전체 속성을 복사하는 것이 아니라 모든 인스턴스에 대한 참조를 유지하기 때문입니다. 다른 한편으로, 이것은 Tightly Coupling 의 예이며 , 그 이유를 실제로 정당화 할 수있을 때까지는 절대 아닙니다. this문맥과 관련이 있기 때문에 훨씬 더 복잡합니다. 인터넷에서 무료로 좋은 자료를 많이 찾을 수 있습니다.

모두가 말했듯이, 두 가지 방법 모두 언어 도구 일 뿐이며 실제로 당신과 더 잘 맞는 것을 선택하기 위해 해결하려는 문제에 달려 있습니다.

클래스의 모든 인스턴스와 관련이있는 속성이 필요한 경우을 사용하십시오 this. 모든 인스턴스에서 동일한 기능을 수행하기 위해 속성이 필요한 경우을 사용하십시오 prototype.

최신 정보

샘플 스 니펫과 관련하여 첫 번째는 Singleton 의 예 이므로 this객체 본문 내 에서 사용하는 것이 좋습니다 . 모듈 식으로 만들어서 예제를 개선 할 수도 있습니다 (항상 사용할 필요는 없습니다 this).

/* Assuming it will run in a web browser */
(function (window) {
    window.myApp = {
        ...
    }
})( window );

/* And in other pages ... */
(function (myApp) {
    myApp.Module = {
        ...
    }
})( myApp );

/* And if you prefer Encapsulation */
(function (myApp) {
    myApp.Module = {
         "foo": "Foo",
         "bar": function ( string ) {
             return string;
         },
         return {
             "foor": foo,
             "bar": bar
         }
    }
})( myApp );

두 번째 스 니펫은 먼저 사용 this하고 나중에 해킹하려고 시도하기 때문에 그다지 의미 prototype가 없습니다 . this우선 순위가 높아서 작동하지 않습니다 prototype. 해당 코드에서 기대하는 것이 무엇이며 어떻게 작동했는지 잘 모르겠지만 리팩토링하는 것이 좋습니다.

최신 정보

this우선 순위 를 정하기 prototype위해 예제를 보여주고 설명 할 수있는 방법을 알려줄 수 있지만 백업 할 외부 리소스는 없습니다.

예는 매우 간단합니다.

var myClass = function () { this.foo = "Foo"; };
myClass.prototype.foo = "nice try!";
myClass.prototype.bar = "Bar";

var obj = new myClass;
obj.foo;     // Still contains "Foo" ...
obj.bar;     // Contains "Bar" as expected

우리가 알고 있듯이 설명은 this상황과 관련이 있습니다. 따라서 컨텍스트가 준비 될 때까지 존재하지 않습니다. 문맥이 준비되면? 새 인스턴스가 생성 될 때! 나머지는 지금 추측해야합니다! 그것은 prototype정의가 있지만 this그 순간에 생성되는 새로운 인스턴스에 관한 것이기 때문에 우선권을 갖는 것이 더 의미가 있음을 의미합니다.