快速理解js原型链

📅 2026/7/19 5:35:17
快速理解js原型链
javascript是一种动态类型其使用原型链的方式实现继承关系。对象[[Prototype]](__proto__) 属性[[Prototype]]属性在很多Js之中实现为__proto__属性 这个属性的作用是:构成一个链条查找值时沿着链条向上找找到了则返回对应的值如果找到[[Prototype]]值为None则返回undifined我们看下面的一个例子constdemo1{a:1,b:2,__proto__:{c:3,__proto__:{d:4}}}运行结果是这里查找demo某一个属性的链条是demo1-demo1.[[Prototype]]-demo1.[[Prototype]].[[Prototype]]-Object.[[Prototype]]-None找到即停这就是属性遮蔽的原因。函数Prototype属性js之中函数是一等公民,当函数作为构造函数时构造的对象会继承该函数的Prototype内的属性和方法下面是一个例子constdemo1{a:1,b:2,__proto__:{c:3,__proto__:{d:4}}}functiondemo2(value:number):void{this.valuevalue;}demo2.prototypedemo1;letDemo2newdemo2(100);console.log(Demo2.value);console.log(Demo2.c);debug的结果是Demo2通过demo2.prototype demo1;这个方式继承了demo1的属性类的实质既然我们每一次都写函数.prototype...形成继承关系太麻烦了这个时候类这个语法糖就出现了classLayerD{d:number4;}classLayerCextendsLayerD{c:number3;}classDemo1LikeextendsLayerC{a:number1;b:number2;}classdemo3extendsDemo1Like{value:number;constructor(value:number){super();this.valuevalue;}}letDemo3newdemo3(100);console.log(Demo3.value);// 100自身console.log(Demo3.a);// 1console.log(Demo3.c);// 3console.log(Demo3.d);// 4注意这里仍然实现了原型链demo3.prototype → Demo1Like.prototype → LayerC.prototype → LayerD.prototype → Object.prototype实现效果和我们的第二节的例子代码一样但是需要额外注意的是内存结构中存在一些不同注意看 此处Demo3之中的a,b,c,d属性都是在Demo3实例对象上如果说存在很多个实例化对象那么内存压力会有一些大而采用第二节的对象[[Prototype]](__proto__) 写法则会内存压力小很多。当然你也可以使用另一种更符合第二节的代码的原型继承方式即classdemo3{value:number;constructor(value:number){this.valuevalue;}}demo3.prototype{a:1,b:2,__proto__:{c:3,__proto__:{d:4,},},};总结其实区分对象的[[Prototype]](__proto__) 属性以及函数的prototype属性就能理解这个是两套平行的班子。对象的[[Prototype]](__proto__) 属性目的是为了自身提供继承值而函数的prototype属性则是为了产生实例对象提供继承值类则是简化了这种继承关系的表达。参考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain