JavaScript中的bind,call和apply函数的用法和区别

一直没怎么使用过JavaScript中的bind,call和apply, 今天看到一篇比较好的文章，以为讲的比较透彻,因此记录和总结以下

首先要理解的第一个概念，JavaScript中函数调用的方式，总结下来，有如下4种

1. 方法调用

2. 正常函数调用

3. 构造器函数调用

4. apply/call 调用

要明白的第2个概念, JavaScript 中的函数，不管是上面哪一种函数调用方式，除了你函数声明时定义的形参外,还会自动给函数添加两个形参,分别是this 和 arguments

要明白的第3个概念,  Javascript中的函数，存在函数上下文(context) 这么一个概念, 而函数上下文又存在【定义时上下文】,【运行时上下文】,【上下文是能够改变的】这样子的状况, 而第2个概念中的this, 指向的就是当前函数中的上下文

要明白的第4个概念, 也是咱们今天在这里要讲的call, apply函数的目的 => 它们在JavaScript函数中存在的目的,就是为了改变某个函数运行时的上下文(context)而存在的, 换句话说，是为了改变函数体内部this的指向

 

如今咱们一个一个来看

1. 方法调用函数的方式

应该能够理解，所谓方法调用函数的方式，就是说把一个函数定义为一个对象的方法，而后经过调用这个对象的该方法，来达到调用该函数的目的

直接上代码

 

var myValue = {

     para: 5,
     setFunc: function(xvalue){

         this.para = xvalue;

      }
}

myValue.setFunc(0);

 

在这里，函数setFunc做为变量myValue的也给方法存在，因此使用myValue.setFunc()的形式就能够调用它。在这里，函数setFunc中的this,绑定的上下文就是myValue, 因此this.para取到的就是对象myValue的para属性

2.  正常函数调用

function setValue(xvalue)
{
    this.para = xvalue;
}

setValue(5);

 上面，咱们正常的定义了一个函数setValue,而后正常的调用setValue(5).  在这里，函数setValue里面的this绑定的是全局对象. 若是这段JavaScript代码是运行在浏览器中，那么这里的this指向的就是浏览器的全局对象window. 因此这里this.para 等价于 window.para. 那有人确定会很奇怪，若是当前浏览器的window中不存在para属性呢，那么这个时候，在这里，javascript会自动给全局对象window加上para属性,同时在这里赋值为5

3. 构造器函数调用

JavaScript 中的构造函数，你们知道，首先做为构造函数的函数名首字母须要大写，在函数内部必须有this关键字。 咱们来看一下构造函数的调用

function SetValue(xvalue)
{
     this.para = xvalue;
}

var myFunc = new SetValue(5);

在这里，SetValue函数不是一个普通函数，它是一个构造函数, 调用它是使用new 关键字来生成一个新的对象myFunc, 在这里，this绑定的上下文就再也不是window对象了，而是新的对象myFunc

因此  console.log(myFunc.para)  // 输出5

4. apply/call 来调用函数

 咱们能够看到，上面三种函数调用方式，this指向都不同，可是咱们程序员都没法自定义或者说更改this的绑定指向。 那么，若是咱们须要在程序中本身指定this的绑定上下文，有没用方法呢。这就是apply/call的用处了

JavaScript 中全部函数都有一个公共的prototype => Function, 而Function 这个原型自带了很多的属性和方法，其中就有apply, call, bind方法。 咱们首先来看看apply 和 call方法

apply => 当一个对象没有某个方法时，但这个方法在其余地方存在。可能使用这个方法的apply方法，把这个方法运用到这个对象上。 它有两个参数 apply(thisObj, [arg1,arg2,arg3...])

               第1个参数是传递给这个函数用来绑定this的值(指定这里this所绑定的上下文是哪个)

                第2个参数是一个数组

咱们直接上代码，来看一个例子

 

function setValue(xvalue)
{
    this.para = xvalue;
}

var applyObj = {};

setValue.apply(applyObj,[10]);

alert(setValue.para); // undefined
alert(applyObj.para);  //10

能够看到，刚开始对象applyObj是咱们定义的一个空对象，而后经过函数原型默认持有的apply方法，咱们把函数setValue经过apply方法应用到空对象applyObj上去，使得对象applyObj拥有了setValue方法，同时，经过第一个参数，指定this所绑定的当前上下文是applyObj对象，传入的参数为10

call 方法和apply方法几乎没有区别，惟一的区别是, 它的第二个参数不是以数组的形式，而是经过逗号来列出参数的形式   call(thisObj,arg1,arg2,arg3...)  咱们直接来看代码

function addValue(xvalue, yvalue)
{
    this.para = xvalue + yvalue;
}

var applyObj = {};

addValue.call(applyObj,2,3);

alert(addValue.para); // undefined
alert(applyObj.para);  //5

固然, 若是在call 或者apply方法中，你传入的第一个参数是null, 那么在这种状况下，函数中的this 指向的依然会是全局对象window

而后，咱们来看一看bind

bind的功能和上面同样，它接受的参数和call同样. 惟一的区别是，函数使用bind方法后会生成一个新的函数，你想何时调用新的函数，就何时调用. 咱们来看一个例子

var myObj = {    
    "x" : 4
};
function addValue(y) {    
    alert(this.x + y);
}
addValue.apply(myObj, [5]);
addValue.call(myObj, 5);
var foo1 = addValue.bind(myObj, 5);
foo1();