亲宝软件园·资讯

展开

JS继承

​ 大力yy   ​ 人气:0

前言:

说到JavaScript中的继承,与之密切相关的就是原型链了,JavaScript中的继承主要是通过原型链实现的。但是简单的原型链继承方式也存在一定的缺陷,在此借着《JavaScript高级程序设计(第四版)》一书,聊聊JavaScript中的几种继承方式

一、原型链

ECMA-262 把原型链定义为ECMAScript的主要继承方式,其基本思想就是通过原型继承多个引用类型的属性和方法。

在此回顾一下原型、构造函数、实例之间的关系:

每个构造函数都有一个原型对象,原型有一个属性指回构造函数,实例有一个内部指针指向原型。
有关原型和原型链的知识这里先不多说了,这里来谈谈原型链的一些问题。

1.1 原型链的问题

function Father() {
    this.colors = ['red'];
}
function Son() {}
Son.prototype = new Father();
let son1 = new Son();
console.log(son1.colors);  // ['red']
son1.colors.push('green');
console.log(son1.colors);  // ['red', 'green']
console.log(son1.hasOwnProperty('colors'));  // false
let son2 = new Son();
console.log(son2.colors);  // ['red', 'green']
console.log(Son.prototype.colors);  // ['red', 'green']

如上代码,构造函数的原型为new Father(),原型包含引用值属性colorsSon对象实例自身并没有colors属性,而是继承自原型,所以向colors中添加"green"影响到的原型上的colors。这就导致son2访问colors属性时值为['red', 'green']
所以,若原型上属性为引用值时,在实例中对该属性修改时会影响原型属性。

但是需要注意下面这种情况:

function Father() {
    this.colors = ['red'];
}
function Son() {}
Son.prototype = new Father();
let son1 = new Son();
console.log(son1.colors);  // ['red']
son1.colors = [];
console.log(son1.colors);  // []
console.log(son1.hasOwnProperty('colors'));  // true
let son2 = new Son();
console.log(son2.colors);  // ['red']
console.log(Son.prototype.colors);  // ['red']

代码中son1.colors = []并不是修改原型属性colors[],而是在为实例son1添加新的属性colors

那上面的代码来说就是,在创建Son对象实例的时候,不能指定colors的值。

综上所述:由于引用值和传参问题,原型链一般不会被单独使用。

二、盗用构造函数

为了解决原型包含引用值所导致的问题,出现了一种叫作"盗用构造函数"(constructor stealing)的技术。

2.1 基本思想

在子类构造函数中调用父类构造函数。主要是通过callapply来实现。

function Father() {
    this.colors = ['red'];
}
function Son() {
    // 在此通过call()调用父类构造函数
    Father.call(this);
}
let son1 = new Son();
console.log(son1.colors);  // ['red']
// 说明colors 是实例的自身属性
console.log(son1.hasOwnProperty('colors'));  // true
son1.colors.push('green');
console.log(son1.colors);  // ['red', 'green']
let son2 = new Son();
console.log(son2.colors);  // ['red']

new运算符调用构造函数的过程可知,会将函数中的this指向新创建的实例。所以Father.call(this);相当于实例调用了Father方法,然后添加了自身属性colors。所以后续son1.colors.push('green');并不会影响到其他实例。

2.2 可向父类构造函数传参

盗用构造函数的另外一个优点在于,可以在子类构造函数中向父类构造函数传参。

如下代码:

function Father(name) {
    this.name = name;
}
function Son(name) {
    Father.call(this, name);
}
let son = new Son('dali');
console.log(son);  // Son {name: 'dali'}

2.3 盗用构造函数的问题

盗用构造函数的主要问题如下:

function Father() {
    this.foo = function() {}
}
function Son() {
    Father.call(this);
}
let son1 = new Son();
let son2 = new Son();
console.log(son1.foo === son2.foo);  // false
let son = new Son();
console.log(son instanceof Father)  // false

综上所述:单独使用盗用构造函数也是不可行的。

三、组合继承(伪经典继承)

3.1 基本思想

组合继承综合了原型链和盗用构造函数,使用原型链继承原型上的属性和方法,通过盗用构造函数继承实例属性。

function Father(name) {
    this.name = name;
    this.colors = ['red'];
}
Father.prototype.sayHello = function() {
    console.log('hello');
}
function Son(name) {
    // 继承属性
    Father.call(this, name);
}
// 构建原型链,继承方法
Son.prototype = new Father();
let son1 = new Son('dali');
console.log(son1);  // {name: 'dali', ['red']}
son1.colors.push('green');
console.log(son1);  // {name: 'dali', ['red', 'green']}
let son2 = new Son('haha');
console.log(son2);  // {name: 'haha', ['red']}
// 每个实例都有自身的 colors 属性
console.log(son1.colors === son2.colors)  // false
// 实例间共享sayHello方法
console.log(son1.sayHello === son2.sayHello)  // true

