es5原型式继承间解

1. 原型式继承方法

js 继承使用不难,要说清楚,需要自己一定总结,才能说清楚。

es5 的继承方式有很多种,这个是 js 语言本身造成,但是类实现继承之后的功能,有如下 3 条:

  1. 子类继承父类,主要继承父类的原型上的属性和方法,和可以自定义子类继承父类的构造函数里的属性和方法
  2. 重写子类原型的属性和方法时,父类的原型的属性和方法不会更改
  3. 子类没有重写继承父类属性和方法,父类重写子类继承父类的属性和方法时,子类的原型上的属性和方法也会跟着重写

es5 继承最主要的原型式继承方法,这个函数步骤分为 4 步骤:

  1. 创建一个中间的构造函数Fn,Fn.prototype = Super.prototype
  2. 实例化 Fn 为 var fn = new Fn(),将 Child.prototype = fn
  3. Child.prototype.constructor = Child
  4. Child 构造函数中封装一个 super 方法,来继承父类里的构造函数。

ps:当然步骤 1 和 2 可用 Object.create() 来替代。

代码如下:

function extends (Sup, Sub) {
    // var Fn = function () {}
    // Fn.prototype = Sup.prototype
    // var fn = new Fn()
    // Sub.prototype = fn
    Sub.prototype = Object.cteate(Sup.prototpye)
    Sub.prototype.constructor = Sub
}

function super (Sup) {
    var args = []
    if (arguments.length > 1) {
        args = Array.protoype.slice.call(arguments, 1)
    }
    Sup.apply(this, args)
}
function Sup (name) {
    this.name = name
}
function Sub (name) {
    super(Sup, name)
}

extends(Sup, Sub)

内存分析:

2. 其他继承方式

明白上面一种方式,其他几种方法,就很容易理解。

借用构造函数

子类只继父类构造函数里的属性,不继承原型

组合继承

子类原型上继承父类所有定义属性,如果子类可以自定义继承构造函数里的属性

其他,略

猜你喜欢

转载自www.cnblogs.com/liangcheng11/p/10674471.html