【JavaScript面试题】bind和call、apply有什么作用？它们的区别是什么？

JS中bind和call、apply的作用以及它们的区别

作用: 改变函数运行时this的指向

  var uname = '张三';
        var obj = {
            uname: '李四',
            say: function() {
                console.log(this.uname);
            }
        }
        obj.say();  //李四
        setTimeout(obj.say, 0)  //张三
1
2
3
4
5
6
7
8
9

最后的结果如下：

obj.say()输出的结果是李四，说明这里的this第一次调用的时候指向的是obj。而setTimeout(obj.say, 0)这里面的this指向的是window。

通过bind()改变this指向：

 var uname = '张三';
        var obj = {
            uname: '李四',
            say: function() {
                console.log(this.uname);
            }
        }
        obj.say();  //李四
        setTimeout(obj.say, 0)  //张三
        setTimeout(obj.say.bind(obj), 0) //李四
1
2
3
4
5
6
7
8
9
10

apply的使用：两个参数，第一是this的指向，第二个是函数接收的参数，以数组的形式传入

        //apply:两个参数，第一是this的指向，第二个是函数接收的参数，以数组的形式传入
        function fun(...argus) {
            console.log(this);
            console.log(...argus);
        }
        var person = {
            myname: '王五'
        }
        fun.apply(person, [1, 2, 3, 4]); //传入的参数必须是一个数组
        fun(1, 2, 3, 4)
        //如果第一个参数null或者undefined,this默认指向window
        fun.apply(null, [1, 2])
        fun.apply(undefined, [1, 2])
1
2
3
4
5
6
7
8
9
10
11
12
13

结果为：

call的使用：两个参数，第一是this的指向，第二个是参数列表

  function fun(...argus) {
            console.log(this);
            console.log(...argus);
        }
        var person = {
            myname: '王五'
        }
        fun.apply(person, [1, 2, 3, 4]); //传入的参数必须是一个数组
        fun(1, 2, 3, 4)
            //如果第一个参数null或者undefined,this默认指向window
        fun.apply(null, [1, 2])
        fun.apply(undefined, [1, 2])
        console.log('---------------')
        fun.call(person, 1, 2, 3, 4)
1
2
3
4
5
6
7
8
9
10
11
12
13
14

call()和apply()改变this的指向以后，它的原函数会立即执行，临时改变this指向一次。

bind的使用：两个参数，第一是this的指向，第二个是参数列表。它改变this指向以后不会立即执行，它返回的是一个永久改变this指向的函数

    function fun(...argus) {
            console.log(this);
            console.log(...argus);
        }
        var person = {
            myname: '王五'
        }
        var bindFun = fun.bind(person)
        bindFun(1, 2, 3, 4);
        bindFun();
1
2
3
4
5
6
7
8
9
10

总结：

call()需要注意以下几点：

写法：

Function.call(obj,[param1[,param2[,…[,paramN]]]])
1

• 调用 call 的对象，必须是个函数 Function。
• call 的第一个参数，是一个对象。 Function 的调用者，将会指向这个对象。如果不传，则默认为全局对象 window。
• 第二个参数开始，可以接收任意个参数。每个参数会映射到相应位置的 Function 的参数上。但是如果将所有的参数作为数组传入，它们会作为一个整体映射到 Function 对应的第一个参数上，之后参数都为空。

apply 需要注意的是：

写法：

Function.apply(obj[,argArray])
1

• 它的调用者必须是函数 Function，并且只接收两个参数，第一个参数的规则与 call 一致。
• 第二个参数，必须是数组或者类数组，它们会被转换成类数组，传入 Function 中，并且会被映射到 Function 对应的参数上。这也是 call 和 apply 之间，很重要的一个区别。

bind 的使用：

Function.bind(thisArg[, arg1[, arg2[, ...]]])
1

bind 方法 与 apply 和 call 比较类似，也能改变函数体内的 this 指向。不同的是，bind 方法的返回值是函数，并且需要稍后调用，才会执行。而 apply 和 call 则是立即调用。
如果 bind 的第一个参数是 null 或者 undefined，this 就指向全局对象 window。

异同点

call 和 apply 的主要作用，是改变对象的执行上下文，并且是立即执行的。它们在参数上的写法略有区别。
bind 也能改变对象的执行上下文，它与 call 和 apply 不同的是，返回值是一个函数，并且需要稍后再调用一下，才会执行。