JavaScript: 原型链继承(原理解析 + 代码实现 + 结构图解)


原型链是实现继承的一种方式,扩展了原型搜索机制,使搜索可以继承向上,搜索原型的原型。

一 原型搜索机制

在原型搜索机制中,构造函数,实例,和原型对象的关系为,原型对象是构造函数的一个属性prototype,原型对象中有一个属性constructor指回构造函数,构造函数生成的实例中具有指针指向构造函数上的原型对象。

1.1 代码实现

// 构造函数
function person(name, color){
    this.name = name;
    this.color = color;
}
// 向默认的原型对象中添加值
person.prototype.getColor = function(){
    return this.color;
}
// 通过构造函数构建实例 实例中含有指向原型对象的指针
var personOne = new person("tom", "red");

console.log("来自构造函数中的属性", personOne.name) // "tom"
console.log("来自原型对象中的属性", personOne.getColor()) // "red"

1.2 结构图解

构造函数,原型对象,实例的关系如下。

在这里插入图片描述

1.3 搜索机制

当搜索一个属性/方法时,先搜索实例本身,如果实例本身没有找到,再从指针找到其指向的原型对象,向上查找的特性与作用域链相似。

也就是说,如果在实例中设置了要查找的属性名,就不会再向上查找。

... ...
personOne.getColor = function(){
	return "实例中的属性";
}
console.log(personOne.getColor()); // "实例中的属性"
... ...

这时候如果没找到,并且该原型对象中也有一个指向另一个原型对象的指针,就从指针向上搜索原型的原型,直到原型链的末端,也就是原型不再包含指向另一个原型的指针为止。

二 原型链代码实现

从这里看出,原型链是由指向原型对象的指针将多个原型对象连接起来,上面指出,当我们new一个A实例,实例中就包含一个指向原型对象的指针。

如果我们将该实例赋值为另外一个对象实例B的原型对象,原型链就构成了,查找顺序为。
B 实 例 − > B 原 型 ( A 实 例 ) − > A 原 型 B实例->B原型(A实例)->A原型 B>B(A)>A

2.1 代码实现

在下面的代码中,访问objB的实例对象obj时,通过原型链,最终输出了objA的原型对象中的值。

function objA(){
    this.title = 'A';
}

objA.prototype.name = "objA-prototype";

function objB(){
    this.title = 'B';
}

objB.prototype = new objA();

var obj = new objB;
console.log(obj.name); // objA-prototype

2.2 结构图解

在这里插入图片描述

2.3 链条拓展

我们可以通过将B实例替换C对象实例的原型对象的方式来拓展该原型链。拓展后查找顺序为。
C 实 例 − > C 原 型 ( B 实 例 ) − > B 原 型 ( A 实 例 ) − > A 原 型 C实例->C原型(B实例)->B原型(A实例)->A原型 C>C(B)>B(A)>A
原型链就是这样实现继承的。

在上面公式中,在C实例向A原型搜索的过程中,只要在某一个地方获得了一个同名属性,就会取该属性,而不再向上搜索,也就是说,在下层原型中添加上层原型链已有的方法会覆盖方法。

三 原型链的缺点

原型链也有一些缺点,如原型链中的属性是共享的,当修改某一个原型对象中的值时,下层所以实例在获取该值时都会变化,因为大家都是通过指针读取原型对象中的值。

由于这种缺陷,一般不单独使用原型链继承。

有一些缺点,如原型链中的属性是共享的,当修改某一个原型对象中的值时,下层所以实例在获取该值时都会变化,因为大家都是通过指针读取原型对象中的值。

由于这种缺陷,一般不单独使用原型链继承。

其他的继承方法请关注本专栏,等待后续文章。

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值