资讯专栏INFORMATION COLUMN

《javascript高级程序设计》第六章 读书笔记 之 javascript继承的6种方法

孙吉亮 / 2122人阅读

摘要:继承的是超类型中构造函数中的属性,如上继承了属性,但没有继承原型中的方法。上述造成的结果是子类型实例中有两组超类型的构造函数中定义的属性,一组在子类型的实例中,一组在子类型实例的原型中。

ECMAScript只支持实现继承,主要依靠原型链来实现。与实现继承对应的是接口继承,由于script中函数没有签名,所以无法实现接口继承。

一、原型链

基本思想:利用原型让一个引用类型继承另一个引用类型的属性和方法。
构造函数、原型和实例的关系:每一个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个纸箱原型对象的内部指针。
基本用法:

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

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

function SubType() {
    this.subproperty = false;
}
// 子的原型是父的对象
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function () {
    return this.subproperty;
}
var instance = new SubType();
console.log(instance.getSuperValue()); // true

关系图:

但实际上,SuperType也有自己的原型,就是Object,这个原型是默认的。
所有函数的默认原型都是Object的实例,因此默认原型都会包含一个内部指针,指向Object.prototype。
所以完整的关系图应该是

使用原型能够做到继承,但实际中并不多带带使用原型链来实现继承,原因如下:
1、对于不需要‘父亲’的私有属性的继承:我们知道原型来创建对象,使得所有的实例都拥有这些共享的属性和方法,我们在使用原型链来继承最主要的是SubType的原型变为SuperType的实例对象,那么本来是Super实例私有的属性property,且处于SubType的原型中成为SubType实例的共享属性。
2、对于需要‘父亲‘私有属性的继承:同一,我们知道会继承父亲的私有属性,但我们无法通过传入参数到’父亲‘的构造函数来实现属性特有值的目的。
鉴于以上我们开始使用第二种继承方式。

二、借用构造函数(伪造对象、经典继承)

基本思想:在子类型构造函数的内部调用超类型构造函数

function SuperType() {
    this.colors = ["red", "yellow", "black"];
}

SuperType.prototype.getColor = function () {
    return this.colors;
}

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

var instance1 = new SubType();
instance1.colors.push("pink"); // ["red", "yellow", "black","pink"]
console.log(instance1.colors);
var instance2 = new SubType();
console.log(instance2.colors); // ["red", "yellow", "black"]
console.log(instance2 instanceof SuperType); // false
console.log(instance2.getColor()); // instance2.getColor is not a function

此方法是在子类型中调用了超(父)类型的构造函数,使构造函数中的属性初始化了。
继承的是超类型中构造函数中的属性,如上继承了colors属性,但没有继承SuperType原型中的getcolor方法。
使用此方法,我们还可以传递参数对属性进行初始化

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

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

var instance1 = new SubType();
console.log(instance1.age); // 18

如果需要确保SuperType构造函数不会重写子类型的属性,可以在调用超类型构造函数后,再添加应该在子类型定义的属性。
缺点:
1、超类型的原型不可见
2、所有属性方法都必须写在构造函数中,所有类型都只能使用构造函数模式创建

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

将原型链和借用构造函数的技术组合到一块。
思想:使用原型链实现对原型属性和方法的继承,借用构造函数实现对实例属性的继承。

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

SuperType.prototype.getAge = function () {
    return this.age;
}

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

SubType.prototype = new SuperType(20);
var instance1 = new SubType(18);
console.log(instance1.age); // 18
console.log(instance1.getAge()); // 18
console.log(instance1.__proto__.age); // 20
var instance2 = new SubType(17);
instance2.__proto__.age=55;
console.log(instance1.__proto__.age); // 55
console.log(instance2.__proto__.age); // 55

我们可以看到,实际上instance1和instance2的原型上仍然存在属于SuperType的实例属性的属性。只是instance1和instance2有了各自的age属性,不会再往原型上找。
instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。
组合继承避免了原型链和借用构造函数的缺陷并融合了两者的有点,成为js中最常用的继承模式。

四、原型式继承

思想:借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型。

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

}

var person = {
    name: "linda",
    friends: ["lily", "shirley"]
};
var antherPerson = object(person);
antherPerson.friends.push("tom");
console.log(antherPerson.name); // linda
console.log(antherPerson.friends); // ["lily", "shirley", "tom]

这个方法和原型方法原理一样,只不过把子类型的原型设置成超类型的实例对象包含在方法object中。
ECMAScript5中新增了object.create()方法来规范原型式继承(作用与上述object函数作用类似),第一个参数是想要继承的超类型的实例对象,第二个参数是子类型所具有的属性。

var person={
    name:"lily",
    age:12
}
var anotherPerson=Object.create(person,{name:{value:"linda"}});
console.log(anotherPerson.name); // "linda"

