在js中call、apply和bind之間有什么區別

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

                                                           前言

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

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

call

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

作用

1. 調用函數

2. 改變this，作為第一個參數

3. 傳遞參數，第二個參數之后的所有個數的參數

案例

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

解析：
第一行輸出，調用了fn1并將this指向fn2
第二行輸出，事實上，執行的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同樣也是所有函數都能調用的方法，是Function.prototype里的方法

作用

1. 調用函數

2. 改變this

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

與call的區別

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

運用

• 運用Math函數獲取最大值

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

bind

bind同樣也是所有函數都能調用的方法，是Function.prototype里的方法

作用

1. 改變this

2. 傳遞參數，第二個參數之后的所有個數參數

3. 返回新函數

與call、apply的區別

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

運用

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，同時不會調用函數。但事實上如果你用了箭頭函數的寫法，因箭頭函數的this是關乎上下文的this，因此會簡單許多，這個案例意在給我們理解bind的用法，那么在下面附上箭頭函數的寫法

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之間有什么區別，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。