?

JS繼承的實現方式：

既然要實現繼承，那么首先我們得有一個父類，代碼如下：

function Animal(name) {// 屬性this.name = name || '小白';// 實例方法this.sleep = function () {console.log(this.name + '正在睡懶覺！');}//實例引用屬性this.features = ['11', '22'];}// 原型方法Animal.prototype.eat = function (food) {console.log(this.name + '正在吃：' + food);};

1、原型鏈繼承

核心：?將父類的實例作為子類的原型

?

function Cat(name) {}//把Cat的原型指向AnimalCat.prototype = new Animal();var tom = new Cat('Tom');var kissy = new Cat('Kissy');console.log(tom.name); // "小白"console.log(kissy.name); // "小白"console.log(tom.features); // ["11", "22"]console.log(kissy.features); // ["11", "22"] tom.name = '小黑';tom.features.push('33');//針對父類實例值類型成員的更改，不影響console.log(tom.name); // "小黑"console.log(kissy.name); // "小白"//針對父類實例引用類型成員的更改，會通過影響其他子類實例console.log(tom.features); // ["11", "22", "33"]console.log(kissy.features); // ["11", "22", "33"] 特點： 1.非常純粹的繼承關系，實例是子類的實例，也是父類的實例 2.父類新增原型方法/原型屬性，子類都能訪問到 3.簡單，易于實現 缺點： 1.可以在Cat構造函數中，為Cat實例增加實例屬性。如果要新增原型屬性和方法，則必須放在new Animal()這樣的語句之后執行。 2.來自原型對象的所有屬性被所有實例共享（來自原型對象的引用屬性是所有實例共享的）（詳細請看附錄代碼： 示例1） 3.創建子類實例時，無法向父類構造函數傳參

2、構造繼承

核心：使用父類的構造函數來增強子類實例，等于是復制父類的實例屬性給子類（沒用到原型）

function Cat(name) {Animal.call(this);this.name = name || '小黑';}var cat = new Cat();var animl = new Animal();console.log(cat.name);//小黑cat.sleep();//小黑正在睡懶覺console.log(animl.name);//小白animl.name = '大黃';console.log(animl.name);//大黃cat.sleep();//小黑正在睡懶覺！console.log(cat.name);//小黑console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true 特點： 1. 解決了1中，子類實例共享父類引用屬性的問題 2. 創建子類實例時，可以向父類傳遞參數 3. 可以實現多繼承（call多個父類對象） 缺點： 1. 實例并不是父類的實例，只是子類的實例 2. 只能繼承父類的實例屬性和方法，不能繼承原型屬性/方法 3. 無法實現函數復用，每個子類都有父類實例函數的副本，影響性能

3、實例繼承

核心：為父類實例添加新特性，作為子類實例返回

function Cat(name) {var instance = new Animal();instance.name = name || '小黑';return instance;}var cat = new Cat();console.log(cat.name);//小黑cat.sleep();//小黑正在睡懶覺！cat.features.push('33')console.log(cat.features);//["11", "22", "33"]console.log(cat instanceof Animal); // trueconsole.log(cat instanceof Cat); // false 特點： 1.不限制調用方式，不管是new 子類()還是子類(),返回的對象具有相同的效果 缺點： 1.實例是父類的實例，不是子類的實例 2.不支持多繼承

4、拷貝繼承

核心：通過for循環去拷貝父類的每一個對象

//通過循環去copy父類的每一項function Cat(name) {var animal = new Animal();for (var p in animal) {Cat.prototype[p] = animal[p];}Cat.prototype.name = name || '小黑';}var cat = new Cat();console.log(cat.name);//小黑cat.sleep();//小黑正在睡懶覺！console.log(cat instanceof Animal); // falseconsole.log(cat instanceof Cat); // true 特點： 1.支持多繼承 缺點： 1.效率較低，內存占用高（因為要拷貝父類的屬性） 2.無法獲取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到）

5、組合繼承

核心：通過調用父類構造，繼承父類的屬性并保留傳參的優點，然后通過將父類實例作為子類原型，實現函數復用

function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;}Person.prototype.sayHi = function () {console.log("我是Person的方法");};function Student(name, age, sex, score) {//借用構造函數:屬性值重復的問題Person.call(this, name, age, sex);this.score = score;}//改變原型指向----繼承Student.prototype = new Person(); //不傳值//把原型的指向改回原來Student.prototype.constructor = Student;Student.prototype.eat = function () {console.log("我是Student的方法");};var stu = new Student("小黑", 20, "男", "100分");console.log(stu.name, stu.age, stu.sex, stu.score);//小黑 20 男 100分stu.sayHi();//我是Person的方法stu.eat();//我是Student的方法 特點： 1.可以繼承實例屬性/方法，也可以繼承原型屬性/方法 2.既是子類的實例，也是父類的實例 3.不存在引用屬性共享問題 4.可傳參 5.函數可復用 缺點： 1.調用了兩次父類構造函數，生成了兩份實例（子類實例將子類原型上的那份屏蔽了）

轉載于:https://www.cnblogs.com/wanguofeng/p/10718804.html

總結

以上是生活随笔為你收集整理的js 继承的几种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。