溫馨提示：想要更好的理解JS繼承方式，須了解構(gòu)造函數(shù)、原型對(duì)象、實(shí)例化對(duì)象、原型鏈等概念

第一種：原型鏈繼承

利用原型鏈的特點(diǎn)進(jìn)行繼承

function Parent(){
  this.name = 'web前端';
  this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
  console.log(this.name);
}
function Son(){};
Son.prototype = new Parent();
son1 = new Son();
son1.Say();

以上例子解釋：

①創(chuàng)建一個(gè)叫做Parent的構(gòu)造函數(shù)，暫且稱為父構(gòu)造函數(shù)，里面有兩個(gè)屬性name、type
②通過(guò)Parent構(gòu)造函數(shù)的屬性(即原型對(duì)象)設(shè)置Say方法，此時(shí)，Parent有2個(gè)屬性和1個(gè)方法
③創(chuàng)建一個(gè)叫做Son的構(gòu)造函數(shù)，暫且稱為子構(gòu)造函數(shù)
④設(shè)置Son的屬性(即原型對(duì)象)值為父構(gòu)造函數(shù)Parent的實(shí)例對(duì)象，即子構(gòu)造函數(shù)Son繼承了父構(gòu)造函數(shù)Parent，此時(shí)Son也有2個(gè)屬性和1個(gè)方法
⑤對(duì)Son構(gòu)造函數(shù)進(jìn)行實(shí)例化，結(jié)果賦值給變量son1，即son1為實(shí)例化對(duì)象，同樣擁有2個(gè)屬性和1個(gè)方法
⑥輸出son1的Say方法，結(jié)果為"web前端"

優(yōu)點(diǎn)：可以實(shí)現(xiàn)繼承

缺點(diǎn)：
①因?yàn)镾on.prototype(即原型對(duì)象)繼承了Parent實(shí)例化對(duì)象，這就導(dǎo)致了所有Son實(shí)例化對(duì)象都一樣，都共享有原型對(duì)象的屬性及方法。代碼如下：

son1 = new Son();
son2 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','VUE']

結(jié)果son1、son2都是['JS','HTML','CSS','VUE']
②Son構(gòu)造函數(shù)實(shí)例化對(duì)象無(wú)法進(jìn)行參數(shù)的傳遞

第二種：構(gòu)造函數(shù)繼承

通過(guò)構(gòu)造函數(shù)call方法進(jìn)行繼承，直接來(lái)看代碼：

function Parent(){
  this.name = 'web前端';
  this.type = ['JS','HTML','CSS'];
}
function Son(){
  Parent.call(this);
}
son1 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
son2 = new Son();
console.log(son2.type);//['JS','HTML','CSS']

以上例子解釋：
①創(chuàng)建父級(jí)構(gòu)造函數(shù)Parent，有name、type兩個(gè)屬性
②創(chuàng)建子級(jí)構(gòu)造函數(shù)Son，函數(shù)內(nèi)部通過(guò)call方法調(diào)用父級(jí)構(gòu)造函數(shù)Parent，實(shí)現(xiàn)繼承
③分別創(chuàng)建構(gòu)造函數(shù)Son的兩個(gè)實(shí)例化對(duì)象son1、son2，對(duì)son1的type屬性新增元素，son2沒(méi)有新增，結(jié)果不一樣，說(shuō)明實(shí)現(xiàn)了獨(dú)立

優(yōu)點(diǎn)：
①實(shí)現(xiàn)實(shí)例化對(duì)象的獨(dú)立性；
②還可以給實(shí)例化對(duì)象添加參數(shù)

function Parent(name){
  this.name = name;
}
function Son(name){
  Parent.call(this,name);
}
son1 = new Son('JS');
console.log(son1);//JS
son2 = new Son('HTML');
console.log(son2);//HTML

缺點(diǎn)：
①方法都在構(gòu)造函數(shù)中定義，每次實(shí)例化對(duì)象都得創(chuàng)建一遍方法，基本無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用
②call方法僅僅調(diào)用了父級(jí)構(gòu)造函數(shù)的屬性及方法，沒(méi)有辦法調(diào)用父級(jí)構(gòu)造函數(shù)原型對(duì)象的方法

第三種：組合繼承

利用原型鏈繼承和構(gòu)造函數(shù)繼承的各自優(yōu)勢(shì)進(jìn)行組合使用，還是看代碼：

