call、apply、bind 的区别

call

• call 可以调用函数

function func() {}

func.call()

• call 可以改变函数中 this 的指向

function func() {
    console.log(this.name)
}

let cat = {
    name: 'bigc'
}

func.call(cat)
// bigc

不光函数，方法也能用。

function func() {
    console.log(this.name)
}

let dog = {
    name: 'mk',
    sayName() {
        console.log(`我是 ${this.name}`)
    }
}
let cat = {
    name: 'bigc'
}

dog.sayName.call(cat)
// 我是 bigc

还可以传参。call 从第二个参数开始，都是给原函数传参。

function func() {
    console.log(this.name)
}

let dog = {
    name: 'mk',
    sayName() {
        console.log(`我是 ${this.name}`)
    },
    eat(food) {
        console.log(`我吃 ${food}`)
    }
}
let cat = {
    name: 'bigc'
}
dog.eat('奶片')
// 我吃奶片
dog.eat.call(cat, '巧克力')
// 我吃巧克力

apply

和 call 的区别只有传参不一样。

apply 的第二个参数是数组方式的参数列表

function func() {
    console.log(this.name)
}

let dog = {
    name: 'mk',
    sayName() {
        console.log(`我是 ${this.name}`)
    },
    eat(food, drink) {
        console.log(`我吃 ${food}，我喝 ${drink}`)
    }
}
let cat = {
    name: 'bigc'
}
dog.eat('奶片', '牛奶')
// 我吃奶片，我喝牛奶
dog.eat.apply(cat, ['巧克力', '洗脚水'])
// 我吃巧克力，我喝洗脚水

bind

bind 不会调用原函数，会把改变 this 指向后的结果返回。

const newFn = dog.eat.bind(cat, '巧克力', '洗脚水')
newFn()

// 我吃巧克力，我喝洗脚水

WARNING

猫不能吃巧克力和喝洗脚水。大 C 愿意这么干，但我不会让他得逞。