JS面試中你不知道的call apply bind方法及使用場景詳解

2023-02-08 22:01:28

面試

面試官：說一下 call apply bind 的三者區別吧？

我：啊.....這。

三者區別

call

我們先來看看 call call 函數接收兩個引數

@params1 需要指向this

@params2 需要攜帶的引數

就拿這段程式碼來說我呼叫 foo 函數的時候想去執行obj 中的 eat函數怎麼辦?

預設我的 foo 裡面什麼頁面有怎麼可能會列印吃飯呢？this預設指向 window ，window 物件中沒有 eat 方法不應該報錯 not defind 嗎？

let obj = {
  eat: function (args) {
    console.log("吃飯", args);
  }
}
function foo(...args) {
  this.eat(args)
}

你可以這樣，此時呼叫的時候 foo 的函數 this 就指向了 obj 但是隻是這一次呼叫哦，下次 this 是指向 window 的

console.log(foo.call(obj, 123, 456)); / / 吃飯 [ 123, 456 ]

呼叫結果 ：傳入 this 和引數立即執行函數

apply.

@params1 需要指向this

@params2 需要攜帶的引數傳入的引數資料型別為 Array

let obj = {
  eat: function (args) {
    console.log("吃飯", args);
  }
}
function foo(...args) {
  this.eat(args)
}

console.log(foo.apply(obj, [1, 2, 3])); // 吃飯 [1，2，3 ]

呼叫結果 ：傳入 this 和引數，立即執行

bind

@params1 需要指向this

@params2 需要攜帶的引數

let obj = {
  eat: function (args) {
    console.log("吃飯", args);
  }
}
function foo(...args) {
  this.eat(args)
}

console.log(foo.bind(obj, 1, 2, 3)()); //吃飯 [ 1, 2, 3 ]

呼叫結果：傳入 this 和引數返回一個新的函數，不會立即執行

總結

call 函數傳入繫結 this的物件，攜第二個引數以參數列形式傳入並會立即執行

apply 函數傳入繫結 this的物件第二個引數以陣列的形式傳入並會立即執行

bind 函數傳入繫結 this的物件第二個引數以陣列或參數列的形式傳入不會立即執行函數會返回一個新的函數自由呼叫

應用場景

利用call 實現建構函式原型繼承

function Person(name, age, friends) {
  this.friends = friends
  this.name = name
  this.age = age
}
Person.prototype.eat = function () {
  console.log(`${this.name}在吃飯`);
}
Person.prototype.running = function () {
  console.log(`${this.name}去跑步了`);
}
function Student(study, name, age, friedns) {
  Person.call(this, name, age, friedns)
  this.study = study
}
function Teacher(plaseLoveStudent) {
  this.plaseLoveStudent = plaseLoveStudent
}
//繼承 person 
Student.prototype = new Person()
const stu = new Student('語文', "張三", 18, ['王安石'])
const stu2 = new Student('數學', "李四", 18, ['哈利波特'])
const tec = new Teacher("王安怡")
console.log(stu === stu2);
console.log(stu);
console.log(stu.friends);
console.log(stu2.friends);

簡單實現

call

實現思路：

1:在Function 原型身上新增一個方法。

2：mycall 接受兩個引數一個是繫結的 this，還有就是參數列

3：儲存呼叫者，其實這裡更嚴謹一點還需要判斷呼叫者的型別

4：判斷傳入的thisArgs 是不是 undefined 或者 null 如果是則 this指向 window 否則將繫結的 this封裝成一個物件

5：然後將函數本身儲存在上面封裝好的物件中

6：呼叫並傳入args

7：完成實現 this指向的改變

Function.prototype.mycall = function (thisArgs, ...args) {
  /**
   * 
   * 儲存this(當前呼叫者)
   * 
   */
  const newFunc = this
  // 在當前呼叫者 this身上 儲存 呼叫者
  thisArgs = (thisArgs !== undefined && thisArgs !== null) ? Object(thisArgs) : window
  thisArgs.func = newFunc
  thisArgs.func(...args)
}

apply

apply 就不說了實現思路是一樣的只不過傳入的引數不一樣做一個判斷就行了

Function.prototype.myapply = function (thisArgs, argArray) {
  if (!(argArray instanceof Array)) {
    throw '引數型別限定為 Array'
  }
  else {
    const func = this
    thisArgs = (thisArgs !== undefined &amp;&amp; thisArgs !== null) ? Object(thisArgs) : window
    thisArgs.fn = func
    thisArgs.fn(argArray)
  }
}

bind

bind 跟 apply call 有一些區別

bind 會返回一個新的函數，所以我們在內部需要自己定義一個函數給返回出去，並且，可能出現返回新函數呼叫時繼續傳入引數所以我們需要將引數合併

Function.prototype.mybind = function (thisArgs, ...argArray) {
  const oldFunc = this
  console.log(this);
  thisArgs = (thisArgs !== undefined && thisArgs !== null) ? Object(thisArgs) : window
  function proxyFn(...args) {
    thisArgs.func = oldFunc
    const funcCallResult = thisArgs.func([...argArray, ...args]) // 合併兩次的 引數
    delete thisArgs.func
    return funcCallResult
  }
  return proxyFn
}

謝謝，到此就完成了簡單版的 call apply bind 的實現，更多關於JS call apply bind方法的資料請關注it145.com其它相關文章！