為什麼需要這些？主要是因為this，來看看this乾的好事。 box.onclick = function(){ function fn(){ alert(this); } fn();}; 我們原本以為這裡面的this指向的是box,然而卻是Window。一般我們這樣解決： box.onclick ...
為什麼需要這些？主要是因為this，來看看this乾的好事。
box.onclick = function(){
function fn(){
alert(this);
}
fn();
};
我們原本以為這裡面的this指向的是box,然而卻是Window。一般我們這樣解決：
box.onclick = function(){
var _this = this;
function fn(){
alert(_this);
}
fn();
};
將this保存下來。
還有一些情況，有時我們想讓偽數組也能夠調用數組的一些方法，這時call、apply、bind就派上用場了。
我們先來解決第一個問題修複this指向。
box.onclick = function(){
function fn(){
alert(this);
}
fn();
};
改成如下：
box.onclick = function(){
function fn(){
console.log(this);
}
fn.call(this);
};
很神奇吧，call的作用就是改變this的指向的，第一個傳的是一個對象，就是你要借用的那個對象。
fn.call(this);
這裡的意思是讓this去調用fn這個函數，這裡的this是box，這個沒有意見吧？如果這個你不清楚，很可能你是javscript的新朋友。box調用fn，這句話非常重要，我們知道this它始終指向一個對象，剛好box就是一個對象。那麼fn裡面的this就是box。
box.onclick = function(){
function fn(){
console.log(this);
}
fn.call(this);
};
這句話在某些情況下是可以簡寫的，比如：
box.onclick = function(){
var fn = function(){
console.log(this); //box
}.call(this);
};
或者這樣：
box.onclick = function(){
(function(){
console.log(this);
}.call(this)); //box
};
又或者這樣：
var objName = {name:'JS2016'};
var obj = {
name:'0 _ 0',
sayHello:function(){
console.log(this.name);
}.bind(objName)
};
obj.sayHello();//JS2016
call和apply、bind但是用來改變this的指向的，但也有一些小小的差別。下麵我們來看看它們的差別在哪。
function fn(a,b,c,d){
console.log(a,b,c,d);
}//call
fn.call(null,1,2,3);//apply
fn.apply(null,[1,2,3]);//bind
var f = fn.bind(null,1,2,3);
f(4);
結果如下：
1 2 3 undefined
1 2 3 undefined
1 2 3 4
前面說過第一個參數傳的是一個你要借用的對象，但這麼我們不需要，所有就傳了一個null，當然你也可以傳其他的，反正在這裡沒有用到，除了第一個參數後面的參數將作為實際參數傳入到函數中。
call就是挨個傳值，apply傳一個數組，bind也是挨個傳值，但和call和apply還有多少不同，使用call和apply會直接執行這個函數，而bind並不會而是將綁定好的this重新返回一個新函數，什麼時候調用由你自己決定。
var objName = {name:'JS2016'};
var obj = {
name:'0 _ 0',
sayHello:function(){
console.log(this.name);
}.bind(objName)
};
obj.sayHello();//JS2016
這裡也就是為什麼我要用bind的原因，如果用call的話就會報錯了。自己想想這個sayHello在obj都已經執行完了，就根本沒有sayHello這個函數了。
這幾個方法使用的好的話可以幫你解決不少問題比如：
正常情況下Math.max只能這樣用
Math.max(10,6)
但如果你想傳一個數組的話你可以用apply
var arr = [1,2,30,4,5];
console.log(Math.max.apply(null,arr));
又或者你想讓偽數組調用數組的方法
function fn(){
[].push.call(arguments,3);
console.log(arguments); //[1, 2, 3]
}
fn(1,2);
再者：
var arr = ['aaabc'];
console.log(''.indexOf.call(arr,'b')); //3
牛逼不，簡直偷梁換柱，當然還有很多可以利用的，自己盡情花輝去吧。
簡單說一下這種偷梁換柱的原理吧，實際上瀏覽器內部根本就不在乎你是誰，它只關心你傳給我的是不是我能夠運行的，如下：
正常情況
var str = 'aaabc';
console.log(str.indexOf('b'));
而這種情況其實做的事情和上面一模一樣，看我來拆解。
var arr = ['aaabc'];
''.indexOf.call(arr);
這句話就是說讓arr調用字元串的indexOf方法，前面說過了瀏覽器內部不在乎你是誰，所以誰都可以來調用，但不是100%成功，具體看如下。
''.indexOf.call(arr,'b')
這裡的arr就是['aaabc']，內部很可能拆成了'aaabc'，因此就成了下麵的這段代碼。
'aaabc'.indexOf('b');
這就是它們的秘密。
這裡得說一下bind在某些瀏覽器下不相容。我們來模擬一個玩玩。
Function.prototype.$bind = function(obj){
//保存當前this
var _this = this;
//截取除了第一個以外的所有實際參數
var a = [].slice.call(arguments,1);
//返回一個新函數
return function(){
//讓當前那個調用的函數的this指向obj，並且把實參傳給它，這裡用了concat是因為，我們可能在綁定以後還傳遞參數，所以才把他們合併起來。如f(4)這個是在綁定以後傳的參數，a這個argument是綁定時的。
_this.apply(obj,a.concat([].slice.call(arguments)));
};
};function fn(a,b,c,d){
console.log(a,b,c,d);
}var f = fn.$bind(null,1,2,3);
f(4);
這個方法和實際上的bind還是差別很大的，如
var arr = ['JSS'];var index = ''.indexOf.$bind(arr,'S');
console.log(index())------------------
function fff(){
[].push.$bind(arguments,1);
console.log(arguments);
}fff();
這些都沒法使用，因為技術有限就沒辦法帶大家封裝一個完美的bind了，如果有需要網上搜索一下吧。
結束了啊。
