javascript繼承、js繼承實現方式、js繼承優缺點

有如下父類

function People(name,age){
    this.name = name
    this.age = age
    this.seelp = function(){
        console.log('i am seelp')
    }
}
People.prototype.eat = function(){
    console.log('i can eat')
}

原型鏈繼承

原理:
子類 的 prototype = 父類 的 實例
優點:

簡單
不佔用多餘內存 父類實例化一次
原型屬性繼承

缺點:

無法對父類傳遞參數
在原型鏈上增加方法或者屬性只能在實例化父類之後
無法實現多繼承
非原型屬性繼承後無意義(undefined)

實現:

function Woman (name,age){
    this.sex = '女';
}
Woman.prototype = new People()
Woman.prototype.constructor = Woman
Woman.prototype.a = 'aaaa'
var personal = new Woman('小麗','28')
personal = {
    sex: "女",
    __proto__: {
        a: "aaaa",
        age: undefined,
        name: undefined,
        seelp: ƒ (),
        __proto__: Object
    }
}

使用構造函數

原理:
在子類構造函數中,使用call修改父類的this指向
優點:

可像父類傳遞參數
可實現多繼承
非原型屬性繼承
實現簡單
方便新增屬性

缺點:

原型屬性無法繼承
多佔用內存(每個子類的實例,都調用了父類的實例)

function Woman(name,age){
    People.call(this,name,age)
    Base.call(this,name,age)
}
var personal = new Woman('小麗','28')
personal = {
    age: "28",
    jump: true,
    name: "小麗",
    seelp: ƒ (),
    __proto__:{
        constructor: ƒ Woman(name,age)
        __proto__: Object
    }
}

組合式繼承

原理:
調用父類構造函數,繼承父類的屬性,通過將父類實例作爲子類原型,實現函數複用
優點:

可像父類傳遞參數
可實現多繼承
非原型屬性繼承
原型屬性繼承

缺點:

多佔用內存(每個子類的實例,都調用了父類的實例)

function Woman(name,age){
  People.call(this,name,age)
}
Woman.prototype = new People();
Woman.prototype.constructor = Woman;
var personal = new Woman('小劉鴨','27')
personal = {
    age: 27,
    name: "小劉鴨",
    seelp: ƒ(),
    __proto__: {
	      age: undefined,
	      constructor: Woman,
	      name: undefined,
	      seelp: ƒ(),
	      __proto__: Object
    }
}

寄生組合繼承

原理:
子類的原型不再是父類的實例,而是空類,空類的原型指向父類的原型,
優點:

可像父類傳遞參數
可實現多繼承
非原型屬性繼承
原型屬性繼承

function Woman(name,age){
  //繼承父類屬性
  People.call(this,name,age)
}
//繼承父類方法
(function(){
  // 創建空類
  let Super = function(){};
  Super.prototype = People.prototype;
  //父類的實例作爲子類的原型
  Woman.prototype = new Super();
})();
//修復構造函數指向問題
Woman.prototype.constructor = Woman;
var personal = new Woman('小劉鴨',27)
personal = {
	age: 27,
    name: "小劉鴨",
    seelp: ƒ(),
    __proto__: {
    	constructor: Woman(name, age),
        __proto__: {
        	eat: ƒ(),
          	constructor: People(name, age),
          	__proto__: Object
        }
   }
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章