深入浅出：了解JavaScript中的call,apply,bind的差别

在 javascript之 this 关键字详解文章中，谈及了如下内容，做一个简单的回顾：

1.this对象的涵义就是指向当前对象中的属性和方法。

2.this指向的可变性。当在全局作用域时，this指向全局；当在某个对象中使用this时，this指向该对象；当把某个对象的方法赋值给
另外一个对象时，this会指向后一个对象。

3.this的使用场合有：在全局环境中使用；在构造函数中使用，在对象的方法中使用。

4.this的使用注意点，最重要的一点就是要避免多层嵌套使用this对象。

对this关键字有了稍稍了解便知道，this对象指向会经常改变的，这会造成一些意想不到的影响。JavaScript提供了call、apply、bind
这三个方法，来切换/固定this的指向。

下面的主要划分：

1.call/apply/bind方法的来源

2.Function.prototype.call

3.Function.prototype.apply

3.1：找出数组中的最大数

3.2：将数组的空元素变为undefined

3.3：转换类似数组的对象

4.Function.prototype.bind

5.绑定回调函数的对象

6.call，apply，bind方法的联系和区别

1.call/apply/bind方法的来源

首先，在使用call，apply，bind方法时，我们有必要知道这三个方法究竟是来自哪里？为什么可以使用的到这三个方法？

call，apply，bind这三个方法其实都是继承自Function.prototype中的，属于实例方法。

 
    
 
console.log(Function.prototype.hasOwnProperty('call'))//true
 
  console. 
  log( 
  Function. 
  prototype. 
  hasOwnProperty( 
  'apply')) 
  //true  
 
 
  console. 
  log( 
  Function. 
  prototype. 
  hasOwnProperty( 
  'bind')) 
  //true 
 

上面代码中，都返回了true，表明三种方法都是继承自Function.prototype的。当然，普通的对象，函数，数组都继承了Function.prototype对象中的三个方法，所以这三个方法都可以在对象，数组，函数中使用。
关于继承，可以看一下这里：https://www.cnblogs.com/yunshangwuyou/p/9277000.html

2.Function.prototype.call

函数实例的call方法，可以指定该函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。并且会立即执行该函数。

 
  var 
  keith = { 
  rascal: 
  123 }; 
 
 
  var 
  rascal = 
  456; 
 
 
  function 
  a(){ 
  console. 
  log( 
  this. 
  rascal); } 
  //456 
 
 
  a. 
  call; 
  //456  
 
 
  a. 
  call( 
  null); 
  //456 
 
 
  a. 
  call( 
  undefined); 
  //456 
 
 
  a. 
  call( 
  this); 
  //456 
 
 
  a. 
  call( 
  keith); 
  //123 
 
 
  /* a函数中的this关键字，如果指向全局对象，返回结果为456。可以看到，如果call方法没有参数， 
 
 
   或者参数为null或undefined或者this，则等同于指向全局对象。如果使用call方法将this关键字 
 
 
   指向keith对象，也就是将该函数执行时所在的作用域为keith对象，返回结果为123。*/ 
 

call方法可以传递两个参数。第一个参数是指定函数内部中this的指向（也就是函数执行时所在的作用域），第二个参数是函数调用时需要传递的参数。

深入浅出：了解JavaScript中的call,apply,bind的差别

猜你喜欢