function Parent(name){
  this.name = name;
  this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
  console.log(this.name);
}
function Son(name){
  Parent.call(this,name);
}
Son.prototype = new Parent();
son1 = new Son('張三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//張三
son2.Say();//李四

以上例子解釋：
①創(chuàng)建一個(gè)叫做Parent的構(gòu)造函數(shù)，里面有兩個(gè)屬性name、type
②通過(guò)Parent構(gòu)造函數(shù)的屬性(即原型對(duì)象)設(shè)置Say方法，此時(shí)，Parent有2個(gè)屬性和1個(gè)方法
③創(chuàng)建子級(jí)構(gòu)造函數(shù)Son，函數(shù)內(nèi)部通過(guò)call方法調(diào)用父級(jí)構(gòu)造函數(shù)Parent，實(shí)現(xiàn)繼承
④子構(gòu)造函數(shù)Son繼承了父構(gòu)造函數(shù)Parent，此時(shí)Son也有2個(gè)屬性和1個(gè)方法
⑤分別創(chuàng)建構(gòu)造函數(shù)Son的兩個(gè)實(shí)例化對(duì)象son1、son2，傳不同參數(shù)、給type屬性新增不同元素、調(diào)用原型對(duì)象Say方法

優(yōu)點(diǎn)：
①利用原型鏈繼承，實(shí)現(xiàn)原型對(duì)象方法的繼承
②利用構(gòu)造函數(shù)繼承，實(shí)現(xiàn)屬性的繼承，而且可以參數(shù)
組合函數(shù)基本滿足了JS的繼承，比較常用

缺點(diǎn)：
無(wú)論什么情況下，都會(huì)調(diào)用兩次父級(jí)構(gòu)造函數(shù)：一次是在創(chuàng)建子級(jí)原型的時(shí)候，另一次是在子級(jí)構(gòu)造函數(shù)內(nèi)部

第四種：原型式繼承

創(chuàng)建一個(gè)函數(shù)，將參數(shù)作為一個(gè)對(duì)象的原型對(duì)象

function fun(obj) {
  function Son(){};
  Son.prototype = obj;
  return new Son();
}    
var parent = {
  name:'張三'
}
var son1 = fun(parent);
var son2 = fun(parent);
console.log(son1.name);//張三
console.log(son2.name);//張三

以上例子解釋：
①創(chuàng)建一個(gè)函數(shù)fun，內(nèi)部定義一個(gè)構(gòu)造函數(shù)Son
②將Son的原型對(duì)象設(shè)置為參數(shù)，參數(shù)是一個(gè)對(duì)象，完成繼承
③將Son實(shí)例化后返回，即返回的是一個(gè)實(shí)例化對(duì)象
優(yōu)缺點(diǎn)：跟原型鏈類似

第五種：寄生繼承

在原型式繼承的基礎(chǔ)上，在函數(shù)內(nèi)部豐富對(duì)象

function fun(obj) {
  function Son() { };
  Son.prototype = obj;
  return new Son();
}
function JiSheng(obj) {
  var clone = fun(obj);
  clone.Say = function () {
    console.log('我是新增的方法');
  }
  return clone;
}
var parent = {
  name: '張三'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

以上例子解釋：
①再原型式繼承的基礎(chǔ)上，封裝一個(gè)JiSheng函數(shù)
②將fun函數(shù)返回的對(duì)象進(jìn)行增強(qiáng)，新增Say方法，最后返回
③調(diào)用JiSheng函數(shù)兩次，分別賦值給變量parent1、parent2
④對(duì)比parent1、parent2，結(jié)果為false，實(shí)現(xiàn)獨(dú)立
優(yōu)缺點(diǎn)：跟構(gòu)造函數(shù)繼承類似，調(diào)用一次函數(shù)就得創(chuàng)建一遍方法，無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用，效率較低

這里補(bǔ)充一個(gè)知識(shí)點(diǎn)，ES5有一個(gè)新的方法Object.create()，這個(gè)方法相當(dāng)于封裝了原型式繼承。這個(gè)方法可以接收兩個(gè)參數(shù)：第一個(gè)是新對(duì)象的原型對(duì)象（可選的），第二個(gè)是新對(duì)象新增屬性，所以上面代碼還可以這樣：

function JiSheng(obj) {
  var clone = Object.create(obj);
  clone.Say = function () {
    console.log('我是新增的方法');
  }
  return clone;
}
var parent = {
  name: '張三'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

第六種：寄生組合繼承

利用組合繼承和寄生繼承各自優(yōu)勢(shì)
組合繼承方法我們已經(jīng)說(shuō)了，它的缺點(diǎn)是兩次調(diào)用父級(jí)構(gòu)造函數(shù)，一次是在創(chuàng)建子級(jí)原型的時(shí)候，另一次是在子級(jí)構(gòu)造函數(shù)內(nèi)部，那么我們只需要優(yōu)化這個(gè)問(wèn)題就行了，即減少一次調(diào)用父級(jí)構(gòu)造函數(shù)，正好利用寄生繼承的特性，繼承父級(jí)構(gòu)造函數(shù)的原型來(lái)創(chuàng)建子級(jí)原型。

function JiSheng(son,parent) {
  var clone = Object.create(parent.prototype);//創(chuàng)建對(duì)象
  son.prototype = clone;   //指定對(duì)象
  clone.constructor = son;   //增強(qiáng)對(duì)象
}
function Parent(name){
  this.name = name;
  this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
  console.log(this.name);
}
function Son(name){
  Parent.call(this,name);
}
JiSheng(Son,Parent);
son1 = new Son('張三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//張三
son2.Say();//李四

以上例子解釋：
①封裝一個(gè)函數(shù)JiSheng，兩個(gè)參數(shù)，參數(shù)1為子級(jí)構(gòu)造函數(shù)，參數(shù)2為父級(jí)構(gòu)造函數(shù)
②利用Object.create()，將父級(jí)構(gòu)造函數(shù)原型克隆為副本clone
③將該副本作為子級(jí)構(gòu)造函數(shù)的原型
④給該副本添加constructor屬性，因?yàn)棰壑行薷脑蛯?dǎo)致副本失去默認(rèn)的屬性

優(yōu)缺點(diǎn)：
組合繼承優(yōu)點(diǎn)、寄生繼承的有點(diǎn)，目前JS繼承中使用的都是這個(gè)繼承方法

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論