您现在的位置是:首页 > web开发 > js:深入继承

js:深入继承

web开发作者:dayu日期:10天前点击:4


使用原型链继承的缺点是:
1.无法从子类中调用父类的构造函数,
2.假设父类中存在引用类型。这个引用类型会加入到子类的原型中。假设一个对象改动了这个引用,其他对象的引用同一时候改动

所以一般都不会单纯的使用原型链来实现继承。

二、基于伪造的方式
function Parent(){
this.color = ["red","blue"];
}

function Child(){
//在Child中的this应该是指向Child的对象
//在调用Parent方法的时候,并且this又指向了Child,就等于是:this.color = ["red","blue"];
//也就等于在Child中有了this.color属性,这样也就变向的完毕了继承
Parent.call(this);
//Parent(); 这样的调用方式,仅仅是完毕了函数的调用。根本无法实现继承
}
var c1 = new Child();
c1.color.push = "green";
console.log(c1.color); //red,blue,green
var c2 = new Child();
console.log(c2.color); //red,blue

//可是这依旧不太好,例如以下:
------------------------------------------------------------------------------
function Parent(name){
this.color = ["red","blue"];
this.name = name;

/*this.say = function(){
console.log(this.name);
}*/
}
Parent.prototype.say = function(){
console.log(this.name);
}

function Child(name,age){
/**
* 使用伪造的方式就能够把子类的构造函数參数传递到父类中
* 存在问题:
* 1.因为使用的伪造方式。不会完毕Child的原型指向Parent,所以对Child来说say方法不存在
* 解决方式:
* 将这种方法放到Parent中,使用this来创建
* 可是这又引起前面提到的问题:
* 每一个Child对象都会有一个say,占用空间。所以也不应单独的使用伪造的方式实现继承。
* 因此我们要使用组合的方式来解决问题
*/
this.age = age;
Parent.call(this,name);
}
var c1 = new Child("Leon",13);
var c2 = new Child("Ada",22);
console.log(c1.name+","+c1.age);
console.log(c2.name+","+c2.age);

三、基于组合的方式
组合的方式是:属性通过伪造的方式实现。方法通过原型链的方式实现。

function Parent(name){
this.color = ["red","blue"];
this.name = name;
}
Parent.prototype.ps = function(){
console.log(this.name+",["+this.color+"]");
}

function Child(name,age){
this.age = age;
Parent.call(this,name);
}
Child.prototype = new Parent();
Child.prototype.say = function(){
console.log(this.name+","+this.age+",["+this.color+"]");
}

var c1 = new Child("Leon",22);
c1.color.push("green");
c1.say(); //Leon,22,[red,blue,green]
c1.ps(); //Leon,[red,blue,green]
var c2 = new Child("Ada",23);
c2.say(); //Ada,23,[red,blue]
c2.ps(); //Ada,[red,blue]

技术分享

原创文章如转载。请注明出处,本文首发于csdn站点:http://blog.csdn.net/magneto7/article/details/25010555


js:深入继承

原文地址:http://www.cnblogs.com/mfmdaoyou/p/7232139.html


下一篇       上一篇