js 继承

构造函数继承

  类式继承是在函数对象内调用父类的构造函数,使得自身获得父类的方法和属性。call和apply方法为类式继承提供了支持。通过改变this的作用环境,使得子类本身具有父类的各种属性。

只继承构造函数的属性,不继承原型的属性。 解决原型链缺点。可以继承多个构造函数的属性,在子实例中可以向父类传参。

缺点:无法实现构造函数的复用;每个新实例都有父类构造函数副本,臃肿。

var father = function() {

  this.age = 52;

  this.say = function() {

    alert('hello i am '+ this.name ' and i am '+this.age + 'years old');

  }

}

var child = function() {

  this.name = 'bill';

  father.call(this);

}

var man = new child();

man.say();

原型链继承(借用原型链实现继承)

function Parent1(){ this.name = "parent1"; this.colors = ["red","blue","yellow"]; } function Child1(){ this.name = "child1"; } Child1.prototype = new Parent1();//把子类的prototype设置为父类的实例

实例可继承的属性有:实例构造函数的属性,父类构造函数属性,父类原型的属性,新实例不会继承父类实例的属性。

优点:继承了父类的模板,又继承了父类的原型对象,

缺点:1 如果属性是引用类型的话,会共享引用类型。

2 新实例无法向父类构造函数传参,继承单一。父类实例传参,不是子类实例化传参。


组合式继承

1 可以继承父类原型上的属性,可以传参,可以服用。

2 每个新实例引入构造函数属性上私有的。

缺点:调用两次父类构造函数,耗内存。子类的构造函数会代替原型上的构造函数。

这里所谓的组合是指组合借用构造函数和原型链继承两种方式。

function Parent2(){ this.name = "parent2"; this.colors = ["red","blue","yellow"]; } function Child2(){ Parent2.call(this); this.type = "child2"; } Child2.prototype = new Parent2()

注意第6,9行,这种方式结合了借用构造函数继承和原型链继承的有点,能否解决上述两个实例对象没有被隔离的问题呢?

var s1 = new Child2(); s1.colors.push("black"); var s2 = new Child2(); s1.colors; // (4) ["red", "blue", "yellow", "balck"] s2.colors; // (3) ["red", "blue", "yellow"]

可以看到,s2和s1两个实例对象已经被隔离了。

但这种方式仍有缺点。父类的构造函数被执行了两次,第一次是Child2.prototype = new Parent2(),第二次是在实例化的时候,这是没有必要的。

组合式继承优化1

直接把父类的原型对象赋给子类的原型对象

function Parent3(){ this.name = "parent3"; this.colors = ["red","blue","yellow"]; } Parent3.prototype.sex = "男"; Parent3.prototype.say = function(){console.log("Oh, My God!")} function Child3(){ Parent3.call(this); this.type = "child3"; } Child3.prototype = Parent3.prototype; var s1 = new Child3(); var s2 = new Child3(); console.log(s1, s2);

但是,我们来看如下代码:

console.log(s1 instanceof Child3); // true console.log(s1 instanceof Parent3); // true

可以看到,我们无法区分实例对象s1到底是由Child3直接实例化的还是Parent3直接实例化的。用instanceof关键字来判断是否是某个对象的实例就基本无效了。

我们还可以用.constructor来观察对象是不是某个类的实例:

console.log(s1.constructor.name); // Parent3

从这里可以看到,s1的构造函数居然是父类,而不是子类Child3,这显然不是我们想要的。

组合式继承优化2

这是继承的最完美方式

function Parent4(){ this.name = "parent4"; this.colors = ["red","blue","yellow"]; } Parent4.prototype.sex = "男"; Parent4.prototype.say = function(){console.log("Oh, My God!")} function Child4(){ Parent4.call(this); this.type = "child4"; } Child4.prototype = Object.create(Parent4.prototype); Child4.prototype.constructor = Child4;

Object.create是一种创建对象的方式,它会创建一个中间对象

var p = {name: "p"} var obj = Object.create(p) // Object.create({ name: "p" })

通过这种方式创建对象,新创建的对象obj的原型就是p,同时obj也拥有了属性name,这个新创建的中间对象的原型对象就是它的参数。

这种方式解决了上面的所有问题,是继承的最完美实现方式。

ES6中继承

Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。

class Parent { } class Child1 extends Parent { constructor(x, y, colors) { super(x, y); // 调用父类的constructor(x, y) this.colors = colors; } toString() { return this.colors + ' ' + super.toString(); // 调用父类的toString() } }

上面代码中,constructor方法和toString方法之中,都出现了super关键字,它在这里表示父类的构造函数,用来新建父类的this对象。

子类必须在constructor方法中调用super方法,否则新建实例时会报错。如果子类没有定义constructor方法,这个方法会被默认添加,不管有没有显式定义,任何一个子类都有constructor方法。

ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this))。

ES6 的继承机制完全不同,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 借用构造函数继承 原型链式继承(借用原型链实现继承) 组合式继承 组合式继承优化1 组合式继承优化2 ES6中继承...
    lxt410725阅读 320评论 0 1
  • 继承的概念:子类可以使用父类共享的属性和方法,避免重复代码提高代码复用性。 原型链:子类可以共享父类的实例对象和实...
    浅秋_6672阅读 420评论 0 0
  • 一、原型链 学过java的同学应该都知道,继承是java的重要特点之一,许多面向对象的语言都支持两种继承方式:接口...
    grain先森阅读 1,435评论 0 39
  • 一.构造继承 构造函数继承: function Super(){ this.colors= ['c','a','b...
    yuanjiex阅读 229评论 0 1
  • 万籁俱寂的夜里 突然传来雨的声音 非常杂乱的声音 让我瞬间惊醒 翻身起来关窗 再次躺下后 却辗转反侧难以入睡 雨落...
    古商城馋师阅读 188评论 0 0