一篇文章让你看懂Js继承与原型链

继承与原型链

当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（object）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（proto），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。

继承属性

JavaScript 对象是动态的属性“包”（指其自己的属性）。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

代码实例

function fn() {  this.a = 1;  this.b = 2;}const o = new fn();fn.prototype.b = 3;fn.prototype.c = 4;console.log(o.a);console.log(o.b);console.log(o.c);console.log(o.d);// 1// 2// 4// undefined

• a 和 b 是 o 的自身属性可以直接返回值
• 为啥我们设置 fn.prototype.b=3，返回的还是 2 呢？，因为我们查找自身有这个属性时就直接返回了，不会在往上面查找了。
• c 不是 o 的自身属性，所以会到 o.prototype 上去查找，发现有 c，直接返回值
• d 不是 o 的自身属性，所以会到 o.prototype 上去查找，发现没有，再到 o.protype.prototype 上查找，发现为 null，停止搜索，返回 undefined

看下 o 构造函数的打印

{    a: 1    b: 2    __proto__:        b: 3        c: 4        constructor: 
下载地址:
小程序实现Token生成与验证
Javascript基础学习之十个重要问题