欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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来继承原型上的方法,覆盖了之前继承下来的方法,即重复继承了。