知道了js中的this的具体用法之后，感觉还是总结一下bind call apply的使用吧,算是一个知识整合的过程嘿嘿~~
这三个堪称js中的神器，可以改变this的指向，实现函数的“借用”。毕竟js还是挺闷骚的，动不动就出现函数执行环境的改变，所以我们需要强行把this的指向重新掰过来，这个时候就需要用到这个神器了。
- bind 的使用；
- call和apply的使用；
- apply的一点使用小技巧（参数为数组，好好利用）
js中的this很重要（可以先看一下这一篇）：http://www.jianshu.com/p/adaf787a0d4d#
bind
1 bind 可以设置函数调用的this指向
var user = {
data :[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
clickHandler:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1
//随机生成一个数，来调用data
$ ("input").val (this.data[randomNum].name + " " + this.data[randomNum].age);
}
}
// 给按钮添加点击事件
$ ("button").click (user.clickHandler);
如果看过前面的this的文章，应该知道这样调用，其实this不再指向user，而是指向 $ ("button").。所以可以借用bind更改；
$ ("button").click (user.clickHandler);
更改如下(此时this就重新指向了user了)
$ ("button").click (user.clickHandler.bind (user));
2 bind可以借用函数
var user = {
// local data variable
data :[
{name:"T. Woods", age:37},
{name:"P. Mickelson", age:43}
],
showData:function (event) {
var randomNum = ((Math.random () * 2 | 0) + 1) - 1; // random number between 0 and 1
console.log (this.data[randomNum].name + " " + this.data[randomNum].age);
}
}
var cars = {
data:[
{name:"Honda Accord", age:14},
{name:"Tesla Model S", age:2}
]
}
// 我们可以借用我们这个例子中user的方法
//现在我们可以使用bind来将this的指向更改为cars，函数将会调用里面的方法
cars.showData = user.showData.bind (cars);
cars.showData (); // Honda Accord 14
2 call 和 apply的使用
相同点：
call和apply都可以修改this的指向，第一个参数是要引用的对象，第二个参数是要传进函数的变量不同点：
call的变量参数是一个个参数；
apply的变量参数是数组；
call和bind 都可以设置 this
// 设置一个全局变量
var avgScore = "global avgScore";
//全局函数
function avg (arrayOfScores) {
// 添加所有的分数并返回总数
var sumOfScores = arrayOfScores.reduce (function (prev, cur, index, array) {
return prev + cur;
});
// 这里的this指向的是全局global除非我们用call将其进行更改
this.avgScore = sumOfScores / arrayOfScores.length;
}
var gameController = {
scores :[20, 34, 55, 46, 77],
avgScore:null
}
// 这样执行的话，this就是指向全局的window
avg (gameController.scores);
// 以下的输出可以证明this是指向全局的this的，后面的还是输出null
console.log (window.avgScore); // 46.4
console.log (gameController.avgScore); // null
// reset the global avgScore
avgScore = "global avgScore";
//设置this值，此时this就绑定给了gameController
// 使用call方法
avg.call (gameController, gameController.scores);
console.log (window.avgScore); //global avgScore
console.log (gameController.avgScore); // 46.4
还有一点，就是可以用这两个方法来调用 Array的一些自带的方法，我们都知道js里有一些神奇的变量，就是 类数组.格式上很像数组，但是没有数组的一些基本方法。slice 等方法。
这个时候，我们可以通过 call apply 的方法，来借用Array.prototype的方法。
看个栗子吧。
类数组：
//这是类数组的定义方法，需要给定一个lenth的属性来表示该数组的长度才有效。
var anArrayLikeObj = {0:"Martin", 1:78, 2:67, 3:["Letta", "Marieta", "Pauline"], length:4 };
现在这个变量是没有数组中的原生方法的，那么怎么去调用呢？这个时候就可以用call和bind了
Array.prototype是数组的原型，数组的基本方法都是从原型继承而来。
var newArray = Array.prototype.slice.call (anArrayLikeObj, 0);
console.log (newArray); // ["Martin", 78, 67, Array[3]]
// 可以使用数组中的indexOf方法，来查找对应的元素
console.log (Array.prototype.indexOf.call (anArrayLikeObj, "Martin") === -1 ? false : true); // true
// 不要使用call试一下，发现报错了，因为没有该方法
console.log (anArrayLikeObj.indexOf ("Martin") === -1 ? false : true); // Error: Object has no method 'indexOf'
// 反转
console.log (Array.prototype.reverse.call (anArrayLikeObj));
// {0: Array[3], 1: 67, 2: 78, 3: "Martin", length: 4}
// 太棒了，我们还可以使用pop方法
console.log (Array.prototype.pop.call (anArrayLikeObj));
console.log (anArrayLikeObj); // {0: Array[3], 1: 67, 2: 78, length: 3}
// 再试一下push
console.log (Array.prototype.push.call (anArrayLikeObj, "Jackie"));
console.log (anArrayLikeObj); // {0: Array[3], 1: 67, 2: 78, 3: "Jackie", length: 4}
那再来一个，我们都知道，传入function的变量是一个类数组，叫
arguments .我们可以用相关的函数对传入的参数进行操作。
// 我们没有设置参数的数目，可以对参数进行操作。
function doSomething () {
var args = Array.prototype.slice.call (arguments);
console.log (args);
}
doSomething ("Water", "Salt", "Glue"); // ["Water", "Salt", "Glue"]
灵活应用apply的参数为数组的属性，因为apply的参数是数组，所以特别适用于可变函数的应用。就是函数的参数不固定的情况下；
当我们传入一个数组的时候，其实函数会像这样去执行函数,将数组中的一个个变量传入；
createAccount (arrayOfItems[0], arrayOfItems[1], arrayOfItems[2], arrayOfItems[3]);
Math.max() 就是一个可变参数函数；
console.log (Math.max (23, 11, 34, 56)); // 56
但是我们不能把数组传给Math.max() ；
var allNumbers = [23, 11, 34, 56];
//我们不能把数组传给该方法
console.log (Math.max (allNumbers)); // NaN
可以这么做；
var allNumbers = [23, 11, 34, 56];
//使用apply方法，我们可以传递数组给该方法
console.log (Math.max.apply (null, allNumbers)); // 56
因为不需要更改this的指向，所以可以把第一个参数设置成null。
####最后的最后，我们再来理一理；先看一下这个例子；
看看apply和call的真正区别；
//下面两种方法其实就是等同的；
var s1 = ["lili","小明"，"小红","彤彤"]
function welcomeStudents () {
console.log(arguments)
}
welcomeStudents.call(null, "lili","小明"，"小红","彤彤");
welcomeStudents.apply(null, s1);
那我们可以有什么应用场景呢？apply的参数是数组，其实可以做很多的事情，我们不用像使用call那样，一个一个的传入参数，只需要将参数存放在一个数组里就可以。
如果现在让你定义一个welcome的函数，该函数的作用是对输入的名字，做一定的操作；
>像输入 var s1 = ["lili","小明"，"小红","彤彤"]，可以相对应的输出.
```欢迎 lili,小明，小红和彤彤。```
你会怎么做呢？
var students = ["lili","小明"，"小红","彤彤"];
// 我们没有设置参数，因为参数的长度没有被限制
function welcomeStudents () {
var args = Array.prototype.slice.call (arguments);
var lastItem = args.pop ();
console.log ("欢迎" + args.join (", ") + ", 和 " + lastItem + ".");
}
welcomeStudents.apply (null, students);
// 欢迎 lili,小明，小红和彤彤。
//如果你一定要用call方法，那你就得这么做；
welcomeStudents.call (null, "lili","小明"，"小红","彤彤");
最后的最后，细心的你也应该会发现，这三个还有一点点区别就是，bind不是立即执行的，call和apply的使用则是立即执行的；
可以回去看看前面我提到的bind 的那个例子，绑定按钮的点击事件的时候，使用bind来绑定user，因为事件是在点击之后才触发，所以这个时候用bind会比较好。使用call和apply的话，则在还没有点击的时候就执行了。
$ ("button").click (user.clickHandler.bind (user));
//平时我们定义的时候，也是只写函数名的，$ ("button").click (函数名);而不是$ ("button").click (函数名（）);
总结一下吧：
- call apply 立即执行函数，apply的参数是数组，call的参数是参数变量
- bind 返回函数名，非立即执行
showData = user.showData.bind (cars);
cars.showData ();
等效于：
user.showData.call (cars);
user.showData.apply(cars);
>啊，原来整理知识这么不容易；休息会了；今天在咖啡厅呆了一天了，五一还是不想出去呀，