一、概述
?JavaScript中,繼承是基于原型鏈的,本文簡單歸納幾種繼承方法。以以下Animal、Cat分別為父、子構造函數。
function Animal(物種){
this.物種=物種;
}
Animal.prototype={
run:function(){
console.log("動物跑")
}
}
function Cat(name){
this.name=name
}
Cat.prototype.say=function(){
console.log("喵");
}
二、構造函數的繼承
?如果只需要實現構造函數的繼承,可以直接在子構造函數中引用父構造函數。
function Cat(name){
Animal.call(this,"貓");
this.name=name;
}
var cat1=new Cat("小白");
console.log(cat1.物種);//"貓"
console.log(cat1.run());//error,因為未繼承Animal的prototype.
三、prototype的繼承
?實現prototype的繼承,只需要使Cat.prototype.__proto__=Animal.prototype,但是由于__proto__不被推薦,且兼容性也不行(IE11以上),我們可以使用:
-
Cat.prototype=Object.create(Animal.prototype)
Object.create()兼容IE9以上,注意此法會清空Cat.prototype,此法可與構造函數的繼承配合使用。 -
Cat.prototype=new Animal("貓")
注意,此法會使Cat.prototype中有Animal構造函數運行后的屬性、方法,屬性方法嵌套層次較深,建議使用下一種方法。
FakeAnimal=function(){};
FakeAnimal.prototype=Animal.prototype;
Cat.prototype=new FakeAnimal();
?此處以空構造函數為中介,Cat.prototype中不會有Animal構造函數運行后的屬性、方法,此法也會清空原來的Cat.prototype,此法可與構造函數的繼承配合使用。
四、總結
?JavaScript繼承當然不止這幾種方法,這里只是簡單介紹了幾種基礎方法便于自己掌握。