javascript中call、apply、bind方法的使用

javascript中call、apply、bind方法的使用

context的概念

在知道我们为什么要使用call、apply、bind方法之前，我觉得有必要先了解一下context的相关概念，通常context的作用是取决于函数将如何被调用，当函数作为对象的方法调用时，this就会被设置为调用方法的对象：

var object = {
       foo: function(){
           console.log(this === object);
       }
   };

   object.foo(); // true

当通过new一个对象的实例的方式来调用一个函数的时候，this的值将被设置为新创建的实例：

function foo(){
      console.log(this);
  }

  foo() // window
  new foo() // foo{}

当作为未绑定对象被调用时，this默认指向全局上下文或者浏览器中的window对象。然而，如果函数在严格模式下被执行，上下文将被默认为undefined

动态改变this的值

然而call、apply、bind方法允许你在自定义的context中执行函数，什么意思呢，通俗的说就是可以不遵循上面给出的部分定义，可以动态的改变this，我们直接引出MDN关于call方法的定义：

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)

举个例子：

// 非严格模式下
function add(args) {
        console.log(this);
    }
    function sub(args) {
        console.log(this);
    }
    add(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
    sub(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}

结果是符合预期的：

当作为未绑定对象被调用时，this默认指向全局上下文或者浏览器中的window对象

我们给他加上call方法：

// 非严格模式下
 function add(args) {
        console.log(this);
    }
    function sub(args) {
        console.log(this);
    }
    add(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
    sub(); // Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
    add.call(sub,1); // ƒ sub(args) { ... }
    sub.call(add,1); // ƒ add(args) { ... }

这时候this的值有点类似于第一种情况：

当函数作为对象的方法调用时，this就会被设置为调用方法的对象

看起来我们调用call方法的时候好像实际上是进行了对象方法的调用：

sub.call(add,1);  //sub
=>
var sub = {
    add: function(){
        console.log(this);
    }
};
sub.add(); // sub

这就是动态的改变了this

还有一点要注意的是，这里call和apply方法第一个参数的this值并不一定是该函数执行时真正的this值，比如在非严格模式下，我们传入 null 或 undefined 会自动指向全局对象，在浏览器环境中就是 window ，在node环境中就是 global ，另外我们还可以传入一些原始值(数字，字符串，布尔值)，这时候的this会指向这些原始值的包装对象，比如传入的是数字，会指向Number。

call和apply的区别

既然call和apply方法能够动态的改变this的值，我们可以利用这个特性来实现简单的继承，比如此时我们有一个父构造函数：

function Product(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log(this.name+"is"+this.age+"years old");
        }
    }

如果我们想写一个子构造函数，只需要在子构造函数里面调用父构造函数的call方法就可以实现继承：

function Toy(name, price) {
        Product.call(this, name, price);
        this.self = "single";
    }

实现继承的同时父子构造函数还都能分别有自己的属性，比如这里的self属性。

这里使用了call方法作为演示，其实apply方法的使用和call方法并无多大区别，重点在参数上，他们的第一个参数都是一个指定的this值，这个值可以是任意js对象，但是第二个参数有区别，call方法接受的是若干个参数的列表，而apply方法接受的是一个包含多个参数的数组，如果上面的例子用apply来写的话就是这样：

function Product(name, age) {
        this.name = name;
        this.age = age;
        this.say = function() {
            console.log(this.name+"is"+this.age+"years old");
        }
    }

    function Toy(name, price) {
        Product.apply(this, [name, price]);
        this.self = "single";
    }

bind方法的特殊性

之所以把bind方法单独放出来是因为bind方法和前面两者还是有不小的区别的，虽然都是动态改变this的值，举个例子：

var obj = {
     x: 81,
 };

 var foo = {
     getX: function() {
         return this.x;
     }
 }
 console.log(foo.getX.bind(obj)());  //81
 console.log(foo.getX.call(obj));    //81
 console.log(foo.getX.apply(obj));   //81

有没有注意到使用bind方法时候后面还要多加上一对括号，因为使用bind只是返回了对应函数并没有立即执行，而call和apply方法是立即执行的，并且MDN还提到， 当使用new操作符调用绑定函数时指定的this参数会变无效：

var obj = {
       x: 81,
   };

   var foo = {
       getX: function() {
           return this.x;
       }
   }
   var result = foo.getX.bind(obj);
   console.log(new result());  //getX

bind方法的另一个应用是使一个函数拥有预设的初始函数，这些参数作为bind的第二个参数跟在this(或其他对象)后面，之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面：

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]