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

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

                                                           前言

在面試的過程中，會有許多新問題出現(xiàn)來讓你拓展新的知識，也會發(fā)現(xiàn)學習中忽略的點。

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

call

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

作用

1. 調用函數(shù)

2. 改變this，作為第一個參數(shù)

3. 傳遞參數(shù)，第二個參數(shù)之后的所有個數(shù)的參數(shù)

案例

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

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

運用

• 繼承的方法

    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ù)都能調用的方法，是Function.prototype里的方法

作用

1. 調用函數(shù)

2. 改變this

3. 傳遞參數(shù)，第二個參數(shù)之后的所有數(shù)組參數(shù)

與call的區(qū)別

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

運用

• 運用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ù)都能調用的方法，是Function.prototype里的方法

作用

1. 改變this

2. 傳遞參數(shù)，第二個參數(shù)之后的所有個數(shù)參數(shù)

3. 返回新函數(shù)

與call、apply的區(qū)別

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

運用

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

上面的案例修改了定時器的this，同時不會調用函數(shù)。但事實上如果你用了箭頭函數(shù)的寫法，因箭頭函數(shù)的this是關乎上下文的this，因此會簡單許多，這個案例意在給我們理解bind的用法，那么在下面附上箭頭函數(shù)的寫法

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ū)別，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。