快捷導(dǎo)航

JavaScript中的幾種繼承方法示例

更新時(shí)間：2020年12月06日 11:15:35 作者：z0aiyx

這篇文章主要給大家介紹了關(guān)于JavaScript中的幾種繼承方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

1.原型鏈繼承

原理: 子類(lèi)原型指向父類(lèi)實(shí)例對(duì)象實(shí)現(xiàn)原型共享,即Son.prototype = new Father()。

這里先簡(jiǎn)單介紹下原型

js中每個(gè)對(duì)象都有一個(gè)__proto__屬性，這個(gè)屬性指向的就是該對(duì)象的原型。js中每個(gè)函數(shù)都有一個(gè)prototype屬性，這個(gè)屬性指向該函數(shù)作為構(gòu)造函數(shù)調(diào)用時(shí)創(chuàng)建的實(shí)例的原型。原型對(duì)象上有一個(gè)constructor屬性，指向創(chuàng)建該對(duì)象的構(gòu)造函數(shù)，該屬性不可枚舉。

var obj = {};
obj.__proto__ === Object.prototype; //true
console.log(Object.prototype.constructor) // ƒ Object

當(dāng)我們?cè)L問(wèn)一個(gè)對(duì)象的屬性或者方法時(shí)，如果找不到，則會(huì)通過(guò)原型向上尋找，若原型上也未找到，則會(huì)去原型的原型上面去找。比如我要調(diào)用obj.toString方法時(shí)，在自身并未找到toString方法，則會(huì)去原型上去尋找，即在Object.prototype上去尋找，找到后運(yùn)行該方法。

var obj = {};
obj.toString();
obj.__proto__.toString(); //obj.__proto__和Object.prototype指向的是一個(gè)對(duì)象，自然就能訪問(wèn)Object.prototype上的toString方法啦

注意：原型鏈的終點(diǎn)是null，使用bind方法返回的函數(shù)沒(méi)有prototype屬性。

var obj = {};
function fn(){};
fn.bind(obj).prototype; // undefined
Object.prototype.__proto__; // null

原型鏈接繼承

function Father(age){
 this.age = age;
 this.color = ['red','pink']
}
Father.prototype.sayHello = function(){
 console.log('hello')
} 
function Son(sex){
 this.sex = sex
}
console.log(Son.prototype.constructor) // ƒ Son
Son.prototype = new Father(15) // 原型鏈繼承關(guān)鍵
var son = new Son('男')
son.color.push('black')
var son2 = new Son('女')
son.sayHello() // hello
son.sayHello === son2.sayHello //true
console.log(son2.color) // ['red','pink','black']
console.log(Son.prototype.constructor) // ƒ Father

可以看到通過(guò)原型鏈實(shí)現(xiàn)繼承，原型上引用類(lèi)型的值會(huì)被所有實(shí)例共享。子類(lèi)的constructor指向會(huì)發(fā)生改變，而且在創(chuàng)建子類(lèi)實(shí)例時(shí)不可以向父類(lèi)構(gòu)造函數(shù)傳遞參數(shù)。可以手動(dòng)把子類(lèi)constructor屬性指回其構(gòu)造函數(shù)。

//寫(xiě)法一
Son.prototype.constructor = Son // 這種寫(xiě)法有點(diǎn)缺點(diǎn)，它會(huì)讓constructor屬性變的可以枚舉。

//寫(xiě)法二
Object.defineProperty(Son.prototype,'constructor',{
 enumerable:false, // 設(shè)置不可枚舉
 value:Son
})

2.構(gòu)造函數(shù)繼承

原理：在子類(lèi)構(gòu)造函數(shù)中通過(guò)apply或者call調(diào)用父類(lèi)構(gòu)造函數(shù)來(lái)繼承屬性或方法。

function Father(name){
 this.color = ['red']
 this.sayHello = function(){
  console.log('hello')
 }
}
Father.prototype.sayName = function(){
 console.log('zs')
}
function Son(num,name){
 Father.call(this,name) //實(shí)現(xiàn)繼承的關(guān)鍵代碼
 this.num = num
}
var son = new Son(10,'zs')
var son2 = new Son(15,'ls')
son.color.push('pink')
console.log(son2.color) // ['red']
son.sayName() //報(bào)錯(cuò) son.sayName is not a function
console.log(son.sayHello === son2.sayHello) //false

