js面向对象浅谈(三)


继承

继承是面向对象语言中特别重要的概念,js的继承主要是靠原型链实现的。

原型链!!!

看到我给标题打了三个叹号吗,这里真的很重要!这里真的很重要!这里真的很重要!js描述了原型链的概念,并将原型链做为实现继承的主要方法,其基本思想是让一个引用类型继承另一个引用类型的属性和方法。看代码

function SuperType() {
    this.property = true;
}

SuperType.prototype.getSuperValue = function () {
    return this.property;
}

function SubType () {
    this.Subproperty = false;
}

SubType.prototype = new SuperType();

SuperType.prototype.getSubValue = function () {
    return this.subproperty;
}

var instance = new SubType();
console.log(instance.getSuperValue())

下面继续上我的灵魂画作:

js面向对象浅谈(三)
话不多说,原理都在图里,相信聪明的你们早就懂了。在上面的代码中,我们没有使用SubType默认提供的原型,而是给它换了一个新原型。这个原型是父类的实例,新原型具有全部属性和方法,现在也存在于子类的原型中了。

通过原型链,本质上扩展了原型搜索机制。在instance.getSuperValue()调用会经历三个搜索步骤

  1. 搜索实例

  2. 搜索原型对象

  3. 搜索父类原型对象

一环一环向上搜索直到原型链末端才会停下来。但是我们子类上的valueOf这些方法是哪里来的呢?父类并没有显示声明这些方法啊下面继续上图。

js面向对象浅谈(三)

SubType继承了SuperType,SuperType继承了Object,当调用instance.valueOf()方法时,实际上调用的是保存在Object.prototype中的方法。

原型链的问题

原型链这么强大,同样也会造成问题。最主要的问题来自于包含引用类型的原型。引用类型的原型属性会被虽有实例共享,在通过原型来实现继承时,原型会变成另一个类型的实例,原先的实例属性也就顺理成章变成来现在的原型属性。

function SuperType () {
    this.colors = ['red', 'blue', 'green'];
}

function SubType () {
    
}


SubType.prototype = new SuperType();

var instance1 = new SubType();

instance1.colors.push('black');

console.log(instance1.colors)

var instance2 = new SubType();

console.log(instance2.colors)

还有一个问题,就是不能在创建子类性时,像父类型的构造函数传递参数。所以我们一般很少单独使用原型链。

借用构造函数

function SuperType () {
    this.colors = ['red', 'blue', 'green'];
}

function SubType () {
    // 继承了 SuperType
    SuperType.call(this);
}

var instance1 = new SubType();

instance1.colors.push('black');

console.log(instance1.colors);


var instance2 = new SubType();
console.log(instance2.colors);

也可以传递参数

 function SuperType (name) {
    this.name = name;
}

function SubType () {
    // 继承了 SuperType
    SuperType.call(this, '李小花');
}

var instance1 = new SubType();
console.log(instance1.name)
但是这样问题也很明显,方法只能定义在构造函数中定义,定义在原型上的方法无法继承。借用构造函数的技术也很少使用。

组合继承

将原型链和借用构造函数组合到一起,发挥两者之长的一张继承模式,下面来看个例子。

   function SuperType (name) {
    this.name = name;
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
};

function SubType (name, age) {
    // 继承了 SuperType
    SuperType.call(this, name);

    this.age = age;
}
SubType.prototype = new SuperType();

var instance1 = new SubType();
console.log(instance1.name)


组合继承是 js最常用的继承模式。

寄生组合式继承

组合继承是最常用的继承模式,但也不是没有缺点。组合继承最大的问题是无论在什么情况下,都会调用两次父类型构造函数。

 function SuperType (name) {
    this.name = name;
}

SuperType.prototype.sayName = function() {
    console.log(this.name)
};

function SubType (name, age) {
    // 继承了 SuperType
    SuperType.call(this, name);  //第二次调用

    this.age = age;
}
SubType.prototype = new SuperType();  // 第一次调用

var instance1 = new SubType();
console.log(instance1.name)

我们不必为了指定子类型的原型调用超类型的构造函数,我们所需要的不过是超类型原型的一个副本而已。

function SuperType (name) {
    this.name = name;
    this.color = ['red', 'blue', 'green'];
}

SuperType.prototype.sayName = function() {
    console.log(this.name);
};

function SubType (name, age) {
    SuperType.call(this, name);
    this.age = age;
}

SubType.prototype = Object.create(SuperType.prototype);

SubType.prototype.constructor = SubType


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>