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);