通过调用父类构造函数,每个实例都有“自身”的原型属性(例如:colors),所以通过引用修改对应的对象时,不会影响其他实例,因为每个实例的引用值属性指向的对象不同。此外,通过原型链也实现了所以实例之间共享同一方法。

3.2 组合继承的问题

虽然组合继承弥补了原型链和盗用构造函数的不足,但是组合继承也存在效率问题:

console.log(Son.prototype);  // Father {name: undefined, colors: Array(1)}

紧接着上述代码,我们可以看到子类构造函数的原型对象上有namecolors属性,但是每个Son对象实例上都有自身的namecolors属性,并不是继承自原型。所以,子类构造函数的原型对象上有namecolors属性是多余的。

console.log(Son.prototype.constructor === Son)  //  false

修改构造函数的原型都会出现这种问题。

四、原型式继承

4.1 基本思想

function object(o) {
    function F();
    F.prototype = o;
    return new F();
}

其实就是在创建一个对象时,指定该对象的原型。

4.2 Object.create()

在ECMAScript 5 中增加了Object.create()方法,对原型式继承进行了规范化

Object.create() 方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

(1)语法

Object.create(proto,[propertiesObject])

(2)示例

o = Object.create(Object.prototype, {
  // foo会成为所创建对象的数据属性
  foo: {
    writable:true,
    configurable:true,
    value: "hello"
  },
  // bar会成为所创建对象的访问器属性
  bar: {
    configurable: false,
    get: function() { return 10 },
    set: function(value) {
      console.log("Setting `o.bar` to", value);
    }
  }
});

(3)手动实现

function objectCreate(proto, propertiesObject=undefined){
    // 构造函数
    function F() {
    }
    // 构造函数原型 prototype 链接到proto对象
    F.prototype = proto;

    // 创建对象
    const obj = new F();
    // 若参数 propertiesObject 被指定且不为 undefined
    if (propertiesObject !== undefined) {
        // 新创建的对象添加指定的属性值和对应的属性描述符。
        Object.defineProperties(obj, propertiesObject);
    }
    return obj;
}

五、寄生式继承

5.1 基本思想

创建一个实现继承的函数,以某种方式增强对象,然后返回这个对象。

function createAnother(original) {
    // 通过调用函数创建一个新对象
    let clone = Object(original);
    // 以某种方式增强这个对象
    clone.sayHi = function() {
        console.log('hi');
    };
    
    // 返回增强的对象
    return clone;
}

个人理解:寄生式继承就是通过一个函数,以当前对象为基础,创建一个新的对象,并为新的对象添加新的方法。

let obj = {};
let anotherObj = createAnother(obj);
anotherObj.sayHi();  // hi

5.2 寄生式继承

与盗用构造函数类似,寄生式继承中给对象新增的函数不能被重用。

六、寄生式组合继承

针对第三节中组合继承存在的问题,可以通过寄生式组合继承来解决。

6.1 基本思想

不通过调用父类构造函数给子类原型赋值,而是得到父类原型的一个副本。即使用寄生式继承来继承父类原型,然后将返回的新对象赋值给子类原型。

function inheritPrototype(subType, SuperType) {
    // 创建对象
    let prototype = Object(SuperType.prototype);
    // 增强对象(防止修改原型导致constructor丢失)
    prototype.constructor = subType;
    // 赋值对象
    subType.prototype = prototype
}

如上代码:

function Father(name) {
    this.name = name;
    this.colors = ['red'];
    console.log('父类构造函数调用了');
}
Father.prototype.sayHello = function() {
    console.log('hello');
}
function Son(name) {
    // 继承属性
    Father.call(this, name);
}
// 寄生式继承原型
inheritPrototype(Son, Father)

// 父类构造函数只在实例化时调用一次
let son = new Son('dali');  // 父类构造函数调用了

// 子类构造函数中不存在不必要的属性
console.log(Son.prototype)  // {sayHello: ƒ, constructor: ƒ}
// 子类构造函数的 constructor 属性未丢失
console.log(Son.prototype.constructor === Son)  // true

如上代码,寄生式组合继承解决了组合继承存在的一些问题。综上,寄生式组合继承可以算是引用类型继承的最佳模式。

但是,关于寄生式组合需要注意的一点是:寄生式继承函数在创建对象副本时,如果使用的是Object()函数,对于Object()函数如果给定值是一个已经存在的对象,则会返回这个已经存在的值(相同地址)。所以函数中prototype.constructor = subType;会修改父类原型上的constructor属性。

console.log(Father.prototype.constructor)  // ƒ Son(name) {// 继承属性 Father.call(this, name);}
console.log(Father.prototype.constructor === Father)  // false

但是,这并不会影响父类对象实例的创建

console.log(new Father('haha'))  // Father {name: 'haha', colors: Array(1)}

加载全部内容

相关教程
猜你喜欢
用户评论