Javascript继承的原理

最新推荐文章于 2023-04-21 18:47:33 发布

雪花女神

最新推荐文章于 2023-04-21 18:47:33 发布

阅读量387

点赞数

分类专栏： JavaScript 文章标签： javascript

原文链接：https://www.jianshu.com/p/b0c63c051bc9

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript的继承是通过原型链继承，与传统面向对象的继承方式不同。

prototype与原型

我们从头开始梳理，引入prototype与原型

function Person() {}
Person.prototype.name = "Leo";
let person_a = new Person();
let person_b = new Person();
person_a.name //Leo
person_b.name //Leo

Person.prototype指向了一个对象，这个对象是用Person这个构造函数构造出来的实例的原型，即person_a和person_b的原型。
-->

构造函数的prototype指向了构造函数实例化对象的原型。
原型就是个对象。
上面阐明了构造函数的prototype和实例的原型的关系如下。

那么就可以引入一个新的问题，实例和原型之间有是怎样的关系？
引入第三个概念，_proto_

__proto__

__proto__是什么

这是每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向该对象的原型。
测试代码如下：

function Person() {}
person = new Person()
person.__proto__ === Person.prototype // true

换句话说，实例的__proto__和构造函数的prototype指向的是同一个对象。
即，构造函数、实例对象和原型三者关系如下

截止到目前为止，实例和构造函数指向Person.prototype这个对象（原型）都是单向的，那么原型是否有属性指向实例和构造函数？
结论：没有指向实例的(实例有无限个，其实原型也指不过来= = ），但是原型有属性可以指向构造函数。引入第四个概念，constructor。

constructor

每个原型都有一个 constructor 属性指向关联的构造函数。

function Person() {}
person = new Person()
Person.prototype.constructor === Person  // true

则，新关系如如下

综上可得，对于单个构造函数和对象来说，有如下关系

function Person() {}
var person = new Person();
console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// 顺便学习一个ES5的方法,可以获得对象的原型
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

了解清楚了三者的关系之后，在开始引入继承之前，先来进一步详细了解一下实例与原型的关系。

实例与原型

当读取实例的属性时，如果找不到，就会查找与对象关联的原型中的属性，如果还查不到，就去找原型的原型，一直找到最顶层为止。
一段很常见的验证的代码。

Person = function() {}
Person.prototype.name = "leo"
person = new Person()
person.name = "aha"
console.log(person.name)  // "aha"
delete person.name
console.log(person.name) // "leo"

如果在上述代码delete之前打印出person,可以在chrome浏览器的console看到下图，可以较为清晰的看出实例对象与原型的关系。

思考，如果在上述代码末尾，添加如下代码，在实例的原型中没有找到name字段，在原型这个对象实例的原型上，js会继续向上寻找，那么原型的原型是什么？

delete person.__proto__.name
console.log(person.name)

原型的原型

其实到这一步，大家应该已经看出来可以通过对象的proto，即原型构造出来一个链式结构了。
即，原型其实也是一个对象，这个对象也存在他的proto，一直到root节点。
那么，root节点在哪里，我们知道JavaScript最基本的对象就是Object, 在上面几个小节中person对象的原型person.proto，他的原型就是Object.prototype。先更新一波关系图示