其他分享
首页 > 其他分享> > 浅谈js的几种继承方式(摘自js红宝书)

浅谈js的几种继承方式(摘自js红宝书)

作者:互联网

1、原型链继承

js的主要继承方式就是通过原型链继承,基本思想就是通过原型继承多个引用的属性和方法(js之所以有原型链这东西估计也就是为了继承而设计的)

所有的构造函数都有一个原型(构造函数通过prototype指向原型,原型又通过constructor指回构造函数)

由构造函数new出来的实例也有一个属性__proto__指向构造函数的原型,现在就知道原型中constructor的作用了,帮助实例对象找到他妈。

上述各个对象之间的扯蛋关系就称之为原型链。

现在说说原型链继承:

此处定义一个函数(富豪王林):

function WangLin() {
    this.money = 'hundreds of millions'
}

王林家族又有一个癖好,炫耀财富:

WangLin.prototype.ShowWealth = function(){
     return this.money;
}

此时有一个王聪,口袋里并没有什么钱:

function WangCong () {
   this.myMoney='0.1'
}

王聪想要继承王林的钱,怎么办,那就让王聪的家族与王林产生关系:

WangCong.prototype = new WangLin();

此时我们给王聪家族也加一个方法:

WangCong.prototype.ShowMyWealth = function() {
     return this.myMoney;
}

此时我们可以看到,王聪家族的人也可以搞到王林的钱了:

let Shacha = new WangCong()
console.log(ShaCha.ShowWealth()) // 'hundereds of millions'

言归正传:

该方法使得王聪抛弃了自己的原型,直接用来王林new出来的实例,根据原型链的扯淡关系,王聪就可以使用王林实例和王林原型的任何属性和方法了;

该方法在对引用类型使用时会存在重大缺陷,可以理解为一个人干某些事后会影响所有相关链的家人。

2、抢劫构造函数实现继承:

此处有一个白富美:

function BaiFunMei(){
   this.features =[ 'bai', 'fun', 'mei' ]
}

一傻蛋想要白富美的特点,直接强取就可以(简单粗暴,不服打死):

function ShaDan() {
  BaiFuMei.call(this);
}

 

言归正传:

该方法比较原型链继承优点在于相互之间不会存在之前引用类型造成的影响,但缺点也是不能通过原型链访问其被继承者原型上的方法和属性;

3、组合继承

故名思义,将1和2中的方法结合起来,结合了两者的优点,是目前js中使用最多的继承模式;(具体可参考红宝书,此处不在瞎扯)

4、原型式继承

    后续补充

5、寄生式继承

    后续补充

6、寄生式组合继承

    后续补充

标签:function,浅谈,继承,王聪,js,原型,王林,红宝书,构造函数
来源: https://www.cnblogs.com/lipu12281/p/14979134.html