js继承详解

本文详细介绍了JavaScript中的六种主要继承方式:原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承和寄生组合式继承,分析了它们的优缺点,并通过实例展示了各种继承方式的实现。重点讨论了如何解决引用类型值共享和构造函数传参等问题,最后提出寄生组合式继承是被广泛认可的最佳继承范式。
摘要由CSDN通过智能技术生成

继承
在JavaScript中,有六种主要常见的继承方式,下面我会对每一种继承方式进行分析并总结它们的优缺点。

1.原型链继承
原型链继承的概念
在JavaScript中,实现继承主要是依靠原型链来实现的。其基本思想是是利用原型让一个引用类型继承另一个引用类型的属性和方法。

让我们简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象prototype,原型对象都包含一个指向构造函数的指针constructor,而实例都包含一个指向原型对象的内部指针__proto__

假如我们让原型对象等于另一个类型的实例,结果会怎么样呢?让我们来看下面这段代码。

function Father() {
this.name = ‘zhang’;
}

Father.prototype.sayName = function() {
console.log(this.name);
}

function Son() {
this.age = 18;
}

// 继承了Father
Son.prototype = new Father();
Son.prototype.sayAge = function() {
console.log(this.age);
}

const xiaoming = new Son();
console.log(xiaoming.sayName()) // ‘zhang’
以上代码,Son继承了Father,而继承是通过创建Father的实例,并将Son.prototype指向new出来的Father实例。实现的本质是重写了原型对象,待之是一个新类型的实例,也就是说,原来存在于Father构造函数中的所有属性和方法,现在也存在于Son.prototype中。

通过上图可知,我们没有使用Son默认提供的原型,而是给它换了一个新原型,这个原型就是Father的实例,其内部还有一个指针,指向Father的原型。由于Son的原型被重写了,所以xiaoming这个实例的constructor属性现在指向的是Father。一句话总结就是Son继承了Father,而Father继承Object,当调用xiaoming.toString()方法时,实际上是调用Object.prototype中的toString方法。

注意:给子类原型添加方法的代码一定要放到替换原型的语句之后

图片替换文本
还有一点需要提醒各位小伙伴们,在使用原型链继承时,千万不能使用对象字面量创建原型方法,因为这样做会重写原型链,来看下面这段代码。

function Father() {
this.name = ‘zhang’;
}

Father.prototype.sayName = function() {
console.log(this.name);
}

function Son() {
this.age = 18;
}

// 继承了Father
Son.prototype = new Father();
Son.prototype = {

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值