您的位置:首页 > Web前端 > JavaScript

js 继承 三种常用方法 原型链-借用构造函数-组合式继承

2017-08-23 15:26 567 查看
1、经典原型链方法  
function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType的属性和方法
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true
有一处弊端:如果有两个以上的实例,第一个实例向原型中添加了元素,第二个实例(不想要那个)
也会获取到添加的元素,也就是继承后,所有实例共享相同的属性。另外就是不能向构造函数传参!
SuperType和SubType区别在于是后者继承了前者!继承是通过创建前者的实例并赋给后者的prototype来实现的。
原来存在于前者的属性和方法,现在也存在于后者中。
2、借用构造函数法
function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
//使用call() 的方法来继承SuperType
SuperType.call(this);
}
var p1 = new SubType();
p1.colors.push("black");
alert(p.colors); //"red,blue,green,black"
var p2 = new SubType();
alert(p2.colors); //"red,blue,green;
此方法可以去掉第一种方法中实例共享属性的缺陷!也就是第二个实例不会受到第一个实例的影响,
各自继承各自的。在call(this,"jack",15,"clerk")时可在括号里传参!
3、组合继承法(避免了前两种方法的缺陷,融合了优点,推荐使用)

function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name)
};
function SubType(name, age){
//继承属性
SuperType.call(this, name);
this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;//通过constructor改变this指针,现在指向subtype,
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
优点:保证实现函数复用的同时,又能够使每个实例拥有各自的属性!
其中call()已经将属性和方法全部继承了下来,又使用new来继承原型上的方法,覆盖了之前继承下来的方法,即重复继承了。


                                            
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
相关文章推荐