?

JS繼承的實(shí)現(xiàn)方式：

既然要實(shí)現(xiàn)繼承，那么首先我們得有一個(gè)父類，代碼如下：

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

1、原型鏈繼承

核心：?將父類的實(shí)例作為子類的原型

?

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');//針對父類實(shí)例值類型成員的更改，不影響console.log(tom.name); // "小黑"console.log(kissy.name); // "小白"//針對父類實(shí)例引用類型成員的更改，會通過影響其他子類實(shí)例console.log(tom.features); // ["11", "22", "33"]console.log(kissy.features); // ["11", "22", "33"] 特點(diǎn)： 1.非常純粹的繼承關(guān)系，實(shí)例是子類的實(shí)例，也是父類的實(shí)例 2.父類新增原型方法/原型屬性，子類都能訪問到 3.簡單，易于實(shí)現(xiàn) 缺點(diǎn)： 1.可以在Cat構(gòu)造函數(shù)中，為Cat實(shí)例增加實(shí)例屬性。如果要新增原型屬性和方法，則必須放在new Animal()這樣的語句之后執(zhí)行。 2.來自原型對象的所有屬性被所有實(shí)例共享（來自原型對象的引用屬性是所有實(shí)例共享的）（詳細(xì)請看附錄代碼： 示例1） 3.創(chuàng)建子類實(shí)例時(shí)，無法向父類構(gòu)造函數(shù)傳參

2、構(gòu)造繼承

核心：使用父類的構(gòu)造函數(shù)來增強(qiáng)子類實(shí)例，等于是復(fù)制父類的實(shí)例屬性給子類（沒用到原型）

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 特點(diǎn)： 1. 解決了1中，子類實(shí)例共享父類引用屬性的問題 2. 創(chuàng)建子類實(shí)例時(shí)，可以向父類傳遞參數(shù) 3. 可以實(shí)現(xiàn)多繼承（call多個(gè)父類對象） 缺點(diǎn)： 1. 實(shí)例并不是父類的實(shí)例，只是子類的實(shí)例 2. 只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性/方法 3. 無法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類實(shí)例函數(shù)的副本，影響性能

3、實(shí)例繼承

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

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 特點(diǎn)： 1.不限制調(diào)用方式，不管是new 子類()還是子類(),返回的對象具有相同的效果 缺點(diǎn)： 1.實(shí)例是父類的實(shí)例，不是子類的實(shí)例 2.不支持多繼承

4、拷貝繼承

核心：通過for循環(huán)去拷貝父類的每一個(gè)對象

//通過循環(huán)去copy父類的每一項(xiàng)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 特點(diǎn)： 1.支持多繼承 缺點(diǎn)： 1.效率較低，內(nèi)存占用高（因?yàn)橐截惛割惖膶傩?#xff09; 2.無法獲取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到）

5、組合繼承

核心：通過調(diào)用父類構(gòu)造，繼承父類的屬性并保留傳參的優(yōu)點(diǎn)，然后通過將父類實(shí)例作為子類原型，實(shí)現(xiàn)函數(shù)復(fù)用

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) {//借用構(gòu)造函數(shù):屬性值重復(fù)的問題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的方法 特點(diǎn)： 1.可以繼承實(shí)例屬性/方法，也可以繼承原型屬性/方法 2.既是子類的實(shí)例，也是父類的實(shí)例 3.不存在引用屬性共享問題 4.可傳參 5.函數(shù)可復(fù)用 缺點(diǎn)： 1.調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實(shí)例（子類實(shí)例將子類原型上的那份屏蔽了）

轉(zhuǎn)載于:https://www.cnblogs.com/wanguofeng/p/10718804.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。