이 글은 자바스크립트의 프로토타입과 프로토타입 체인을 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.
프로토타입
우리 모두 알고 있듯이 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 비디오 튜토리얼을 방문하세요.