JavaScript에서 'prototype'과 'this'의 차이

질문 : JavaScript에서 'prototype'과 'this'의 사용?

---

차이점은 무엇입니까

var A = function () {
    this.x = function () {
        //do something
    };
};

과

var A = function () { };
A.prototype.x = function () {
    //do something
};

답변

---

예제는 결과가 매우 다릅니다.

차이점을 살펴보기 전에 다음 사항에 유의해야합니다.

• 생성자의 프로토 타입 [[Prototype]] 속성을 통해 인스턴스간에 메서드와 값을 공유하는 방법을 제공합니다.
• 함수의 이것은 함수가 호출되는 방법 또는 bind를 사용하여 설정됩니다 (여기서는 설명하지 않음). 기능 (예를 들어 개체에서 호출되는 경우 myObj.method() 객체 메소드 내의 참조)를이. 이것이 호출 또는 bind 사용에 의해 설정되지 않은 경우, 기본값은 전역 객체 (브라우저의 창) 또는 엄격 모드에서 정의되지 않은 상태로 유지됩니다.
• JavaScript는 객체 지향 언어입니다. 즉, 대부분의 값은 함수를 포함한 객체입니다. (문자열, 숫자 및 부울은 객체가 아닙니다 .)

따라서 문제의 스 니펫은 다음과 같습니다.

var A = function () {
    this.x = function () {
        //do something
    };
};

이 경우 변수 A 에는 함수에 대한 참조 값이 할당됩니다. A() 사용하여 호출 될 때 함수의 this 는 호출에 의해 설정되지 않으므로 기본값은 전역 객체이고 this.x 표현식은 유효한 window.x 입니다. 그 결과 오른쪽에있는 함수 표현식에 대한 참조가 window.x 할당됩니다.

다음의 경우 :

var A = function () { };
A.prototype.x = function () {
    //do something
};

매우 다른 일이 발생합니다. 첫 번째 줄에서 변수 A 에는 함수에 대한 참조가 할당됩니다. JavaScript에서 모든 함수 객체에는 기본적으로 프로토 타입 속성이 있으므로 A.prototype 객체를 생성하는 별도의 코드가 없습니다.

두 번째 줄에서 A.prototype.x 에는 함수에 대한 참조가 할당됩니다. x 속성이 없으면 생성하고, 존재하는 경우 새 값을 할당합니다. 따라서 객체의 x 속성이 표현식에 포함 된 첫 번째 예제와의 차이점입니다.

다른 예는 다음과 같습니다. 첫 번째 것과 비슷합니다 (그리고 아마도 물어 보려고했던 것) :

var A = new function () {
    this.x = function () {
        //do something
    };
};

이 예제에서는 함수가 생성자로 호출되도록 함수 표현식 앞에 new new 와 함께 호출 될 때 함수의 this 는 생성자의 공개 프로토 타입 [[Prototype]] 속성이 설정된 새 Object를 참조하도록 설정됩니다. 따라서 할당 문에서 x 속성이이 새 개체에 생성됩니다. 생성자로 호출되면 함수는 기본적으로 this return this; 할 필요가 없습니다. 성명서.

A 에 x 속성이 있는지 확인하려면 :

console.log(A.x) // function () {
                 //   //do something
                 // };

생성자를 참조하는 유일한 방법은 A.constructor를 사용하는 것이기 때문에 new 의 드문 사용입니다. 다음을 수행하는 것이 훨씬 더 일반적입니다.

var A = function () {
    this.x = function () {
        //do something
    };
};
var a = new A();

유사한 결과를 얻는 또 다른 방법은 즉시 호출되는 함수 표현식을 사용하는 것입니다.

var A = (function () {
    this.x = function () {
        //do something
    };
}());

이 경우 A 는 오른쪽에있는 함수 호출의 반환 값을 할당했습니다. 여기서도 이것이 호출에서 설정되지 않았기 this.x 는 유효한 window.x 입니다. 함수는 아무것도 반환하지 않으므로 A undefined 값을 갖습니다.

두 접근 방식 간의 이러한 차이점은 JSON으로 /에서 Javascript 객체를 직렬화 및 역 직렬화하는 경우에도 나타납니다. 객체의 프로토 타입에 정의 된 메서드는 객체를 직렬화 할 때 직렬화되지 않습니다. 예를 들어 객체의 데이터 부분 만 직렬화하려고 할 때 편리 할 수 있습니다.

var A = function () { 
    this.objectsOwnProperties = "are serialized";
};
A.prototype.prototypeProperties = "are NOT serialized";
var instance = new A();
console.log(instance.prototypeProperties); // "are NOT serialized"
console.log(JSON.stringify(instance)); 
// {"objectsOwnProperties":"are serialized"}

관련 질문 :

• JavaScript가 프로토 타입 언어라는 것은 무엇을 의미합니까?
• JavaScript에서 함수의 범위는 무엇입니까?
• "this"키워드는 어떻게 작동합니까?

사이드 노트 : 두 접근 방식간에 상당한 메모리 절약이 없을 수 있지만 프로토 타입을 사용하여 메서드와 속성을 공유하면 각 인스턴스가 자체 복사본을 갖는 것보다 적은 메모리를 사용할 수 있습니다.

JavaScript는 저수준 언어가 아닙니다. 프로토 타이핑이나 기타 상속 패턴을 메모리 할당 방식을 명시 적으로 변경하는 방법으로 생각하는 것은 그리 가치가 없을 수 있습니다.

출처 : https://stackoverflow.com/questions/310870/use-of-prototype-vs-this-in-javascript