JavaScript原型——继承

像Java这样面向类的语言,继承就是子类与母类的关系,动物类下面有猫类、狗类等等,每个类都有自己的特性。但是,JavaScript没有类(至少在ES6之前),采用原型继承:
这里写图片描述

原型风格的代码:

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

Foo.prototype.myName = function() {
    return this.name;
}

function Bar(name) {
    Foo.call(this,name);
}

Bar.prototype = Object.create(Foo.prototype);   //这句很关键!

var a = new Bar("sf");

a.myName(); //sf

敲黑板!Bar.prototype = Object.create(Foo.prototype);这句很关键!

调用Object.create()会凭空创建一个“新”对象并把新对象内部的[[Prototype]]关联到你指定的对象。

声明function Bar(){}时,Bar会有一个.prototype关联到默认对象,但这个对象并不是我们想要的Foo.prototype。因此,我们创建了一个新对象,并把它关联到我们希望的对象上,直接把原始的关联对象抛弃掉


注意:下面两种关联方式是错误的:

  • Bar.prototype = Foo.prototype;
function Foo(name) {
    this.name = name;
}

function Bar(name) {
    Foo.call(this,name);
}

Bar.prototype = Foo.prototype;  //这样是错误的!

Bar.prototype.sayHello = function() {
    console.log("Bar says hello.");
}

var a = new Foo("sf");

a.sayHello();   //Bar says hello.(Foo都没有这个方法!)

Bar.prototype = Foo.prototype并不会创建一个关联到Bar.prototype的新对象,它只是让Bar.prototype直接引用Foo.prototype对象。修改Bar.prototype对象时会直接修改Foo.prototype对象本身

  • Bar.prototype = new Foo();
function Foo(value) {
    console.log("Foo's value: " + value);
}

function Bar(value) {
    Foo.call(this,value);
}

Bar.prototype = new Foo();

var a = new Bar(3); //Foo's value: 2

如果函数Foo有一些副作用(比如写日志、修改状态、注册到其它对象、给this添加数据属性等),就会影响到Bar()的后代。


ES6添加了一个辅助函数Object.setPrototypeOf(),可以用标准并且可靠的方法来修改关联。它和Object.create()的区别在于:

  • Bar.prototype = Object.create(Foo.prototype)
    该方法需要抛弃原来默认的Bar.prototype,创建一个新的对象。可读性更高,但是稍微有点性能损失(抛弃的对象需要进行GC)。
  • Object.setPrototypeOf(Bar.prototype, Foo.prototype)
    该方法可以直接修改现有的Bar.prototype对象可读性差了点,性能比上面好
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值