js各種方法繼承以及優(yōu)缺點(diǎn)

Cristalven 發(fā)布于2019-08-26 12:14 / 546人閱讀

摘要：的屬性是指向的，繼承的屬性在寄生式繼承創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部以某種形式來做增強(qiáng)對象，最后返回對象。缺點(diǎn)跟構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對象都會創(chuàng)建一遍方法。

前言

上文講到j(luò)s中的原型鏈，這篇文章對每種繼承方式具體分析一下

原型鏈繼承

原型鏈繼承就是將父類的實(shí)例賦給子類的原型對象,話不多說，看下代碼

function parent(name){
    this.name = "111";
}
parent.prototype.getName = function(){
    console.log(this.name)
}
function child(){}
child.prototype = new parent();
const child1 = new child()
child1.getName();//111
console.log(child.name);//111

優(yōu)點(diǎn): 可以直接繼承父類的屬性和方法,這里的屬性繼承是通過__proto__找到的，不是實(shí)例本身擁有的
缺點(diǎn): 1.不能向父類傳參 2.引用屬性會被所有實(shí)例共享

function parent(){
    this.name = ["111","2222"]
}
parent.prototype.getName = function(){
    console.log(this.name)
}
function child(){}
child.prototype = new parent();
const child1 = new child();
const child2 = new child();
child1.name.push("aaa")
console.log(child1.name,child2.name)//["111","2222","aaa"]

3.child的constructor指向parent，應(yīng)該予以修復(fù)

child.prototype.constructor = child;

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

構(gòu)造函數(shù)繼承就是在子類調(diào)用父類,看代碼

function parent(name){
    this.name = name;
}
function child(name){
   parent.call(this,name);
}
const child1 = new child("child");
console.log(child1.name)//child

優(yōu)點(diǎn):可以繼承父類的屬性(這里的屬性繼承是實(shí)例本身自己的)，可以向父類傳參，引用類型不會被所有實(shí)例共享,constructor還是指向自己child
缺點(diǎn)：不能繼承父類原型上的方法，方法都在構(gòu)造函數(shù)中定義，每次創(chuàng)建實(shí)例都會創(chuàng)建一遍方法。

function parent(name){
    this.name = name;
    this.arr = ["111"]
}
function child(name){
   parent.call(this,name);
}
const child1 = new child("child1");
const child2 = new child("child2")
child1.arr.push("222");
console.log(child1.arr,child2.arr)//(2)?["111", "222"] ["111"]

組合繼承

如果結(jié)合原型繼承和構(gòu)造函數(shù)繼承，這樣就可以結(jié)合其優(yōu)點(diǎn)，摒棄其缺點(diǎn)了，這就是組合繼承

function parent(name){
   this.name = name;
   this.arr = ["111"]
}
parent.prototype.getName = function(){
   console.log(this.name)
}
function child(name){
    parent.call(this,name)
}
child.prototype = new parent();
const child1 = new child("child1");
const child2 = new child("child2");
child1.arr.push("222");
child1.getName();//child1
console.log(child1.arr,child2.arr)//2)?["111", "222"] ["111"]

優(yōu)點(diǎn): 可以向父類傳參，可以繼承父類的屬性（子類會有從父類繼承的屬性，__proto__上基本屬性是undefined，引用屬性是有的，看下圖）和原型上的方法，引用屬性不會被共享

缺點(diǎn)：一個(gè)實(shí)例會實(shí)例化父類兩次，parent.call(this,name)調(diào)用一次，child.prototype = new parent()調(diào)用一次，constructor指向了parent

原型繼承

function create(o){
   function F(){};
   F.prototype = o;
   return new F();
}

原型繼承其實(shí)就是es5的object.create()的實(shí)現(xiàn)
看下這段代碼

const person = {
   name: "name",
   arr: ["111","222"]
}
const p1 = create(person);
const p2 = create(person);
p1.name = "p1";
p1.arr.push("aaa");
console.log(p1.name,p2.name);//p1,name
console.log(p1.arr,p2.arr);//(3)?["111", "222", "aaa"] (3)?["111", "222", "aaa"]

缺點(diǎn)：會共享引用屬性
注意:修改p1.name的值，p2.name的值并未發(fā)生改變，并不是因?yàn)閜1和p2有獨(dú)立的 name 值，而是因?yàn)閜1.name = "p1"，給person1添加了 name 值，并非修改了原型上的 name 值。p1,p2的constructor屬性是指向object的，繼承的屬性在__proto__

寄生式繼承

創(chuàng)建一個(gè)僅用于封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部以某種形式來做增強(qiáng)對象，最后返回對象。

function createObj (o) {
  var clone = object.create(o);
  clone.sayName = function () {
    console.log("hi");
  }
  return clone;
}

缺點(diǎn)：跟構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對象都會創(chuàng)建一遍方法。

寄生組合式繼承

終極繼承！！寄生組合式繼承，結(jié)合了以上的優(yōu)點(diǎn)，來看下代碼
組合繼承的缺點(diǎn)就是會調(diào)用兩次父類，如何避免調(diào)用兩次呢？能不能直接讓子類的prototype訪問到父類的prototype？當(dāng)然可以！！看下面的代碼

function parent(name){
   this.name = name;
   this.arr = ["111"]
}
parent.prototype.getName = function(){
   console.log(this.name)
}
function child(name){
    parent.call(this,name)
}
//注意!!關(guān)鍵!!
function F(){}
F.prototype = parent.prototype;
child.prototype = new F();

const c1 = new child("c1");
const c2 = new child("c2");
c1.arr.push("ccc");
c1.name = "name";
c1.getName();//name
c2.getName();//c2
console.log(c1,c2);//child?{name: "name", arr: Array(2)} child?{name: "c2", arr: Array(1)}

優(yōu)點(diǎn)：可以繼承父類的屬性和原型上的方法，實(shí)例間不會共享引用屬性，基本屬性也可以繼承變成自己的屬性，不會執(zhí)行兩遍父類

缺點(diǎn): 子類的constructor指向指向了父類,應(yīng)該修復(fù)之，可以改寫如下
可以改寫寫上面的關(guān)鍵步驟

function create(o){
   function F(){}
   F.prototype = o;
   return new F();
}
function prototype(child,parent){
   const p = create(parent.prototype);
   p.constructor = child;
   child.prototype = p;
}