今天又是連續(xù)暴雨的一天，已連續(xù)下雨好幾周了。房間里黑漆漆的，突然想到JavaScript 的call()、apply()、bind()三個(gè)函數(shù)。。。人家都在想女友，而我此時(shí)此刻想到了代碼，太慘了。。。一臉懵逼，還忘記了它們的區(qū)別，果然雨下得連腦子都不好使了。。。

• 馬上在瀏覽器寫了一段代碼驗(yàn)證一下三個(gè)函數(shù)有啥不同，如下：

let bigBaby = {
    name: '大寶',
    age: 81,
    ageFun: () => {
        console.log(this.name + "年齡：" + this.age)
    },
    descFun: (height , weight, hobby) => {
        console.log(this.name + "年齡：" + this.age + " 身高：" + height + "米 體重：" + weight + " 愛好：" + hobby)
    }
}

let littleBaby = {
    name: '小寶',
    age: 18
}

bigBaby.ageFun.call(littleBaby)　　　　// undefined年齡：undefined
bigBaby.ageFun.apply(littleBaby)　　　 // undefined年齡：undefined
bigBaby.ageFun.bind(littleBaby)()　　　// undefined年齡：undefined

• 看到結(jié)果后，才晃過來bigBaby對(duì)象里的箭頭函數(shù)作用域提升了，this指向window，所以取不到值undefined了。。。粗心容易犯錯(cuò)，別想著一寫函數(shù)就寫箭頭函數(shù)。。。緊接著改成如下代碼：

let bigBaby = {
    name: '大寶',
    age: 81,
    ageFun: function () {
        console.log(this.name + "年齡：" + this.age)
    },
    descFun: function (height , weight, hobby) {
        console.log(this.name + "年齡：" + this.age + " 身高：" + height + "米 體重：" + weight + " 愛好：" + hobby)
    }
}

let littleBaby = {
    name: '小寶',
    age: 18
}

bigBaby.ageFun.call(littleBaby)　　　　// 小寶年齡：18
bigBaby.ageFun.apply(littleBaby)　　　 // 小寶年齡：18
bigBaby.ageFun.bind(littleBaby)()      // 小寶年齡：18

• 看到如下結(jié)果，就對(duì)了。第一點(diǎn)：

call()、apply()、bind() 三個(gè)函數(shù)都是用來重定義 this 這個(gè)對(duì)象的，把原本 bigBaby 的方法重定義為 littleBaby 的方法，所以讀取到的 age 是
littleBaby 定義的 18 歲
call、apply 直接執(zhí)行函數(shù)，bind 返回的是一個(gè)新的函數(shù)，所以要調(diào)用它才會(huì)被執(zhí)行

• 接著測(cè)試，代碼如下：

let bigBaby = {
    name: '大寶',
    age: 81,
    ageFun: function () {
        console.log(this.name + "年齡：" + this.age)
    },
    descFun: function (height, weight, hobby) {
        console.log(this.name + "年齡：" + this.age + " 身高：" + height + "米 體重：" + weight + " 愛好：" + hobby)
    }
}

let littleBaby = {
    name: '小寶',
    age: 18
}

bigBaby.descFun.call(littleBaby, 2, '200斤', (() => '籃球')())　　　　// 小寶年齡：18  身高：2米 體重：200斤 愛好：籃球
bigBaby.descFun.apply(littleBaby, [2, '200斤', (() => '籃球')()])　　 // 小寶年齡：18  身高：2米 體重：200斤 愛好：籃球
bigBaby.descFun.bind(littleBaby, 2, '200斤', (() => '籃球')())()      // 小寶年齡：18  身高：2米 體重：200斤 愛好：籃球

• 看到如下結(jié)果，第二點(diǎn)：

除了第一個(gè)參數(shù)，后面的參數(shù)都是函數(shù)的入?yún)?br> call 的參數(shù)是直接放進(jìn)去的，全都用逗號(hào)分隔，直接放到后面 bigBaby.descFun.call(littleBaby, 2, '200斤', (() => '籃球')())
apply 的所有參數(shù)都必須放在一個(gè)數(shù)組里面?zhèn)鬟M(jìn)去 bigBaby.descFun.apply(littleBaby, [2, '200斤', (() => '籃球')()])
bind 的參數(shù)是直接放進(jìn)去的，全都用逗號(hào)分隔，直接放到后面，和 call 一樣 bigBaby.descFun.bind(littleBaby, 2, '200斤', (() => '籃球')())()
三者的參數(shù)允許是各種類型

• 總結(jié)

  • call()、apply()、bind() 三個(gè)函數(shù)都是用來重定義 this 這個(gè)對(duì)象的

  • call 和 bind 的函數(shù)入?yún)?shù)都用逗號(hào)分隔傳入函數(shù)中，apply 的函數(shù)入?yún)?shù)要放在一個(gè)數(shù)組里面?zhèn)魅牒瘮?shù)中