码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript的几种(原型)继承

时间:2017-05-19 19:31:25      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:内容   原型   logs   输出   str   cto   manually   one   prot   

定义Foo,Bar

其中,Bar继承Foo

a是Bar的实例,包含有Foo和Bar的函数和属性:

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

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

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

// here, we make a new `Bar.prototype`
// linked to `Foo.prototype`
Bar.prototype = Object.create( Foo.prototype ); //核心代码

// Beware! Now `Bar.prototype.constructor` is gone,
// and might need to be manually "fixed" if you‘re
// in the habit of relying on such properties!

Bar.prototype.myLabel = function() {
    return this.label;
};

var a = new Bar( "a", "obj a" );

a.myName(); // "a"
a.myLabel(); // "obj a"

其中核心代码为

Bar.prototype = Object.create( Foo.prototype );

我们把这行代码换为以下几种写法,仍可使输出不变,但内部实现则完全不同了。

1、Bar.prototype = Foo.prototype;

推荐指数:★

评价:执行Bar.prototype.myLabel = ...的赋值语句会直接修改Foo.prototype对象本身,还不如不要Bar只用Foo

//第1种
Bar.prototype = Foo.prototype;

a; //输出如下
Bar {name: "a", label: "obj a"}

a.__proto__; //输出如下
Object {myName: function, myLabel: function, constructor: function}

a.__proto__.__proto__; //输出如下
Object {method: function, __defineGetter__: function, __defineSetter__: function, hasOwnProperty: function, __lookupGetter__: function…}

2、Bar.prototype = new Foo();

推荐指数:★

评价:Foo函数的内容有可能产生副作用,他的操作将直接影响Bar()的后代,后果不堪设想。如下面的undefined

//第2种
Bar.prototype = new Foo();

a; //输出如下
Bar {name: "a", label: "obj a"}

a.__proto__; //输出如下
Foo {name: undefined, myLabel: function}

a.__proto__.__proto__; //输出如下
Object {myName: function, constructor: function}

3、Object.setPrototypeOf(Bar.prototype,Foo.prototype);

推荐指数:★★★★★

评价:完美,Bar的构造函数没变

Bar.prototype.constructor
function Bar(name,label) {
Foo.call( this, name );
this.label = label;
}

//第3种
Object.setPrototypeOf(Bar.prototype,Foo.prototype);

a; //输出如下
Bar {name: "a", label: "obj a"}

a.__proto__; //输出如下
Foo {myLabel: function, constructor: function}

a.__proto__.__proto__; //输出如下
Object {myName: function, constructor: function}

4、Bar.prototype = Object.create(Foo.prototype);

推荐指数:★★★★

评价: Bar.prototype本身的constructor丢失了,去原型找,导致

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

//原文
Bar.prototype = Object.create(Foo.prototype);

a; //输出如下
Bar {name: "a", label: "obj a"}

a.__proto__; //输出如下
Foo {myLabel: function}

a.__proto__.__proto__; //输出如下
Object {myName: function, constructor: function}

 

JavaScript的几种(原型)继承

标签:内容   原型   logs   输出   str   cto   manually   one   prot   

原文地址:http://www.cnblogs.com/miaodi/p/6879807.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!