晝貓筆記 -- 面向物件(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: '晝貓'}})
文章來自 個人公眾號 晝貓筆記