JavaScript的apply函数和call函数，以及bind

鄙人萌新小白一枚，最近学习了JavaScript，有一点笔记得及时总结出来，以加深自己的理解，防止以后忘记，也分享给大家。

apply函数调用

在javascript语言中，函数本身具有apply方法，它接收两个参数，第一个参数就是与被调用的函数相关的需要绑定的对象或者变量，对于有this上下文的方法，this所绑定的就是第一个参数所指的对象，第二个参数必须是一个Array类型，表示被调用的函数所需要的参数。

call函数调用

函数还具有call方法，它接收的第一个参数就是需要绑定的对象或者变量，同理对于有this上下文的方法，this所绑定的就是第一个参数所指的对象，除第一个参数以外的其他参数均表示被调用的函数所需要的参数。

apply与call区别

apply()方法与call()很类似，唯一区别是：

1. apply()接收打包成Array类型的参数再传入被调用的函数；
2. call()把参数按顺序传入被调用的函数。

比如调用pow(x)，分别用apply()和call()实现如下:

function pow(x) { //定义pow
   return x * x;
}
var p2 = pow.apply(null, [2]);
// p2 = 4, 对于简单函数和方法，不需要绑定对象或者变量, 所以第一个参数为null替代
p2 = pow.apply(null, [3, 4]);
// p2 = 9, apply()将[3, 4]传入pow(), 但是pow函数并不会报错，而是只接收第一个参数
p2 = pow.call(null, 4);
// p2 = 16, call函数的参数只需按顺序就可，但apply()则必须组成数值类型
p2 = pow.call(null, 2，3, 4);
// p2 = 4;

如果调用的函数更复杂，比如数组示例的方法Array.prototype.map()函数，使用apply和call调用比较容易出错，
但是记住上面的要点也就很简单了，虽然数组可以直接使用map()，这里用apply()和call()来举例:

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var r = [].map.call(arr, [pow]);
// r = [1, 4, 9, 16, 25, 36, 49, 64, 81]
//arr为map函数要绑定的对象或变量，pow是要传入map的函数参数，但是用apply调用需要构成数组[pow]
r = [].map.call(arr,pow);
// r = [1, 4, 9, 16, 25, 36, 49, 64, 81]

在js中还有一个方法可以改变上下文，就是bind()函数

bind()一般在被调用前或者函数定义时使用：

var obj = {
 foo: function() {
    console.log(this);
    }
};
obj.foo();
//输出Object {foo: function}，this上下文指向obj对象
var bar = obj.foo.bind(window);	//bind绑定window对象，并返回绑定后的函数，不改变原函数
bar();
//输出window对象，this上下文已经指向window

还有更复杂的，使用多层嵌套时对this上下文的灵活使用：

var objInner;	//先声明全局变量，以便后面使用
var objOutter = {
    foo: function() {
        console.log(this);
        objInner = {
            bar: function() {
                console.log(this);
            }
        };
    }
}; 
//先定义一个简单的嵌套，调用一遍，查看输出
objOutter.foo();
//输出 objOutter 对象，并完成 objInner 的初始化
objInner.bar();
//输出 objInner 对象
/*上面是正常情况下对this上下文的使用，在DOM操作中，很多时候也希望在bar()函数内使用 objOutter 对象，
而不是 objInner 对象。一般的方法是在foo函数下定义局部变量“var self = this”等类似操作，在bar下引用
self 来指向 objOutter 对象。*/
//而 bind 函数可以在函数 bar 定义时就调用执行，将 bar 内的 this 上下文直接绑定成自己想要绑定的任意对象，如：
 objOutter = {
    foo: function() {
        console.log(this);
        objInner = {
            bar: function() {
                console.log(this);
            }.bind(this)	/*绑定 bar 函数内的 this 上下文为当前（函数定义时）的this上下文对象，即 objOutter。
            bind()可以绑定其它对象，bind(window) 即 window 对象，等等*/
        };
    }
}; 

以上只是用法说明，具体使用时可以结合函数的特性，灵活运用不同的方法，以达到简化代码，提高效率等不同目的