call apply bind

为什么要使用call,apply,bind

　　先看一个普通的对象：

var obj = {};
obj.name = "多啦A梦";
obj.say = function(){
    console.log("大雄你好我是"+this.name);
}
obj.say();//大雄你好我是多啦A梦

　　我们对上面的函数做一些调整：

var obj = {};
obj.name = "多啦A梦";
obj.say = function(){
    console.log("大雄你好我是"+this.name);
}
var fn = obj.say;
fn();//大雄你好我是

 　　这个时候不会再输出“大雄你好我是多啦A梦”因为在第二个例子中this已经不是obj而变成了window而window中并没有name属性。

　　 为了能够达到预期的结果，我们可以使用call,apply或者bind来改变函数执行时this的指向：

var obj = {};
obj.name = "多啦A梦";
obj.say = function(){
    console.log("大雄你好我是"+this.name);
}
var fn = obj.say;
fn.call(obj);//大雄你好我是多啦A梦

　　在我们平时的开发中要充分利用call,apply,bind，这三个函数都可以改变函数运行时this的指向，当时他们也有一些不同，call和apply会立即执行函数，bind则是创建一个新的函数，更改新函数的this的指向。

call,apply

　　首先call和apply在我们平时的开发中有两个妙用：

　　Array.prototype.slice.call(obj)-->obj是一个类数组，通过这个函数可以把类数组转换成一个真正的数组(参数位置就是类数组)。

　　Object.prototype.toString.call(arg)-->arg可以是任意一种类型的值，这个函数最精确的判断出参数的类型。

　　call,apply在使用时会修正函数运行时this的指向，并且会立即执行函数。在只接受一个参数时两个函数的使用方式是一样的，使用方式如下：

//call使用
var obj = {};
obj.name = "多啦A梦";
obj.say = function(){
    console.log("大雄你好我是"+this.name);
}
var fn = obj.say;
fn.call(obj);
//apply使用
var obj = {};
obj.name = "多啦A梦";
obj.say = function(){
    console.log("大雄你好我是"+this.name);
}
var fn = obj.say;
fn.apply(obj);

　　call和apply这两个函数在使用时也是有一些不同的，这个我们稍后再介绍。

bind

　　bind函数在使用是是创建一个新的函数，修改新函数运行时this的指向。

var obj = {};
obj.name = "多啦A梦";
obj.say = function(){
    console.log("大雄你好我是"+this.name);
}
var fn = obj.say.bind(obj);
fn();

　　如果函数中需要参数则把参数放在bind的第二个参数以及后。

var skin= "蓝皮肤";
var eye = "大眼睛";
var obj = {};
obj.name = "多啦A梦";
obj.say = function(skin,eye){
    console.log("大雄你好我是"+skin+eye+"的"+this.name);
}
var fn = obj.say.bind(obj,skin,eye);
fn();

call

　　call基本的使用方法我们已经知道，当call函数需要使用多个参数是和bind函数是一样的，第一个参数必须代表this的指向，如果原函数需要参数，则参数放在第二个及以后。

var skin= "蓝皮肤";
var eye = "大眼睛";
var obj = {};
obj.name = "多啦A梦";
obj.say = function(skin,eye){
    console.log("大雄你好我是"+skin+eye+"的"+this.name);
}
var fn = obj.say;
fn.call(obj,skin,eye);

apply

　　apply函数最多可以接收两个参数，第一个参数表示this的指向，第二个参数必须是一个数组或者类数组，数组的每一个元素表示原函数需要使用的参数

var skin= "蓝皮肤";
var eye = "大眼睛";
var obj = {};
obj.name = "多啦A梦";
obj.say = function(skin,eye){
    console.log("大雄你好我是"+skin+eye+"的"+this.name);
}
var fn = obj.say;
fn.apply(obj,[skin,eye]);

　　apply在我们不确定参数的个数时会变得非常有用，比如我们简化console.log函数我们可以这样：

function print(arg){
    console.log(arg);
}
print("hello");
//console.log是可以接收多个参数的所以为了更加符合console.log函数的特性我们可以稍加改造
function print(){
    console.log.apply(this,arguments);
}
print("hello",1,true);