阅读 406

JS寄生组合式继承模式

先理解几个知识:

  1. Object.create();
  2. Object.prototype
  3. Object.prototype.constructor

1.

Object.create(null) 创建的对象是一个空对象,在该对象上没有继承 Object.prototype 原型链上的属性或者方法,例如:toString(), hasOwnProperty()等方法

2.

Object.prototype 属性表示 Object 的原型对象。几乎所有的 JavaScript 对象都是 Object 的实例;一个典型的对象继承了Object.prototype的属性(包括方法),尽管这些属性可能被遮蔽(亦称为覆盖)。但是有时候可能故意创建不具有典型原型链继承的对象,比如通过Object.create(null)创建的对象,或者通过Object.setPrototypeOf方法改变原型链。

3.

返回创建实例对象的 Object 构造函数的引用。注意,此属性的值是对函数本身的引用,而不是一个包含函数名称的字符串。对原始类型来说,如1,true和"test",该值只可读。

From MDN

代码:

// 寄生组合继承

function inheritPrototype(Sub,Super) {
    // Object.create 可以将subPrototype的原型(__proto__) 设置成 Super的原型对象(prototype);
    var subPrototype = Object.create(Super.prototype);
    // 因为Object.prototype.constructor会返回对象本身,所以这里设置为Sub本身;
    subPrototype.constructor = Sub;

    // 这里将Sub的原型对象(prototype)设置成subPrototype,实现Sub对Super基于原型链的继承;
    Sub.prototype = subPrototype;

}

// Eg:

function Super(name) {
    this.name = name;
}
Super.prototype.show = function() {
    console.log(this.name);
}
function Sub() {
    // 这里 Sub 将自己的上下文传给Super并执行,真可谓一个懒字了得;
    Super.apply(this,arguments);
}

// 调用寄生组合式继承;
inheritPrototype(Sub,Super);

var instance = new Sub('北有极光');

// instance 本身并没有show方法,
// 但是通过inheritPrototype函数把instance对象的原型的原型设置成了Super的原型对象,
// 所以,基于JavaScript 原型链的特性,实际上是这样调用的 instance.__proto__.__proto__.show();
// 打印一下便知道了;
instance.show();

console.log(
    instance.__proto__.__proto__ === Super.prototype
);

复制代码

附加图片:

文章分类
前端
文章标签