Function.prototype.call 實現原理

Function.prototype.call

方法說明

call() 容許爲不一樣的對象分配和調用屬於一個對象的函數/方法。
call() 提供新的 this 值給當前調用的函數/方法。你能夠使用 call 來實現繼承：寫一個方法，而後讓另一個新的對象來繼承它（而不是在新對象中再寫一次這個方法）

源碼的關鍵點在於

在傳遞進來的上下文對象中構造一個須要執行的方法，好比：
ctx = { fn: test () { console.log(this.name) } }，這樣方法內this就會指向ctx對象，就達到了在指定的上下文對象上運行不屬於它的方法

源碼

Function.prototype.myCall = function (ctx, ...args) {
  // 非嚴格模式下，ctx爲null、undefined時，默認爲全局對象
  ctx = ctx || window
  // 就單純爲了生成一個ctx對象的key，固然寫死也能夠
  const fn = Symbol()
  // 這裏的this是指調用myCall方法的函數對象，好比：test.myCall(obj, arg1, arg2)中的test函數
  ctx[fn] = this
  // 執行ctx對象裏的fn方法
  const res = ctx[fn](...args)
  // 從ctx對象上刪除fn屬性，否則會改變傳遞進來的ctx對象
  delete ctx[fn]
  // 返回函數執行的結果
  return res
}

// 示例代碼
const obj = {
  name: 'I am obj'
}
function test (arg1, arg2) {
  return `${this.name}, ${arg1} ${arg2}`
}
const res = test.myCall(obj, 'hello', 'world !!')
console.log(res)  // I am obj，hello world !!