美文网首页
JS中的6种继承方法

JS中的6种继承方法

作者: 2016_18点 | 来源:发表于2017-05-06 14:46 被阅读0次

一、原型的继承
只需要将子级的原型对象设置为父级的一个实例,加入到原型链中即可。

// 继承原型
cPerson.prototype = new Person(name, age);
// 添加更多方法
cPerson.prototype.getLive = function() {}

缺点:
1.来自原型对象的引用属性是所有实例共享的,原型中的一改则全改
2.创建子类实例时,无法向父类构造函数传参


二、构造函数的继承
等于是把父类的实例属性复制了一份给子类实例装上了(完全没有用到原型)
(构造函数的本质,它其实是在new内部实现的一个复制过程)
在继承时想要的,就是想父级构造函数中的操作在子级的构造函数中重现一遍即可。我们可以通过call方法来达到目的。

// 构造函数的继承function cPerson(name, age, job) {
    Person.call(this, name, age);
    this.job = job;
}

缺点:
无法实现函数复用,每个子类实例都持有一个新的fun函数,太多了就会影响性能,内存爆炸。


三、组合继承(最常用)
把实例函数都放在原型对象上,以实现函数复用。同时还要保留借用构造函数方式的优点,通过Super.call(this);继承父类的基本属性和引用属性并保留能传参的优点;通过Sub.prototype = new Super();继承父类函数,实现函数复用

function Sub(){
    Super.call(this);   // 核心
    // ...
}
Sub.prototype = new Super();    // 核心

缺点: 由于调用了2次父类的构造方法,会存在一份多余的父类实例属性(原因: 第一次SuperType.call(this);语句从父类拷贝了一份父类实例属性给子类作为子类的实例属性,第二次SubType.prototype = new SuperType();创建父类实例作为子类原型,此时这个父类实例就又有了一份实例属性,但这份会被第一次拷贝来的实例属性屏蔽掉,所以多余。)


四、寄生组合继承(最佳方式)
( 对组合继承的优化)
用beget(Super.prototype);切掉了原型对象上多余的那份父类实例属性

function beget(obj){   // 生孩子函数 beget:龙beget龙,凤beget凤。
    var F = function(){};
    F.prototype = obj;
    return new F();  //返回一个新的构造函数F的实例
}
function Super(){
    // 只在此处声明基本属性和引用属性
    this.val = 1;
    this.arr = [1];
}
//  在此处声明函数
Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};
//Super.prototype.fun3...
function Sub(){
    Super.call(this);   // 核心
    // ...
}
var proto = beget(Super.prototype); // 核心
proto.constructor = Sub;            // 核心
Sub.prototype = proto;              // 核心
 
var sub = new Sub();
alert(sub.val);
alert(sub.arr);

五、原型式
用生孩子函数得到得到一个“纯洁”的新对象(“纯洁”是因为没有实例属性),再逐步增强之(填充实例属性)
(beget函数的参数为父类的一个实例化对象,这个参数作为新构造函数的原型)

function beget(obj){   // 生孩子函数 beget:龙beget龙,凤beget凤。
    var F = function(){};
    F.prototype = obj;
    return new F();
}
function Super(){
    this.val = 1;
    this.arr = [1];
}
 
// 拿到父类对象
var sup = new Super();
// 生孩子
var sub = beget(sup);   // 核心
// 增强
sub.attr1 = 1;
sub.attr2 = 2;
//sub.attr3...

六、寄生式
给原型式继承穿了个马甲而已,看起来更像继承了(上面介绍的原型式继承更像是对象复制)
注意:beget函数并不是必须的,换言之,创建新对象 -> 增强 -> 返回该对象,
这样的过程叫寄生式继承,新对象是如何创建的并不重要(用beget生的,new出来的,字面量现做的。。都可以)
(beget函数的参数为父类的一个实例化对象,这个参数作为新构造函数的原型)
缺点:无法实现函数复用(没用到原型,当然不行)


相关参考:

重新理解JS的6种继承方式

相关文章

  • [读] JS中的call()和apply()方法

    JS中的call()和apply()方法 实现继承 多重继承

  • js一些技巧.md

    js中的constructor和prototype 组合继承与寄生继承 组合继承 可以继承实例属性和方法,也可以继...

  • JS面向对象整理篇一——基础概念衍生

    JS面向对象 oop 继承:实例可以继承A对象中的方法和属性,减少代码冗余 封装:对象把实现过程封装在方法中,调用...

  • js 中的几种继承方法

    1. 原型链继承:方法的原型是某个类的实例,即可继承这个类的所有属性和方法。父类私有和公有的属性都变为子类公有的。...

  • js继承之原型链继承

    面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法。

  • 我碰到的前端面试题(js)

    1.js实现继承有哪几种方法? 方法一:原型链继承 方法二: 构造函数继承 方法三: 组合继承 2.this指向问...

  • JS继承

    JS中的继承 许多OO语言都支持两种继承方式:接口继承和实现继承; 因为JS中没有类和接口的概念 , 所以JS不支...

  • JavaScript混合式继承

    继承:自己没有的方法,其他对象有,把其他对象的方法拿过来使用,就像自己也拥有该方法一样。原型式继承:在 js 中,...

  • JS里的继承

    什么是继承继承的原理如何完成JS的继承? 什么是继承 继承就是子类拥有父类的各种属性和方法那什么是类?这里的JS的...

  • js 继承方法

    Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的proto。如果完全重写了pr...

网友评论

      本文标题:JS中的6种继承方法

      本文链接:https://www.haomeiwen.com/subject/yxoetxtx.html