자바스크립트에서 프로토타입 체인을 통한 상속 분석(코드 첨부)

이 글의 내용은 자바스크립트(코드 포함)에서 프로토타입 체인을 통한 상속 분석에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

프로토타입 및 프로토타입 체인

프로토타입은 새 함수를 생성할 때 자동으로 생성되며 프로토타입에는 프로토타입을 생성한 함수 개체를 다시 참조하는 생성자가 있습니다.

__proto__는 객체나 인스턴스에 내장된 [[prototype]]으로, 객체를 생성한 객체의 프로토타입을 가리키며, 우리가 접근할 수 있도록 브라우저에 제공됩니다. __proto__ 체인을 프로토타입 체인이라고 합니다. 프로토타입 체인의 전체 링크는 인스턴스 객체- ->생성자의 프로토타입- ->객체 프로토타입- ->null입니다.

객체의 속성이나 메소드에 액세스할 때 먼저 이 객체에서 검색합니다. 이 객체에 속성이나 메소드가 없으면 속성이나 메소드를 찾을 때까지 또는 검색할 때까지 프로토타입 체인을 따라 위쪽으로 검색합니다. null stop에 도달합니다.

이것은 또한 배열 객체에 push, pop, Shift, unshift 및 기타 메소드가 없지만

constructor

에 액세스할 수 있는 이유를 설명합니다. 생성자 속성은 함수(객체)를 생성한 함수(객체)를 가리킵니다. ), 예를 들어

var a = function(){};
var b = new a();
var c = {};
var d = [];
//以下皆为true
console.log(b.constructor === a) //因为实例b是由构造函数产生的
console.log(a.constructor === Function)//函数a实际是Function的实例，同理
console.log(c.constructor === Object)//空对象c是Object的实例
console.log(d.constructor === Array)//空对象c是Object的实例
console.log(Object.constructor === Function)//Object自身就是一个构造函数，同理
console.log(Array.constructor === Function)//Array自身也是一个构造函数
//---------------------------------------------------------------
//首先__proto__指向的是产生该对象的对象的prototype，
//也即a.prototype，prototype中也的constructor，回指创建该prototype的函数对象，也即函数a
console.log(b.__proto__.constructor === a)

그런데, instanceof, A instanceof B는 A의 프로토타입 체인에서 B의 프로토타입을 찾는 것입니다. 발견되면 true를 반환하고, 발견되지 않으면 false를 반환합니다.

//有个奇怪的现象,下面都返回true，这是为什么呢？
//因为JS中一切都继承自Object，除了最顶层的null，
//所以在Function的原型链中能找到Object.prototype
console.log(Function instanceof Object)
//而Object自身就是一个构造函数，因此在Object的原型链中也能找到Function.prototype
console.log(Object instanceof Function)

상속은 프로토타입 체인을 통해 구현됩니다

위의 분석에서 다음과 같이 사용할 수 있습니다. 프로토타입 체인은 상속의 논리를 구현합니다. 상속은 객체지향에서 매우 중요한 개념입니다.

function Dog(name){
    this.name = name;
    this.say1 = function(){
        console.log(this.name)
    }
}
Dog.prototype.say2 = function(){
    console.log(this.name)
}
Dog.prototype.test = 1
//say本来应该是所有Dog实例的共有方法，
//如果放在构造函数中，那么就会导致没办法数据共享，每一个实例都有自己的属性和方法的副本，这是对资源的极大浪费
//如果放在Dog.prototype中，那么利用原型链的特性，就可以让所有实例共用一个方法，
//需要注意的是，由于共用了一个方法，对属性的更改是对所有实例透明的

var dog1 = new Dog('lalala'); 
let dog2 = new Dog('wahaha');
dog1.test++;//2
dog2.test++;//3
console.log(dog1.say1 === dog2.say1)// false
console.log(dog1.say2 === dog2.say2)// true



//现在，我们可以尝试着去实现继承了
//我们是通过原型链去实现继承的，
//之前的原型链是：Dog实例 --> Dog函数 --> Object --> null
//那么现在的原型链需要改成 Dog实例 --> Dog函数 --> Dog父类(Animal函数) --> Object --> null
//第一种方案，改变Dog函数的prototype，让他指向Animal的实例
function Animal(){
    this.species = 'unknown';
}
Dog.prototype = new Animal();
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;

//第二钟方案，改变Dog函数的prototype，让他指向Animal的prototype
function Animal(){}
Animal.prototype.species = 'unknown';
Dog.prototype = Animal.prototype;
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;

//第三种方案，调用apply或call,将Animal的this绑定到Dog中
function Animal(){
    this.species = 'unknown';
}
function Dog(name){
    Animal.apply(this, arguments);
    this.name = name;
}

//第四种方法，通过Object.create()方法实现继承，过滤掉了父类实例属性,Dog.prototype中就没有了Animal的实例化数据了
//这种方法也是ES6中Class被babel编译成ES5所用的方法
function Animal(){
    this.species = 'unknown';
}
function Dog(name){
    Animal.apply(this, arguments);
    this.name = name;
}
//这里模拟了 Dog.prototype = Object.create(Animal.prototype)
var f = function(){};
f.prototype = Animal.pototype;
Dog.prototype = new f();
Dog.__proto__ = Animal;
//这里改变后会导致prototype中的constructor改变
Dog.prototype.constructor = Dog;


//现在就能访问到Animal中的species属性了
var dog = new Dog('lalala');
dog.species;//unknown

다음은 프로토타입을 사용하는 몇 가지 방법입니다. 상속 구현을 위한 체인

ES6 클래스 class

위의 지식을 바탕으로 ES6 클래스 클래스를 살펴보겠습니다. 이 구문 설탕을 사용하면 클래스 및 상속을 보다 쉽게 ​​구현할 수 있습니다. , super를 통해 더 깊고 명확한 이해를 얻었고 생성자와 인스턴스 오브의 사용법에 익숙해졌으며 프로토타입 체인을 기반으로 하는 상속 방법에 대한 이해가 깊어지고 이러한 지식이 명확해졌습니다.

babel로 컴파일된 ES6 클래스의 소스 코드를 분석하면서 Object.create 및 Object.setPrototypeOf의 사용법도 배웠고 super, extends 및 static 구현을 시뮬레이션하는 방법도 살펴보았습니다.
관련 권장 사항:

• JavaScript 객체 지향 - 프로토타입 체인 기반 상속

JavaScript 상속 및 프로토타입 체인

위 내용은 자바스크립트에서 프로토타입 체인을 통한 상속 분석(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!