call()

介紹

通過提供一個(gè)新的this值給當(dāng)前調(diào)用的函數(shù)/方法，從而改變this指向。

語法

fn.call(this.Arg, arg1, arg2,...)

thisArg：當(dāng)前調(diào)用函數(shù)this指向的對象
arg1, arg2：傳遞的其他參數(shù)（直接傳給形參可不寫）

特點(diǎn)

• 可以直接調(diào)用函數(shù)—fn.call()
• 可以改變被調(diào)用函數(shù)的this指向?yàn)橹付ǖ?mdash; fn.call(this.Arg)

返回值

使用調(diào)用者提供的值和參數(shù)調(diào)用該函數(shù)的返回值，也就是函數(shù)的返回值。若該方法沒有返回值，則返回undefined。

使用(主要應(yīng)用)

通過使用call()來實(shí)現(xiàn)繼承

// 借用父構(gòu)造函數(shù)繼承屬性
// 父構(gòu)造函數(shù)
function Father(name, age) {
    this.uname = name
    this.age = age
}
// 子構(gòu)造函數(shù)
function Son(name, age) {
    Father.call(this, name, age)
}
var son = new Son('小明', 10)
console.log(son); // Son {uname: '小明', age: 10}

apply()

介紹

apply-應(yīng)用、運(yùn)用的意思。
apply()-調(diào)用一個(gè)具有給定值的函數(shù)，以及以一個(gè)數(shù)組（或一個(gè)類數(shù)組對象）的形式提供的參數(shù)this，簡單理解為調(diào)用函數(shù)的，fang'shi但是它可以改變this指向。

語法

fn.apply(this.Arg, [argsArray])

thisArg：在fn函數(shù)運(yùn)行時(shí)指定的this值，當(dāng)不需要改變this指向時(shí)這里可以填null 。
argsArray：傳遞的值，必須包含在數(shù)組里面。

特點(diǎn)

• 也是調(diào)用函數(shù)—fn.apply()
• 可以改變函數(shù)內(nèi)部的this指向—fn.apply(this)但是它的參數(shù)必須是數(shù)組（偽數(shù)組）

返回值

apply()的返回值就是函數(shù)的返回值，因?yàn)樗褪钦{(diào)用函數(shù)。
使用調(diào)用者提供的值和參數(shù)調(diào)用該函數(shù)的返回值。若該方法沒有返回值，則返回undefined。

使用

var a = {
    name: '小紅'
}
function fn(arr) {
    console.log(this); // {name: '小紅'}
    console.log(arr); // blackpink 傳字符串就輸出字符串傳數(shù)字就輸出數(shù)字
}
fn.apply(a, ['blackpink'])
// fn.apply() // this->window arr->undefined

典型應(yīng)用： 借助于數(shù)學(xué)內(nèi)置對象求值。

var arr = [1, 66, 3, 99, 4]
// var max = Math.max.apply(null, arr) // 雖然這里的this指向不需要改變填null沒有錯(cuò)
var max = Math.max.apply(Math, arr) // 但是這里最好是讓this指向函數(shù)的調(diào)用者是最合適的
var min = Math.min.apply(Math, arr)
console.log(max); // 99
console.log(min); // 1

bind()

介紹

bind：綁定、捆綁
bind()：不會(huì)調(diào)用函數(shù)，但是也能改變函數(shù)內(nèi)部的this指向

語法

fn.bind(thusArg, arg1, arg2, ...)

thisArg：在fn函數(shù)運(yùn)行時(shí)指定的this值
arg1, arg2：傳遞的其他參數(shù)

特點(diǎn)

• 不會(huì)調(diào)用原來的函數(shù)，不會(huì)立即調(diào)用；
• 可以改變原來函數(shù)內(nèi)部的this指向；
• 返回的是原函數(shù)改變this之后產(chǎn)生的新函數(shù)；

返回值

• 返回由指定的this值和初始化參數(shù)改造的原函數(shù)拷貝。

使用

var c = {
    name: '大華'
}
function fn() {
    console.log(this); // {name: '大華'}
    console.log(a + b); // 3
}
// fn.bind(c) // 這里不會(huì)有輸出值
var f = fn.bind(c, 1, 2)
f() // 拷貝函數(shù)所以輸出值用函數(shù)調(diào)用

典型應(yīng)用：
如果有的函數(shù)我們不需要立即調(diào)用，但是又想改變這個(gè)函數(shù)內(nèi)部this指向，此時(shí)用bind()，eg：點(diǎn)擊發(fā)送驗(yàn)證碼60秒后才能二次點(diǎn)擊

    <button>按鈕</button>
    <button>按鈕</button>
    <button>按鈕</button>

var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        this.disabled = true // 這個(gè)this指向的是調(diào)用者btn
        setTimeout(function() {
            // this.disabled = false; // 只用這一個(gè)不加bind的話會(huì)不管用，因?yàn)槎〞r(shí)器里面的this指向的是window
            this.disabled = false // 此時(shí)這里的this指向的是當(dāng)前點(diǎn)擊的那個(gè)btn
        }.bind(this), 3000) // 這個(gè)this指向的是btn這個(gè)對象
    }
}

call(),apply(),bind()的區(qū)別

三者相同點(diǎn)

• 都可以改變函數(shù)內(nèi)部的this指向

不同點(diǎn)

• call 和 apply 會(huì)調(diào)用函數(shù)，并且改變函數(shù)內(nèi)部this指向；
• call 和 apply 的傳參不一樣，call 傳參aru1, aru2...形式，apply 必須為數(shù)組形式 [arg] ；
• bind 不會(huì)直接調(diào)用函數(shù)，但是可以改變函數(shù)內(nèi)部this指向；

應(yīng)用場景不同：

• call 經(jīng)常做繼承；
• apply 經(jīng)常跟數(shù)組有關(guān)系，比如借助于數(shù)學(xué)對象實(shí)現(xiàn)數(shù)組最大最小值；
• bind 不調(diào)用函數(shù)，但是還想改變this指向，比如改變定時(shí)器內(nèi)部this指向；

以上既是JS中call(),apply(),bind()函數(shù)的區(qū)別與使用方法，更多關(guān)于這3個(gè)函數(shù)的使用方法請查看下面的相關(guān)鏈接

最新評論