call、apply、bind的用法小結(jié)

woshicixide 發(fā)布于2019-08-26 11:36 / 2356人閱讀

摘要：新手經(jīng)常犯的一個錯誤是將一個方法從對象中拿出來，然后再調(diào)用，希望方法中的是原來的對象。如果不做特殊處理的話，一般會丟失原來的對象。

call、apply、bind是JavaScript中Function函數(shù)自帶的方法，主要用于改變this的指向 區(qū)別： call（）

1.語法：

fun.call(this, arg1,arg2)

2.this取值的幾點說明：

（1）處于非嚴格模式下，指定為null和undefined的this值會自動指向全局對象(瀏覽器中就是window對象)

嚴格模式下：

（2）如果call方法的參數(shù)是一個原始值，那么這個原始值會自動轉(zhuǎn)成對應(yīng)的包裝對象，然后傳入call方法

（3）傳遞一個對象，則this指向這個對象

apply（）

apply方法的作用與call方法類似，也是改變this指向，然后再調(diào)用該函數(shù)。
唯一的區(qū)別就是，它接收一個數(shù)組作為函數(shù)執(zhí)行時的參數(shù)。

1.語法：

fun.apply(this,[arg1,arg2...])

2.幾個小應(yīng)用：

（1）結(jié)合Math.max()找出數(shù)組最大項

（2）結(jié)合slice()將偽數(shù)組轉(zhuǎn)化為數(shù)組

啥叫偽數(shù)組：

i.有 0,1,2,3,4,5...n,length 這些 key 的對象；
ii.原型鏈中沒有 Array.prototype(如arguments對象，公有屬性是Object.prototype)

目前已知的偽數(shù)組：

i.arguments對象；
ii.由document.querySelectAll()返回的對象

運用：

bind()

1.語法：

fun.bind(thisArg[, arg1[, arg2[, ...]]])

2.MDN文檔關(guān)于bind()的用法描述

bind() 最簡單的用法是創(chuàng)建一個函數(shù)，使這個函數(shù)不論怎么調(diào)用都有同樣的 this 值。JavaScript新手經(jīng)常犯的一個錯誤是將一個方法從對象中拿出來，然后再調(diào)用，希望方法中的 this 是原來的對象。（比如在回調(diào)中傳入這個方法。）如果不做特殊處理的話，一般會丟失原來的對象。從原來的函數(shù)和原來的對象創(chuàng)建一個綁定函數(shù)，則能很漂亮地解決這個問題

var a = 18;
var x = {
    a: 81,
    getA: function() {
        return this.a
    }
};

x.getA(); // 81

var b = x.getA;
b(); // 18（在這種情況下，this指向全局作用域）

// 用bind()創(chuàng)建一個新函數(shù)，使this指向x對象
var bGetA = b.bind(x);
bGetA(); // 返回 81