js 继承 三种常用方法 原型链-借用构造函数-组合式继承
程序员文章站
2022-07-15 21:54:58
...
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来继承原型上的方法,覆盖了之前继承下来的方法,即重复继承了。推荐阅读
-
JS:构造函数继承原型链
-
js 继承 三种常用方法 原型链-借用构造函数-组合式继承
-
js继承、构造函数继承、原型链继承、组合继承、组合继承优化、寄生组合继承
-
JS:构造函数继承原型链
-
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)_javascript技巧
-
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)_javascript技巧
-
JavaScript继承之原型链和借用构造函数用法实例详解
-
对于JS继承详细介绍( 原型链,构造函数,组合,原型式,寄生式,寄生组合,Class extends)
-
JavaScript继承之原型链和借用构造函数用法实例详解
-
对于JS继承详细介绍( 原型链,构造函数,组合,原型式,寄生式,寄生组合,Class extends)