10分钟了解JS中的call()、apply()和bind()

一、要点

1.call()、apply()和bind()是函数的方法。
2.它们主要用来改变this的指向

二、call()方法

    function foo() {
        console.log(this)
    }

    foo();//=>window
    let obj = {
        name: '张三',
        age: '16'
    };
    foo.call(obj);//=>{name: "张三", age: "16"}

函数声明都是定义在全局的，相当于是给window对象增加了一个方法foo。函数foo通过调用call()改变了this指向，让对象obj能够调用这个方法。

    function sum(num1, num2) {
        return num1 + num2
    }

    function callSum1(a, b) {
        return sum.call(this, a, b)
    }

    console.log(callSum1(1, 2));//=>3

在使用call()方法时，传递给函数的参数必须逐个列举出来。

三、apply()方法

apply()方法与call()方法类似，作用也相同，唯一不同的地方在于接收的第二个参数不一样，apply()方法可以接收Array实例，也可以是arguments对象（类数组对象）。
1.Array的情况

    function sum(num1, num2) {
        return num1 + num2
    }

    function applySum1(a, b) {
        return sum.apply(this, [a, b])
    }

    console.log(applySum1(1, 2));//=>3

2.arguments的情况

    function sum(num1, num2) {
        return num1 + num2
    }

    function applySum2() {
        return sum.apply(this,arguments)
    }

    console.log(applySum2(3, 5));//=>8

四、bind()方法

1.bind()方法将函数绑定至某个对象。
2.这个方法接收一个对象作为参数，并返回一个新的函数。

    function foo(y) {
        return this.x + y
    }//待绑定函数

    let obj = {x: 1};//将要绑定的对象
    let g = foo.bind(obj);//将新函数赋值给变量g
    console.log(g(3));//=>4；调用函数

五、对比

    let person1 = {
        name: '张三',
        age: 18,
        shopping(x, y) {
            console.log(this.name + '今年' + this.age + '岁，女朋友' + x + '岁，' + y)
        }
    };
    person1.shopping(60, '有钱');//=>张三今年18岁，女朋友60岁，有钱
    let person2 = {
        name: '李四',
        age: 25
    };
    person1.shopping.call(person2, 19, '漂亮');//李四今年25岁，女朋友19岁，漂亮
    person1.shopping.apply(person2, [19, '漂亮']);//李四今年25岁，女朋友19岁，漂亮
    person1.shopping.bind(person2, 19, '漂亮')();//李四今年25岁，女朋友19岁，漂亮
    person1.shopping.bind(person2, [19, '漂亮'])();//李四今年25岁，女朋友19,漂亮岁，undefined

1.bind()返回一个新函数，需要调用才能执行
2.bind()的参数形式和call()方法一样，需要逐个列举