专栏首页前端布道JavaScript之对象继承

JavaScript之对象继承

原型链继承

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

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

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

// 继承了 SuperType
SubType.prototype = new SuperType();

var subType = new SubType();
console.log(subType.getSuperValue());   // 继承了 SuperType 的 getSuperValue 方法,打印 true

缺点

  1. 如果 SuperType 存在一个引用类型的属性,而 SubType 的原型对象变为 SuperType 的一个实例,这样每个 SubType 的实例都会共用这个引用类型的属性,不同的 SubType 实例对该属性的操作都将会在其它 SubType 实例中体现出来,这跟每个实例拥有自己的属性是违背的。
function SuperType(){
    this.colors = ["red", "blue", "green"];
}

function SubType(){            
}

// 继承了 SuperType
SubType.prototype = new SuperType();

var subType1 = new SubType();
subType1.colors.push("black"); // subType1 修改 colors
console.log(subType1.colors);    // "red,blue,green,black"

var subType2 = new SubType();
console.log(subType2.colors);    // "red,blue,green,black",subType2 的 colors 值为 subType1 修改之后的值
  1. 在创建子类型(SubType)的实例时,不能向超类型(SuperType)的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例(原因如缺点1)的情况下,给超类型的构造函数传递参数。

借用构造函数继承

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

function SubType(){  
    // 继承了 SuperType
    SuperType.call(this); // 通过 apply() 或 call() 执行 SuperType 的构造函数
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);    // "red,blue,green,black"

var instance2 = new SubType();
alert(instance2.colors);    // "red,blue,green"

该方法解决了 原型链继承 的引用型属性共享的问题。

还有可以在子类型构造函数中向超类型构造函数传递参数,如下例子:

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

function SubType(){  
    // 继承 SuperType,并传递参数
    SuperType.call(this, "Nicholas");

    // 实例属性
    this.age = 29;
}

var subType = new SubType();
console.log(subType.name);   //"Nicholas";
console.log(subType.age);    //29

缺点

  1. 方法都在构造函数中定义,因此函数复用就无从谈起了。而且,在超类型的原型中定义的方法,对子类型而言也是不可见的,结果所有类型都只能使用构造函数模式。

原型链/构造函数组合继承

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

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

function SubType(name, age){
    // 执行 SuperType 的构造函数,继承 SuperType 的属性
    SuperType.call(this, name);

    this.age = age;
}

// 将 SuperType 的实例赋给 SubType 的原型对象,这样 SubType 可继承 SuperType 原型中的方法
SubType.prototype = new SuperType();

SubType.prototype.sayAge = function(){
    console.log(this.age);
};

var  subType1 = new SubType("Nicholas", 29);
subType1.colors.push("black");
console.log(subType1.colors);  // "red,blue,green,black"
subType1.sayName();      // "Nicholas";
subType1.sayAge();       // 29


var subType2 = new SubType("Greg", 27);
console.log(subType2.colors);  // "red,blue,green"
subType2.sayName();      // "Greg";
subType2.sayAge();       // 27

缺点

  1. 无论什么情况,都会调用两次超类型构造函数,一次是在创建子类型原型的时候,一次是在执行子类型构造函数的时候。这样一个 SubType 实例会包含两组 SuperType 的属性,一组在 SubType 实例上,一组在 SubType 原型中。

原型式继承

该方法基于已有的对象创建新对象,同时还不必因此创建自定义类型。

var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = Object.create(person); // 使用 person 作为新对象(anotherPerson)的原型
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");

console.log(person.friends);   // "Shelby,Court,Van,Rob,Barbie"

寄生式继承

该方法创建一个仅用于封装继承过程的函数,该函数在内部以某种方式来增强对象,最后再像真地是它做了所有工作一样返回对象。

function creatAnother(original) {
    var clone = Object.create(original); // 创建一个新对象
    clone.sayHi = function() { // 以某种方式来增强这个对象
        console.log("hi");
    }
    return clone; // 返回该对象
}

// 使用示例
var person = {
    name: "Nicholas",
    friends: ["Shelby", "Court", "Van"]
};

var anotherPerson = creatAnother(person);
anotherPerson.sayHi(); // "hi"

寄生/原型链/构造函数组合继承

该方法解决原型链/构造函数组合继承调用两次超类型构造函数的问题。

通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。

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

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);   // 根据超类型原型创建新对象
    prototype.constructor = subType;               // 将新对象的 constructor 设置为子类型
    subType.prototype = prototype;                 // 将新对象赋给子类型的原型
}

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

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

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

    this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function(){
    console.log(this.age);
};

var subType1 = new SubType("Nicholas", 29);
subType1.colors.push("black");
console.log(subType1.colors);  // "red,blue,green,black"
subType1.sayName();      // "Nicholas";
subType1.sayAge();       // 29


var subType2 = new SubType("Greg", 27);
alert(subType2.colors);  // "red,blue,green"
subType2.sayName();      // "Greg";
subType2.sayAge();       // 27

参考资料:《JavaScript高级程序设计(第3版)》第6.3节 继承

本文分享自微信公众号 - 前端布道(FontendPreach)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-05-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript实现简单的双向数据绑定

    双向数据绑定简单来说就是UI视图(View)与数据(Model)相互绑定在一起,当数据改变之后相应的UI视图也同步改变。反之,当UI视图改变之后相应的数据也同步...

    laixiangran
  • 图解javascript this指向什么?

    JavaScript 是一种脚本语言,支持函数式编程、闭包、基于原型的继承等高级功能。JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会...

    laixiangran
  • 全方位理解JavaScript的Event Loop

    下面我们一个一个的来了解 Event Loop 相关的知识点,最后再一步一步分析出本段代码最后的输出顺序。

    laixiangran
  • google gcr.io、k8s.gcr.io 国内镜像

    https://github.com/anjia0532/gcr.io_mirror

    用户1177380
  • 容器学习笔记之将Google的gcr.io、k8s.gcr.io 换为国内镜像

    https://github.com/anjia0532/gcr.io_mirror

    Jetpropelledsnake21
  • 脑机接口研究大突破!72岁高位截瘫患者“意念”喝可乐,创下3个“首例”

    日前,高位截瘫患者张先生借助“意念”用“一只手”拿起可乐,并成功喝进嘴里,一举登上热搜。

    镁客网
  • 「仓储网络智能库存管理问题」最好的答案 | GOC大赛

    本篇特约全球运筹优化挑战赛-仓储物流智能库存管理赛题冠军 TP_AI队伍分享赛题解析。来自清华大学经管学院的闵旭和来自北京大学人工智能创新中心的马思源因为比赛走...

    京东技术
  • React学习笔记—JSX

    小胖
  • Python代码的几条建议

    体会一下这Best这招,选择是使用map函数,它可以将内置函数类型str映射到迭代器range。这会生成一个map对象,然后就可以像其他示例一样join。在某些...

    刀刀老高
  • 记一次Linux计划任务cron无结果的排查过程

    上篇文章中实现的端口扫描方案,在机器上跑时发下计划任务没有执行结果,也未收到监控告警。但是通过直接命令行模式是的确可以的,遂排查下问题到底出在了哪里。

    瓦都剋

扫码关注云+社区

领取腾讯云代金券