在ES6之前,javascript不跟其他語言一樣,有直接繼承的方法,它需要藉助於構造函數+原型對象模擬實現繼承。現在我們可以利用ES6的extends方法實現繼承,如果想瞭解更多有關ES6實現的繼承請查看《 "ES6學習筆記(二):教你玩轉類的繼承和類的對象" 》,在這裡不再做更多的介紹。 ES6 ...
在ES6之前,javascript不跟其他語言一樣,有直接繼承的方法,它需要藉助於構造函數+原型對象模擬實現繼承。現在我們可以利用ES6的extends方法實現繼承,如果想瞭解更多有關ES6實現的繼承請查看《ES6學習筆記(二):教你玩轉類的繼承和類的對象》,在這裡不再做更多的介紹。
ES6之前並沒有給我們提供extends繼承,我們可以通過構造函數+原型對象模擬實現繼承,被稱為組合繼承。
1. call()
調用這個函數,並且修改函數運行時的this指向
fun.call(thisArg, arg1,arg2,...)
- thisArg:當前調用函數this的指向對象
- arg1, arg2:傳遞的普通參數
function fn() {
console.log('前端嵐楓')
console.log(this)
}
fn.call() //說明call()可以調用函數,this指向window
var obj = {
name: 'lanfeng
}
fn.call(obj) //this指向obj, 說明call可以改變this指向
2. 借用構造函數繼承父類型屬性
核心思想:通過call()把父類型的this指向子類型的this,這樣就可以實現子類型繼承父類型的屬性。
// 借用父構造函數繼承屬性
//父構造函數
function Father (uname, age) {
//this指向父構造函數的對象實例
this.uname = uname
this.age = age
}
// 子構造函數
function Son (uname, age){
// this指向子構造函數的對象實例
//藉助於call,this指向子構造函數對象實例
Father.call(this, uname, age)
}
var son = new Son('王俊凱',18)
console.log(son) //
3. 借用原型對象繼承父類型方法
// 父構造函數
function Father (uname, age) {
//this指向父構造函數的對象實例
this.uname = uname
this.age = age
}
// 父原型方法
Father.prototype.money = function() {
console.log(10000)
}
// 子構造函數
function Son (uname, age){
// this指向子構造函數的對象實例
//藉助於call,this指向子構造函數對象實例
Father.call(this, uname, age)
}
// Son.prototype = Father.prototype 這樣直接賦值會有問題,如果修改了子原型對象,父原型對象也會變化/
Son.prototype = new Father()
//手動改constructor指回原來的構造函數
Son.prototype.constructor = Son
Son.prototype.exam= function() {
console.log('考試')
}
var son = new Son('王俊凱',18)
console.log(son) //
son
結構關係如下圖:
總結
今天主要分享了call()方法的用法和javascript通過構造函數+原型對象模擬實現繼承的方式。
如果想瞭解更多請掃描二維碼