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

裡的方法

作用

改變this傳遞參數，第二個參數之後的所有個數參數

傳回新函數

###與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教學###》###

以上是js中call、apply和bind的區別和原理及擴展的高級運用的詳細內容。更多資訊請關注PHP中文網其他相關文章！