新手理解 apply 和 call

说点题外话

本文仅适合新手, 我是说很新的那种, 旨在和大家共同了解js的call和apply方法. 笔者水平有限, 文中不免会有疏漏, 大神请轻喷.

开始说正事

apply 和 call 都是 JS 函数对象的原型方法, 因此我们可以在任何的函数调用这两个方法, 主要作用就是使得对象能够借用到本来不属于他的方法(就是对象的本领). 有点懵逼是不是? 下边我们来举个栗子.

狗急跳墙

假设我们有一只喵星人:

const cat = {
    // 它的名字叫 cat
    name: 'cat',
    // 它可以跑
    run() {
        console.log(`${this.name} can run`)
    },
    // 还可以跳(包括跳墙是可以的)
    jump() {
        console.log(`${this.name} can jump`)
    }
}

同时, 它还有一个小伙伴汪星人:

const dog = {
    // 汪星人叫 dog
    name: 'dog',
    // 会跑
    run() {
        console.log(`${this.name} can run`)
    },
    // 还会吠
    bark() {
        console.log(`${this.name} bark loudly`)
    },
    // 马戏团的🐶, 还会做算数
    count(a, b) {
        console.log(`${a} + ${b} = ${a + b}`)
    }
}

不难发现, 猫狗各有所长. 猫咪可以跳墙, 但是 🐶🐶 可以吠叫. 假如, 现在的情况提别紧急, 紧急到了什么地步呢. 大家都要到墙头上才能保证安全. 这个时候猫咪直接

cat.jump()

成功翻上墙头.

然而, 现在 🐶🐶 就尴尬了. 跳上墙头??? 不会

就一个 bark() 喊半天也没有用呀!!!

这个时候 apply 就派上用场了. 我们执行

cat.jump.apply(dog)

🐶🐶 也顺利脱险啦. 跳上了墙头, 狗狗欢快的 bark() 这时候猫咪不乐意了, 它也想吠叫, 但是没有这个本领. 这时候🐶🐶也大方的借出了自己的 bark 本领给了猫咪.

dog.bark.apply(cat)

两只小可爱欢快的在墙头上叫起来 ^_^.

apply方法的原理

apply方法可以当作是一种方法的借调: 也就是说把某个方法引用到不包含它的某个对象上. 方法（函数）是用来被对象调用才能够执行的, 而apply恰恰指向了调用当前方法的对象. 初学者可能会误认为apply是对向继承了之前引用的方法. 然而, 这里不太建议这样理解. 我们可以再次利用狗狗对象调用jump方法, 得到的结果如下图所示:

狗狗, 并没有学会 jump 的本领, 它只是在紧急时刻借用了猫咪的跳墙方法.

需要参数

我们知道我们的 🐶🐶 来自马戏团, 具备了算数的能力. 不信试试?

dog.count(1, 2)

简直了不得, 有木有? 然而, 喵星人现在也想要去马戏团. 可是它不会算数, 就需要从汪星人那里借来 count 本领. 那么就尴尬了.

既然要算加法, 就需要把两个加数给人家嘛. 怎么给呢? 只需要把 count 方法需要的参数拼接到一个数组里就可以啦. 就像酱紫.

那么 call 方法咧

其实 call 方法和 apply 方法用法几乎完全一致, 为什么是几乎呢? 在传递参数的时候. 刚刚我们用到的 apply 方法需要把算数的参数放到一个数组里告诉 count 方法. 用 call 的时候就方便多了. 直接撸.

这个样式儿. 简直是舒服呀!