第二个参数的写法必须如上的格式。
支持Object.create()方法的浏览器有ie9+,Firefox4.+、Safari5+、Opera12+和Chrome

五、寄生式继承

思想:与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真的是它做了所有工作一样返回对象。
代码:

function object(o){
    function F(){}
    F.prototype=o;
    return new F();
}
var person = {
    name: "lily",
    age: 12
}
function createAnotherPerson(original){
    var clone=object(original);
    clone.sayHi=function(){
        console.log("hi");
    }
    return clone;
}
var anotherPerson =createAnotherPerson(person);
anotherPerson.sayHi(); // "hi"
console.log(anotherPerson.name); // "linda"
六、寄生组合式继承

组合继承是js最常用的继承模式,可以结合不同的模式的优点,但组合继承,每次都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。
上述造成的结果是子类型实例中有两组超类型的构造函数中定义的属性,一组在子类型的实例中,一组在子类型实例的原型中。寄生组合式继承可以解决上述缺点。

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

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

function Sub(age) {
    Super.call(this, "linda");
    this.age = age;
}

Sub.prototype = new Super();
Sub.constructor = Sub;
var type=new Sub();
type.sayName(); // "linda"
console.log(type.name); // "linda"
console.log(type.__proto__.name); // undefined

思想:借用构造函数来继承属性,借用原型链来继承方法。即继承超类型的原型,然后再将结果指定给子类型的原型。
封装一下即:

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

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

function Sub(age) {
    Super.call(this, "linda");
    this.age = age;
}

function object(o) {
    function F() {
    }

    F.prototype = o;
    return new F();
}

function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype); // 创建对象
    prototype.constructor = subType; // 增强对象
    subType.prototype = prototype; // 指定对象
}
inheritPrototype(Sub, Super);
var type = new Sub();
type.sayName(); // "linda"
console.log(type.name); // "linda"
console.log(type.__proto__.name); // undefined

这个模式的优点体现在
1、只调用了一次Super构造函数,高效率
2、避免了在Sub.prototype上面创建不必要的多余的属性
3、原型链保持不变

开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100898.html

相关文章

  • javascript高级程序设计六章 读书笔记 javascript对象创建方式

    摘要:三种使用构造函数创建对象的方法和的作用都是在某个特殊对象的作用域中调用函数。这种方式还支持向构造函数传递参数。叫法上把函数叫做构造函数,其他无区别适用情境可以在特殊的情况下用来为对象创建构造函数。 一、工厂模式 工厂模式:使用字面量和object构造函数会有很多重复代码,在此基础上改进showImg(https://segmentfault.com/img/bVbmKxb?w=456&...

    xiaotianyi 评论0 收藏0
  • 高程读书笔记 六章 面向对象程序设计

    摘要:创建一个新对象将构造函数的作用域赋给新对象因此就指向了这个新对象执行构造函数中的代码为这个新对象添加属性返回新对象。 本章内容 理解对象属性 理解并创建对象 理解继承 ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值、对象或者函数 理解对象 创建对象 创建自定义对象的最简单方式就是创建一个Object的实例,再为它添加属性和方法。 var person = new...

    468122151 评论0 收藏0
  • JS高程读书笔记--六章原型继承

    摘要:高程读书笔记第六章理解对象创建自定义对象的方式有创建一个实例,然后为它添加属性和方法。创建了自定义的构造函数之后,其原型对象默认只会取得属性至于其他方法都是从继承而来的。 JS高程读书笔记--第六章 理解对象 创建自定义对象的方式有创建一个Object实例,然后为它添加属性和方法。还可用创建对象字面量的方式 属性类型 ECMAScript在定义只有内部采用的特性时,描述了属性的各种特征...

    EasonTyler 评论0 收藏0
  • 《java 8 实战》读书笔记 -六章 用流收集数据

    摘要:分区函数返回一个布尔值,这意味着得到的分组的键类型是,于是它最多可以分为两组是一组,是一组。当遍历到流中第个元素时,这个函数执行时会有两个参数保存归约结果的累加器已收集了流中的前个项目,还有第个元素本身。 一、收集器简介 把列表中的交易按货币分组: Map transactionsByCurrencies = transactions.stream().collect(groupi...

    Airy 评论0 收藏0
  • 《Python基础教程》六章--读书笔记

    摘要:第六章抽象本章会介绍如何将语句组织成函数。关键字参数和默认值目前为止,我们使用的参数都是位置参数,因为它们的位置很重要,事实上比它们的名字更重要。参数前的星号将所有值放置在同一个元祖中。函数内的变量被称为局部变量。 第六章:抽象 本章会介绍如何将语句组织成函数。还会详细介绍参数(parameter)和作用域(scope)的概念,以及递归的概念及其在程序中的用途。 懒惰即美德 斐波那契数...

    AnthonyHan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<