prototype, __proto__및 constructor

소개

예제 코드:

var Student = function(name){this.name = name;}

Student.prototype.speak = function(){console.log("Hello, I'm "+ this.name + ". ")}

var tom = new Student("Tom");
tom.speak();

tom.constructor === Student   //true

Student.prototype.constructor === Student  //true

tom.speak == Student.prototype.speak  //true

tom.__proto__ === Student.prototype  //true

// ， Student.prototype ：
tom.__proto__.sayHello = function(){console.log("Hello")};

// Student sayHello ：
tom.sayHello();

결론:__proto__ 하나의 대상의 원형에 해당합니다. js 호출 규칙에 따라 하나의 대상이 하나의 방법을 호출할 때 대상 자체에 이 방법이 없으면 그 원형__proto__ 에서 찾습니다. 존재하면 직접 호출합니다.존재하지 않으면 __proto__ 의 __proto__ 찾다
다음은 좀 복잡한 걸 볼게요.

TypeScript의 extends 구문

클래스의 상속 관계를 설명하는 extends 키워드가 TypeScript에 있습니다.

class Animal {
   name: string;
   speak(){console.log("Animal speak")}
}
class Dog extends Animal {
 breed: string;
}

먼저 js로 번역된 애니멀을 보십시오.

var Animal = (function () {
    function Animal() {
    }
    Animal.prototype.speak = function () { console.log("Animal speak"); };
    return Animal;
}());

코드에서 알 수 있듯이 애니멀은 단지 일반적인 function일 뿐이다.
다음은 Dog의 코드입니다.

var Dog = (function (_super) {
        __extends(Dog, _super);
        function Dog() {
            _super.apply(this, arguments);
        }
        return Dog;
}(Animal));

Dog를 정의하기 전에 __ 를 호출했습니다.extends 방법;동시에 Dog는 구성할 때 Animal 방법을 사용합니다.
중점적으로 보자__extends의 실현:

var __extends = (this && this.__extends) || function (d, b) {

    // TypeScript static ， js: Animal.func Dog.func
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];

    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};

__extends 메서드는 Dog의 prototype 값을 재지정합니다.'_'new에서 나온 대상입니다. constructor는 Dog입니다.

Dog.prototype.constructor === Dog    //true

마지막으로 Dog 대상이 애니멀의speak 방법을 어떻게 사용하는지 봅시다.

var dog = new Dog();
dog.speak();

dog 자체가speak 방법을 포함하지 않기 때문에runtime는dog.__proto__(Dog.prototype)에서 찾습니다. 바로 이 new에서 나온'_'입니다.객체, 그 자체에speak 메서드가 없으며 그 다음에__proto__(__.prototype)에서 찾고, __.프로토타입은 동물입니다.prototype, 이 안에서speak 방법을 정의하여 호출에 성공했습니다.
위의 분석에서 알 수 있듯이, 애니미얼.프로토타입의 방법은 모두 Dog 대상에 계승되었다.