[javascript] JavaScript에서 ‘prototype’과 ‘this’의 사용?

이 두 가지 예를 보자.

var A = function() { this.hey = function() { alert('from A') } };

vs.

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

여기에있는 대부분의 사람들 (특히 최고 답변)은 WHY를 설명하지 않고 어떻게 다른지 설명하려고했습니다. 나는 이것이 잘못되었다고 생각하고 기초를 먼저 이해하면 그 차이가 분명해질 것입니다. 기본 사항을 먼저 설명해 봅시다 …

a) 함수는 JavaScript의 객체입니다. 자바 스크립트의 모든 객체 (의미, 당신은, 다른 속성처럼 액세스 크롬 등의 브라우저에서 어쩌면 제외시켰다 없습니다) 내부 속성을 가져옵니다 종종라고 __proto__(실제로 입력 할 수 있습니다 anyObject.__proto__무엇을 참조를 볼 크롬에.이 단지이다 , 속성, 그 밖의 것 없음 JavaScript의 속성 = 객체 안의 변수, 그 밖의 것 없음 변수는 무엇을 하는가?

이 __proto__속성 은 무엇을 가리 킵니까? 글쎄, 일반적으로 다른 객체입니다 (나중에 이유를 설명하겠습니다). __proto__속성의 JavaScript 가 다른 객체를 가리 키지 않도록 하는 유일한 방법 은을 사용하는 것 var newObj = Object.create(null)입니다. 이렇게해도 __proto__STILL 속성은 객체의 속성으로 존재하며 다른 객체를 가리 키지 않고를 가리 킵니다 null.

대부분의 사람들이 혼란스러워하는 부분은 다음과 같습니다.

JavaScript에서 새 함수 (객체이기도 함을 기억 하는가?)를 작성할 때, 정의 된 순간 JavaScript는 해당 함수에이라는 새 특성을 자동으로 작성합니다 prototype. 시도 해봐:

var A = [];
A.prototype // undefined
A = function() {}
A.prototype // {} // got created when function() {} was defined

A.prototype__proto__속성과 완전히 다릅니다 . 이 예에서 ‘A’에는 이제 ‘prototype’및이라는 두 가지 속성이 __proto__있습니다. 이것은 사람들에게 큰 혼란입니다. prototype및 __proto__특성과 관련된 어떠한 방식으로, 그들은 별도의 값을 가리키는 별도의 일을 것입니다.

궁금 할 수도 있습니다. 왜 __proto__모든 객체에 JavaScript가 속성을 생성합니까? 한마디 : 위임 . 객체에서 속성을 호출 할 때 객체에 속성이없는 경우 JavaScript는 참조 된 객체를 찾아 해당 객체 __proto__가 있는지 확인합니다. 그것이 없다면, 그 객체의 __proto__속성 등을보고 … 체인이 끝날 때까지. 따라서 이름 프로토 타입 체인 입니다. 물론 __proto__객체를 가리 키지 않고 대신 null운이 좋은 운임을 가리키면 JavaScript가이를 인식 undefined하고 속성을 반환합니다 .

prototype함수를 정의 할 때 JavaScript가 함수에 대한 속성을 작성하는 이유가 궁금 할 수도 있습니다. 그것은 당신을 속이려고하기 때문에, 클래스 기반 언어처럼 작동한다는 것을 속이십시오 .

예제로 넘어 가서 “object”를 만들어 봅시다 A:

var a1 = new A();

이 일이 발생했을 때 백그라운드에서 무언가가 발생했습니다. a1새로운 빈 객체에 할당 된 일반 변수입니다.

new함수 호출 전에 연산자를 사용했다는 사실 A()은 백그라운드에서 추가 작업을 수행했습니다. new키워드는 이제 참조를 새로운 객체를 생성 a1하고 그 객체가 비어 있습니다. 추가로 일어나는 일은 다음과 같습니다.

우리는 각 함수 정의에 prototype( __proto__프로퍼티 와 달리 액세스 할 수 있는) 새로운 프로퍼티가 생성되었다고 말했 습니까? 그 속성은 현재 사용되고 있습니다.

이제 우리는 갓 구운 빈 a1물건 이있는 지점에 있습니다 . 우리는 JavaScript의 모든 객체 가 null이든 다른 객체이든 __proto__무언가를 가리키는 내부 속성을 가지고 있다고 말했습니다 a1. 무엇 new운영자가하는 것은 그 설정이다 __proto__함수의에 지점 속성을 prototype속성입니다. 다시 읽어보세요. 기본적으로 이것입니다 :

a1.__proto__ = A.prototype;

우리는 A.prototype그것을 정의하기 전에 다른 것으로 변경하지 않는 한 빈 객체에 지나지 않는다고 말했습니다 a1. 이제는 기본적으로 a1.__proto__같은 A.prototype빈 객체를 가리 킵니다. 그들은이 줄이 발생할 때 만들어진 동일한 객체를 가리 킵니다.

A = function() {} // JS: cool. let's also create A.prototype pointing to empty {}

이제 var a1 = new A()진술이 처리 될 때 또 다른 일이 발생 합니다. 기본적 A()으로 실행되고 A가 다음과 같은 경우 :

var A = function() { this.hey = function() { alert('from A') } };

내부의 모든 것들이 function() { }실행될 것입니다. this.hey..라인에 도달하면 this로 변경되고 다음 a1과 같은 결과가 나타납니다.

a1.hey = function() { alert('from A') }

this변경 이유 를 다루지는a1 않지만 자세한 내용 은이 답변 을 참조하십시오.

요약 var a1 = new A()하면 백그라운드에서 3 가지 일이 발생합니다.

1. 완전히 새로운 빈 객체가 생성되어에 할당됩니다 a1.a1 = {}

2. a1.__proto__속성은 A.prototype(또 다른 빈 객체 {}) 를 가리키는 것과 동일한 것을 가리 키도록 할당됩니다.

3. 1 단계에서 생성 된 새로운 빈 객체 A()로 this설정하여 함수 를 실행 중입니다 (위에서 내가 왜 this변경 했는지에 대한 대답을 읽으십시오 a1)

이제 다른 객체를 만들어 봅시다 :

var a2 = new A();

1,2,3 단계가 반복됩니다. 당신은 뭔가를 알아? 핵심 단어는 반복입니다. 1 단계 : a2새로운 빈 객체가 될 것입니다 .2 단계 : __proto__속성이 같은 것을 A.prototype가리키고 가장 중요하게 A()는 3 단계 : 함수 가 다시 실행 a2됩니다. 즉, 함수 가 hey포함 된 속성을 얻습니다 . a1및 a2라는 두 개의 별도의 속성이 hey이 개 별도의 기능을 가리! 우리는 이제 같은 일을하는 동일한 두 개의 다른 객체에 중복 함수를 new A가지고 있습니다. 우리는 이것을 어떻게 방지합니까?

왜 __proto__모든 개체에 속성이 존재 하는지 기억 하십니까? yoMan속성 을 검색하면 a1(존재하지 않는) __proto__속성이 참조되며, 속성이 객체 (대부분의 경우) 인 경우 속성이 포함되어 있는지 확인 yoMan하고 그렇지 않은 경우 해당 객체 __proto__등 을 참조 할 것입니다 . 그렇다면 해당 속성 값을 가져 와서 표시합니다.

그래서 누군가 가이 사실 +을 만들 때 a1그 __proto__속성이 동일한 (빈) 객체를 A.prototype가리키고 이것을 수행한다는 사실을 사용하기로 결정했습니다 .

var A = function() {}
A.prototype.hey = function() { alert('from prototype') };

멋있는! 이제 생성 할 때 a1위의 3 단계를 모두 거치고 3 단계에서는 아무것도 수행하지 않으므로 아무것도하지 않습니다 function A(). 그리고 우리가 할 경우 :

a1.hey

그것은 그 볼 a1이 포함되어 있지 않습니다 hey및 그것 확인합니다 __proto__그것이 어떤 경우인지, 그것을 가지고 있는지 확인하기 위해 속성 개체를.

이 방법을 사용하면 3 단계에서 각각의 새 객체 생성시 함수가 복제되는 부분을 제거합니다. 대신에 a1와 a2별도 가지는 hey속성을, 지금 그들 중 누구도 그것을이 없습니다. 당신이 지금까지 알아 낸 것 같아요. 좋은 점입니다. 이해 __proto__하고 Function.prototype있다면 이와 같은 질문은 매우 분명합니다.

참고 : 일부 사람들은 내부 프로토 타입 속성을로 부르지 않는 경향 __proto__이 있습니다.이 게시물을 통해이 이름을 사용 Functional.prototype하여 두 가지 다른 속성으로 속성을 명확하게 구분했습니다 .

답변

var A = function () {
    var private_var = ...;

    this.x = function () {
        return private_var;
    };

    this.setX = function (new_x) {
        private_var = new_x;
    };
};

BaseClass = function() {
    var text = null;

    this.setText = function(value) {
        text = value + " BaseClass!";
    };

    this.getText = function() {
        return text;
    };

    this.setText("Hello"); // This always calls BaseClass.setText()
};

SubClass = function() {
    // setText is not overridden yet,
    // so the constructor calls the superclass' method
    BaseClass.call(this);

    // Keeping a reference to the superclass' method
    var super_setText = this.setText;
    // Overriding
    this.setText = function(value) {
        super_setText.call(this, "SubClass says: " + value);
    };
};
SubClass.prototype = new BaseClass();

var subClass = new SubClass();
console.log(subClass.getText()); // Hello BaseClass!

subClass.setText("Hello"); // setText is already overridden
console.log(subClass.getText()); // SubClass says: Hello BaseClass!

BaseClass = function() {
    this.setText("Hello"); // This calls the overridden method
};

BaseClass.prototype.setText = function(value) {
    this.text = value + " BaseClass!";
};

BaseClass.prototype.getText = function() {
    return this.text;
};

SubClass = function() {
    // setText is already overridden, so this works as expected
    BaseClass.call(this);
};
SubClass.prototype = new BaseClass();

SubClass.prototype.setText = function(value) {
    BaseClass.prototype.setText.call(this, "SubClass says: " + value);
};

var subClass = new SubClass();
console.log(subClass.getText()); // SubClass says: Hello BaseClass!

var A = function (param1) {
    var privateVar = null; // Private variable

    // Calling this.setPrivateVar(param1) here would be an error

    this.setPrivateVar = function (value) {
        privateVar = value;
        console.log("setPrivateVar value set to: " + value);

        // param1 is still here, possible memory leak
        console.log("setPrivateVar has param1: " + param1);
    };

    // The constructor logic starts here possibly after
    // many lines of code that define methods

    this.setPrivateVar(param1); // This is valid
};

var a = new A(0);
// setPrivateVar value set to: 0
// setPrivateVar has param1: 0

a.setPrivateVar(1);
//setPrivateVar value set to: 1
//setPrivateVar has param1: 0

var A = function (param1) {
    this.setPublicVar(param1); // This is valid
};
A.prototype.setPublicVar = function (value) {
    this.publicVar = value; // No private variable
};

var a = new A(0);
a.setPublicVar(1);
console.log(a.publicVar); // 1

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

var a = new A();    // constructor function gets executed
                    // newly created object gets an 'x' property
                    // which is a function
a.x();              // and can be called like this

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

var a = new A();    // constructor function gets executed
                    // which does nothing in this example

a.x();              // you are trying to access the 'x' property of an instance of 'A'
                    // which does not exist
                    // so JavaScript looks for that property in the prototype object
                    // that was defined using the 'prototype' property of the constructor