可以看出通過(guò)構(gòu)造函數(shù)實(shí)現(xiàn)繼承，解決了原型鏈繼承不能向父類(lèi)傳參以及引用類(lèi)型值共享的問(wèn)題。但這種繼承方法卻不能訪問(wèn)父類(lèi)構(gòu)造函數(shù)原型上的方法和屬性，而且定義在父類(lèi)構(gòu)造函數(shù)中的方法也不能復(fù)用。

3.組合式繼承

組合繼承，有時(shí)候也叫偽經(jīng)典繼承，它是將原型鏈繼承和構(gòu)造函數(shù)繼承結(jié)合到一起的一種繼承模式。實(shí)現(xiàn)思路是通過(guò)原型鏈實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，通過(guò)借用構(gòu)造函數(shù)實(shí)現(xiàn)對(duì)實(shí)例屬性的繼承。

function Father(name){
 this.color = ['red']
}
Father.prototype.sayName = function(){
 console.log('zs')
}
function Son(num,name){
 Father.call(this,name) //繼承實(shí)例屬性
 this.num = num
}
Son.prototype = new Father() //繼承原型上屬性
Son.prototype.constructor = Son
var son = new Son(10,'zs')
var son2 = new Son(15,'ls')
son.color.push('pink')
console.log(son.color,son2.color) //['red','pink'] ['red']
son.sayName() // zs

組合式繼承避免了原型鏈繼承和構(gòu)造函數(shù)繼承的缺點(diǎn)，融合了它們的優(yōu)點(diǎn)，成為JavaScript中常用的一種繼承模式。

4.寄生式繼承

寄生式繼承與工廠模式類(lèi)似，一般用來(lái)繼承對(duì)象。即創(chuàng)建一個(gè)封裝繼承的函數(shù)，在函數(shù)內(nèi)部復(fù)制一份該對(duì)象，對(duì)復(fù)制的對(duì)象進(jìn)行處理，返回復(fù)制的對(duì)象。

function createAnother(obj){
  var clone = Object.create(obj)
  clone.name = 'zs'
  clone.sayHello = function(){
   console.log('hello')
  }
  return clone
}
var obj = {age:15}
var newObj = createAnother(obj) // 15
console.log(newObj.name) // zs
newObj.sayHello() // hello

5.寄生組合式繼承

前面說(shuō)到過(guò)組合式繼承是Javascript中最常用的繼承模式，不過(guò)這種模式也有自己的不足，它會(huì)調(diào)用兩次父類(lèi)構(gòu)造函數(shù)。第一次是在將子類(lèi)原型指向父類(lèi)實(shí)例的時(shí)候,第二次是在子類(lèi)構(gòu)造函數(shù)中調(diào)用的。

function Father(name){
  this.name = name
 }
 function Son(num,name){
  Father.call(this,name) // 第二次調(diào)用
 }
 Son.prototype = new Father('ls') // 第一次調(diào)用
 var son = new Son(10,'zs')
 console.log(son)

在第一次調(diào)用的時(shí)候，Son.prototype會(huì)繼承name這個(gè)屬性，第二次調(diào)用時(shí)，實(shí)例對(duì)象會(huì)繼承name。當(dāng)我們獲取實(shí)例對(duì)象的name屬性時(shí)因?yàn)閷?shí)例對(duì)象上有該屬性，所以是不會(huì)去原型上去尋找的，相當(dāng)于實(shí)例對(duì)象上的name屬性把原型上的name屬性給屏蔽掉了，所以原型上的這個(gè)屬性是多余的。

為了解決這個(gè)問(wèn)題，就有了寄生組合式繼承。主要思路就是創(chuàng)建一個(gè)函數(shù)完成原型鏈繼承和constructor的指向問(wèn)題，然后通過(guò)構(gòu)造函數(shù)繼承屬性。

 // 復(fù)制一個(gè)父類(lèi)的原型指向，將子類(lèi)的原型指向復(fù)制的父類(lèi)原型，達(dá)到不用調(diào)用父類(lèi)構(gòu)造函數(shù)就能繼承其原型上的方法的效果。
 function inherit(Sup,Sub){
  var prototype = Object.create(Sup.prototype)
  Sub.prototype = prototype
  prototype.constructor = Sub
 }
 function Father(name){
  this.name = name
 }
 function Son(name){
 Father.call(this,name)
 }
 inherit(Father,Son)
 var son = new Son('zs')
 console.log(son)