자바스크립트의 프로토타입과 프로토타입 체인 이해

이 글은 자바스크립트의 프로토타입과 프로토타입 체인을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

프로토타입

우리 모두 알고 있듯이 JavaScript에는 전통적인 클래스 상속 모델이 포함되어 있지 않고 프로토타입 프로토타입 모델을 사용합니다. 코드 구현은 대략 다음과 같습니다

function Student(name){
 this.name = name;
}
 
var Kimy = new Student("Kimy");
 
Student.prototype.say = function(){
 console.log(this.name + "say");
}

Kimy.say();
//Kimysay

Kimy 자체에는 say 메소드가 없습니다. 자신의 객체에서 메소드를 찾을 수 없으면 프로토타입으로 돌아가서 찾습니다. Student.prototype 객체를 찾으세요. 여기서는 생성자 Student

생성자, __proto__ 및 프로토타입 체인

IE를 제외한 다른 브라우저는 Object 객체의 인스턴스에 있습니다. , 비표준 __proto__ 속성(앞뒤에 두 개의 밑줄)이 배포되어 객체의 프로토타입 객체, 즉 생성자의 프로토타입 속성을 가리킵니다.

코드 조각과 그림 훔치기

// 构造方法
function Foo(y) {
 this.y = y;
}
 
Foo.prototype.x = 10;
 
// 继承方法"calculate"
Foo.prototype.calculate = function (z) {
 return this.x + this.y + z;
};
 
// 使用foo模式创建 "b" and "c"
var b = new Foo(20);
var c = new Foo(30);
 
// 调用继承的方法
b.calculate(30); // 60
c.calculate(40); // 80
 
 
console.log(
 
 b.__proto__ === Foo.prototype, // true
 c.__proto__ === Foo.prototype, // true
 
 b.constructor === Foo, // true
 c.constructor === Foo, // true
 Foo.prototype.constructor === Foo // true
 
 b.calculate === b.__proto__.calculate, // true
 b.__proto__.calculate === Foo.prototype.calculate // true
 
);

각 객체에는 __proto__ 속성이 포함되어 있고 b __proto__는 프로토타입 속성을 가리킨다는 것을 알 수 있습니다. Foo에서 b를 생성하는 생성자 메서드와 Foo.prototype도 객체이며, 이를 생성하는 생성자 메서드 Object를 가리키는 __proto__ 프로토타입도 있습니다. Object.prototype의 __proto__는 프로토타입 체인을 형성하는 null을 가리킵니다.

다음 코드도 이해해야 합니다.

Object instanceof Function
//true
Function instanceof Object
//true

new의 기능

여기에도 작은 문제가 있습니다. js에서는 평범합니다. 함수와 생성자의 형태에는 큰 차이가 없는 것 같습니다(첫 글자를 대문자로 쓸 필요는 없으나, 생성자의 첫 글자는 보통 대문자로 씁니다). new 키워드의 역할은 정확히 무엇인가요?

예:

var Kimy = new Student();

new는 세 가지 작업을 수행합니다.

var Kimy = {}; 

Kimy.__proto__ = Student.prototype;

Student.call(Kimy);

1. 빈 개체를 정의합니다.

2. 🎜>

3. 초기화 객체

이렇게 하면 Kimy.__proto__가 Student.prototype(동일한 참조)을 가리키는 이유를 이해할 수 있습니다. new가 핵심 역할을 한다는 것이 밝혀졌습니다!

위 내용은 이 기사의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면

JavaScript 비디오 튜토리얼을 방문하세요.