晝貓筆記 -- 面向物件(II) - 繼承
阿新 • • 發佈：2019-01-14
繼承
由於js不像java那樣是真正面向物件的語言，js是基於物件的，它沒有類的概念。
所以，要想實現繼承，可以用js的原型prototype機制或者用apply和call方法去實現，還有就是js可以通過建構函式和原型的方式模擬實現類的功能。
另外，js類式繼承的實現也是依靠原型鏈來實現的。
繼承方法
call繼承：子類繼承父類，將父類的私有屬性繼承為子類的私有屬性
function Xx() { this.name = '小欣欣' }; Xx.prototype.age = 18; function Zm() { this.name = '晝貓' Xx.call(this) }; Zm.prototype.age = 13; var xx = new Xx; var zm = new Zm; console.log(zm.name); // 小欣欣
- 原型繼承 將父類的私有和共有屬性都繼承為子類的共有屬性
function Xx() { this.name = '小欣欣' }; Xx.prototype.age = 18; function Zm() { this.name = '晝貓' }; Zm.prototype.age = 13; // 父類的例項賦值給子類的原型 Zm.prototype = newXx var xx = new Xx; var zm = new Zm; console.log(zm);
- 冒充物件繼承：將父類私有的和共有的都繼承為子類私有的
function Xx() { this.name = '欣欣' } Xx.prototype.age = 18 function Zm() { this.name = '晝貓' var temp = new Xx for (var key in temp) { this[key] = temp[key] } temp= null; } Zm.prototype.age = 13; var xx = new Xx; var zm = new Zm; console.log(zm.name, zm.age); // 欣欣 18 console.log(zm.__proto__.age); //13
- 混合繼承：私有的繼承為私有的，共有的和私有的再次繼承為私有的
混合繼承是
call和原型繼承的結合
私有的被繼承了兩次
function Xx() { this.name = '欣欣' this.age = '欣欣私有' } Xx.prototype.age = 18 function Zm() { this.name = '晝貓' this.age = '晝貓私有' Xx.call(this) } Zm.prototype.age = new Xx; var xx = new Xx; var zm = new Zm; console.log(zm.name, zm.age); // 欣欣 欣欣私有
- 組合繼承：私有的繼承為私有的，共有的繼承為共有的
function Xx() { this.name = '欣欣' this.age = '欣欣私有：10' } Xx.prototype.age = 18 function Zm() { this.name = '晝貓' this.age = '晝貓私有:10' Xx.call(this) } // Zm.prototype.age = 13; Zm.prototype = Object.create(Xx.prototype) var xx = new Xx; var zm = new Zm; console.log(zm.name, zm.age); // 欣欣 欣欣私有：10 console.log(zm.__proto__.age); // 18
- 中間類繼承
function fn() { console.log(arguments); arguments.__proto__ = Array.prototype arguments.shift() } fn(1, 2, 3)
arguments不是一個數組，沒有Array的自帶的方法，可以通過這種方法，將arguments的原型執行Array內建類的原型
克隆
var obj = { name: '小欣欣', age: 16 }
注意：這種方式不是克隆只是把obj的記憶體地址 簡單的賦值(記憶體地址)
for in 克隆
注意：不管是共有的還是私有的都將克隆為私有的
var obj = { name: '晝貓', age: '12' } var obj2 = {} for (const key in obj) { obj2[key] = obj[key] } console.log(obj2); //{name: '晝貓', age: '12'}
Object.create() JS提供的一種克隆方式，將obj的所有屬性克隆到obj2的原型上
var obj = { name: '小欣欣', age: 16 } var obj2 = Object.create(obj)
如果需要新增私有的屬性，需要在第二個引數新增 value 值（否則會報錯，’不是一個物件‘）
var obj = { name: '小欣欣', age: 16 } var obj2 = Object.create(obj, {name: {value: '晝貓'}})
文章來自 個人公眾號 晝貓筆記