本文實例講述了JS實現繼承的幾種常用方式。分享給大家供大家參考，具體如下：
1，原型鏈繼承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原型鏈繼承</title></head><body><script> /** * 優點： * 實例是父類的實例也是子類的實例 * 父類新增原型方法或者原型屬性 子類都能訪問到 * 簡單 易于實現 * 缺點： * 無法實現多繼承 * 來自原型對象的引用屬性和實例是所有子類共享的 * 創建子類實例的時候，無法向父構造函數傳參 * 可以在Cat構造函數中，為Cat實例增加實例屬性。如果要新增原型屬性和方法，則必須放在new Animal()這樣的語句之后執行。 * **/ function Animal(name) { this.name=name;//屬性 this.sleep=function () {//實例方法 console.log(this.name+'正在睡覺') } } //原型方法 Animal.prototype.eat=function (food) { console.log(this.name+'正在吃'+food) }; //原型鏈繼承---核心：將父類的實例作為子類的原型 function Cat() { } Cat.prototype=new Animal(); Cat.prototype.name='cat'; var cat=new Cat(); console.log(cat);//cat._proto_====>Animal 可以使用Animal里面的name屬性 sleep方法 // 也可以使用 cat._proto_._proto_的eat方法 即animal的原型方法 // cat._proto_._proto_._proto_ 是object console.log(cat.name); cat.eat('fish'); cat.sleep();</script></body></html>運行結果：
2，構造繼承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>構造繼承</title></head><body><script> /** *構造繼承 相當于復制父類的實例給子類 （沒有用到原型） * 只能使用父類的屬性和方法 不能繼承原型屬性和方法 所以cat不能使用eat方法 * **/ function Animal(name) { this.name=name;//屬性 this.sleep=function () {//實例方法 console.log(this.name + '正在睡覺！'); } } // 原型方法 Animal.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food); }; function Cat(name) { Animal.call(this,name);//Cat就可以使用Animal的// this.name=name } var cat=new Cat('Tom'); console.log(cat);//只能使用Animal的屬性和實例方法 不能使用原型的方法 //cat的_proto_（指向的是一個函數） 是cat 構造器是Cat cat的_proto_._proto_ 是object console.log(cat.name);// cat.eat('fish'); cat.sleep()</script></body></html>運行結果：
3，組合繼承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>組合繼承</title></head><body><script> function Animal(name) { this.name=name; this.sleep=function () { console.log(this.name+"正在睡覺"); }; } Animal.prototype.eat=function (food) { console.log(this.name+"正在吃"+food); } function Cat(name) { Animal.call(this,name) } Cat.prototype=new Animal();// 組合繼承也是需要修復構造函數指向的。 Cat.prototype.constructor=Cat;//構造器進行修改 Cat.prototype.show=function () {//可以在子類的原型上加方法 不影響父類 console.log("11111") }; var cat=new Cat('Tom'); console.log(cat);//cat可以直接使用animal的屬性和實例方法 //cat.proto是Animal cat.proto_._proto_ 是eat cat.proto_._proto_._proto_是object console.log(cat.name); cat.sleep(); cat.eat('fish') cat.show()</script></body></html>運行結果：
4，寄生組合繼承
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>寄生組合繼承</title></head><body><script> function Animal(name) { this.name=name; this.sleep=function () { console.log(this.name+"正在睡覺"); } } // 原型方法 Animal.prototype.eat = function(food) { console.log(this.name + '正在吃：' + food); }; function Cat(name) { Animal.call(this,name); }// (function () { //創建一個沒有實例方法的類 var Super=function () { }; Super.prototype=Animal.prototype;//eat console.log(Animal.prototype);//構造方法還是Animal 可以使用eat方法 eat的_proto_ 是object //初始化這個實例 把它作為子類（Cat）的原型 Cat.prototype=new Super();//一般 的話是new Animal（） Cat.prototype.constructor=Cat;//Cat的構造器還是Cat// })(); var cat=new Cat('Tom'); console.log(cat.name); cat.sleep(); cat.eat('food')</script></body></html>
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
