腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

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

更新時間：2023年02月08日 09:11:37 作者：前端小張同學(xué)

這篇文章主要為大家介紹了JS面試中你不知道的call apply bind方法及使用場景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

面試

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

我：啊.....這。

三者區(qū)別

call

我們先來看看 call call 函數(shù)接收兩個參數(shù)

@params1 需要指向this

@params2 需要攜帶的參數(shù)

就拿這段代碼來說我調(diào)用 foo 函數(shù) 的時候想去執(zhí)行obj 中的 eat函數(shù) 怎么辦?

默認(rèn) 我的 foo 里面什么頁面有怎么可能會打印吃飯呢？this默認(rèn)指向 window ，window 對象中沒有 eat 方法不應(yīng)該報錯 not defind 嗎？

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

你可以這樣，此時調(diào)用的時候 foo 的函數(shù) this 就指向了 obj 但是只是這一次調(diào)用哦，下次 this 是指向 window 的

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

調(diào)用結(jié)果 ：傳入 this 和參數(shù) 立即執(zhí)行函數(shù)

apply.

@params1 需要指向this

@params2 需要攜帶的參數(shù) 傳入的參數(shù)數(shù)據(jù)類型為 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 ]

調(diào)用結(jié)果 ：傳入 this 和參數(shù)，立即執(zhí)行

bind

@params1 需要指向this

@params2 需要攜帶的參數(shù)

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 ]

調(diào)用結(jié)果：傳入 this 和參數(shù) 返回一個新的函數(shù)，不會立即執(zhí)行

總結(jié)

call 函數(shù) 傳入綁定 this的對象，攜第二個參數(shù)以參數(shù)列表形式傳入并會立即執(zhí)行

apply 函數(shù) 傳入綁定 this的對象第二個參數(shù)以數(shù)組的形式傳入并會立即執(zhí)行

bind 函數(shù) 傳入綁定 this的對象第二個參數(shù)以數(shù)組或參數(shù)列表的形式傳入不會立即執(zhí)行函數(shù)會返回一個新的函數(shù) 自由調(diào)用

應(yīng)用場景

利用call 實(shí)現(xiàn) 構(gòu)造函數(shù)原型繼承

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('數(shù)學(xué)', "李四", 18, ['哈利波特'])
const tec = new Teacher("王安怡")
console.log(stu === stu2);
console.log(stu);
console.log(stu.friends);
console.log(stu2.friends);

簡單實(shí)現(xiàn)

call

實(shí)現(xiàn)思路：

1:在Function 原型身上添加一個方法。

2：mycall 接受兩個參數(shù) 一個是綁定的 this，還有就是參數(shù)列表

3：保存調(diào)用者，其實(shí)這里更嚴(yán)謹(jǐn)一點(diǎn)還需要判斷調(diào)用者的類型

4：判斷傳入的thisArgs 是不是 undefined 或者 null 如果是則 this指向 window 否則將綁定的 this封裝成一個對象

5：然后將函數(shù)本身保存在上面封裝好的對象中

6：調(diào)用并傳入args

7：完成實(shí)現(xiàn) this指向的改變

Function.prototype.mycall = function (thisArgs, ...args) {
  /**
   * 
   * 保存this(當(dāng)前調(diào)用者)
   * 
   */
  const newFunc = this
  // 在當(dāng)前調(diào)用者 this身上 保存 調(diào)用者
  thisArgs = (thisArgs !== undefined && thisArgs !== null) ? Object(thisArgs) : window
  thisArgs.func = newFunc
  thisArgs.func(...args)
}

apply

apply 就不說了實(shí)現(xiàn)思路是一樣的只不過傳入的參數(shù)不一樣做一個判斷就行了

Function.prototype.myapply = function (thisArgs, argArray) {
  if (!(argArray instanceof Array)) {
    throw '參數(shù)類型限定為 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 有一些區(qū)別

bind 會返回一個新的函數(shù) ，所以我們在內(nèi)部需要自己定義一個函數(shù) 給返回出去，并且，可能出現(xiàn) 返回新函數(shù)調(diào)用時繼續(xù)傳入?yún)?shù) 所以我們需要將參數(shù)合并

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]) // 合并兩次的 參數(shù)
    delete thisArgs.func
    return funcCallResult
  }
  return proxyFn
}

謝謝，到此就完成了簡單版的 call apply bind 的實(shí)現(xiàn)，更多關(guān)于JS call apply bind方法的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: