在js中call、apply和bind之間有什么區(qū)別

本篇文章給大家分享的是有關(guān)在js中call、apply和bind之間有什么區(qū)別，小編覺(jué)得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話(huà)不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)公司是一家專(zhuān)業(yè)提供云夢(mèng)企業(yè)網(wǎng)站建設(shè),專(zhuān)注與網(wǎng)站制作、做網(wǎng)站、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為云夢(mèng)眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專(zhuān)業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

前言

在面試的過(guò)程中，會(huì)有許多新問(wèn)題出現(xiàn)來(lái)讓你拓展新的知識(shí)，也會(huì)發(fā)現(xiàn)學(xué)習(xí)中忽略的點(diǎn)。

在前兩天的一次面試中，面試官就問(wèn)了call、apply和bind的區(qū)別。事實(shí)上，我們也應(yīng)該領(lǐng)悟得到面試官更想問(wèn)到的東西是什么，也就是拓展出來(lái)的東西。

call

call是所有函數(shù)都能調(diào)用的方法，是Function.prototype里的方法

作用

調(diào)用函數(shù)
改變this，作為第一個(gè)參數(shù)
傳遞參數(shù)，第二個(gè)參數(shù)之后的所有個(gè)數(shù)的參數(shù)

案例

function fn1(){
    console.log(1);
}
function fn2(){
    console.log(2);
}
fn1.call(fn2); //輸出 1
fn1.call.call(fn2); //輸出 2

解析：
第一行輸出，調(diào)用了fn1并將this指向fn2
第二行輸出，事實(shí)上，執(zhí)行的call()才是關(guān)鍵，這里就涉及了Function.prototype.call()的機(jī)制，它只是把.call()之前的代碼段當(dāng)作一個(gè)變量，將傳遞的代碼段指向this，則fn1.call指向了fn2，于是就相對(duì)于fn2.call()，只是這里傳遞的this為window

運(yùn)用

繼承的方法

  function Father(uname,age){
      this.uname= uname;
      this.age=age;
  }
  Father.prototype={
      constructor:Father,
      sing:function(){
          console.log("唱跳rap");
      }
  }
  function Son(){
      Father.call(this,uname,age)
  }
  Son.prototype=new Father();

apply

apply同樣也是所有函數(shù)都能調(diào)用的方法，是Function.prototype里的方法

作用

調(diào)用函數(shù)
改變this
傳遞參數(shù)，第二個(gè)參數(shù)之后的所有數(shù)組參數(shù)

與call的區(qū)別

apply第二個(gè)參數(shù)是Array，而call是將參數(shù)以個(gè)數(shù)的形式傳入

運(yùn)用

運(yùn)用Math函數(shù)獲取最大值

  let arr=Array.of(2,42,56,89,1,24,56,22)
  let max=Math.max.apply(Math,arr)
  console.log(max);

bind

bind同樣也是所有函數(shù)都能調(diào)用的方法，是Function.prototype里的方法

作用

改變this
傳遞參數(shù)，第二個(gè)參數(shù)之后的所有個(gè)數(shù)參數(shù)
返回新函數(shù)

與call、apply的區(qū)別

與前兩者的最大不同就是不會(huì)調(diào)用函數(shù)并且修改后返回新的函數(shù)

運(yùn)用

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(function(){
            this.disabled=false;
        }.bind(this),2000);
    }
}

上面的案例修改了定時(shí)器的this，同時(shí)不會(huì)調(diào)用函數(shù)。但事實(shí)上如果你用了箭頭函數(shù)的寫(xiě)法，因箭頭函數(shù)的this是關(guān)乎上下文的this，因此會(huì)簡(jiǎn)單許多，這個(gè)案例意在給我們理解bind的用法，那么在下面附上箭頭函數(shù)的寫(xiě)法

let btns=document.querySelectorAll("button")
for(let btn of btns){
    btn.onclick=function(){
        this.disabled=true;
        setTimeout(()=>{
            this.disabled=false;
        },2000);
    }
}

以上就是在js中call、apply和bind之間有什么區(qū)別，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前題目：在js中call、apply和bind之間有什么區(qū)別
文章地址：http://muchs.cn/article44/ighghe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、微信小程序、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、動(dòng)態(tài)網(wǎng)站、虛擬主機(jī)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容