JS中的call(),apply()和bind()方法

nifhlheimr 發(fā)布于2019-08-22 18:05 / 2265人閱讀

摘要：奔著一星期徹底弄清楚一個小知識點的目的這次的目標是方法在實際項目中經(jīng)常會用到這三個函數(shù)只是簡單的知道都是用來進行上下文綁定的這三個函數(shù)都可以實現(xiàn)現(xiàn)在看來這三者還是有很大區(qū)別的特別是和其他兩個的區(qū)別先說和目的是改變函數(shù)的執(zhí)行上下文下面列舉一些

奔著一星期徹底弄清楚一個javascript小知識點的目的,這次的目標是call apply bind方法

在實際項目中,經(jīng)常會用到這三個函數(shù),只是簡單的知道,都是用來進行上下文綁定的,這三個函數(shù)都可以實現(xiàn),現(xiàn)在看來這三者還是有很大區(qū)別的,特別是bind和其他兩個的區(qū)別

先說call和apply 目的是改變函數(shù)的執(zhí)行上下文,下面列舉一些他們的用法

實例一

const zhangsan = {
    name: "張三",
    age: 18    
}

const lisi = {
    name: "李四",
    age: 16
}

function introduce(grade) {
    console.log(`我的名字叫${this.name},我今年${this.age}歲了,上${grade}了`)
}

introduce.call(zhangsan, 3) // 我的名字叫張三,我今年18歲了,上3了
introduce.call(lisi, 4) // 我的名字叫李四,我今年18歲了,上3了
introduce.apply(zhangsan, [3])// 我的名字叫張三,我今年18歲了,上3了
introduce.apply(lisi, [4]) // 我的名字叫李四,我今年18歲了,上3了

實例二

const People = {
    name: "黨",
    age: 100,
    introduce: function(grade) {
       console.log(`我的名字叫${this.name},我今年${this.age}歲了,上${grade}了`) 
    }
}

People.introduce("大學(xué)") // 我的名字叫黨,我今年100歲了,上大學(xué)了

const zhangsan = {
    name: "張三",
    age: 18
}

People.introduce.call(zhangsan, 3) // 我的名字叫張三,我今年18歲了,上3了
People.introduce.apply(zhangsan, [3]) // 我的名字叫張三,我今年18歲了,上3了

通過以上兩個例子,可以看出,call和apply的區(qū)別主要在于傳遞參數(shù)的上的不同,

他們倆的第一個參數(shù)都是要執(zhí)行環(huán)境的this, 也就是說執(zhí)行函數(shù)的上下文

第二個參數(shù)apply是以數(shù)組的方式以此傳遞, call要一個一個傳

需要注意的一點,他們的第二個參數(shù)都可以穿arguments

下面就看下bind函數(shù)的具體用法

還是老樣子,列舉一些例子,例子更能直觀的感受其用法

還是以上面代碼為基礎(chǔ)

const wangwu = {
    name: "王五",
    age: 20
}
People.introduce.bind(wangwu, 4)  // ? (grade) {
                                  //   console.log(`我的名字叫${this.name},我今年        
                                  //   ${this.age}歲了,上                 
                                  // }
可以看到輸出的是一個函數(shù)體

所以, bind后函數(shù)不會執(zhí)行, 只是返回一個改變上下文的函數(shù)副本, 而call和apply是直接執(zhí)行的函數(shù)

如果想得到和call apply一樣的效果,需要手動執(zhí)行下改函數(shù)

People.introduce.bind(wangwu, 4)() // 我的名字叫王五,我今年20歲了,上4了

查了下bind在ie6 ~ ie8下bind的兼容性不好,如果需要兼容ie低版本瀏覽器的,需要模擬其用法

代碼如下

if(!function(){}.bind) {
    Function.prototype.bind = function(context) {
        const self = this
        const args = Array.prototype.slice.call(arguments)
        return function() {
            return self.apply(context, args.slice(1))
        }
    }
}

細想下來,上面這段代碼的知識點特別多

const self = this

通過上面兩個截圖可以很明確的知道需要讓this保存調(diào)用它的值

需要擴展方法的時候,都需要先判斷是否已經(jīng)存在,如果不存在則會在原型prototype上添加方法

將偽數(shù)組轉(zhuǎn)化為真正的數(shù)組 Array.protoype.slice.call(arguments)
數(shù)組slice的用法,具體怎么使用可以參考這個

返回一個函數(shù),把該函數(shù)傳遞給bind的第一個參數(shù)當做執(zhí)行上下文, 由于args已經(jīng)是一個數(shù)組，排除第一項，之后的參數(shù)作為第二部分參數(shù)傳給apply。