this 、call与apply的使用

this

js 的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的环境动态绑定的，而非函数被声明时的环境

this的指向

除去with和eval情况，this的指向大致分为以下4种

• 作为对象的方法调用
• 作为普通函数调用
• 构造器调用
• call和apply调用

1. 作为对象的方法调用，this指向该对象

   var obj = {
       a:1,
       getA：function(){
           alert:(this === obj)//输出 true
           alert:(this.a)//输出 1
       }
   }
   

2. 作为普通函数调用，此时this指向全局，如在浏览器中指向window对象

   window.name = 'globalName'
   
   var myObject = {
       name:'obj',
       getName:function(){
           console.log(this.name)
       }
   }
   var getName = myObject.getName
   getName() // 输出globalName，即全局。
   

3. 构造器调用:通常情况下，构造器里的this指向new返回的对象

   如果构造器显式的返回一个object对象，this会指向显式返回的对象

4. call与apply，可以动态地改变传入函数的this。call和apply很好的体现了js的函数式语言特性。

call和apply的区别

1. apply和call接收的第一个参数都指定函数体内this的指向。

2. 第二个参数，apply接收一个数组或类数组，call从第二个参数开始，每个参数都被依次传入函数作为参数。

3. 如果第一个参数为null，函数体内的this指向默认的宿主对象，即window等

4. 有时候我们使用 call 或者 apply 的目的不在于指定 this 指向，而是另有用途，比如借用其他对象的方法。那么我们可以传入 null 来代替某个具体的对象：

   Math.max.apply( null, [ 1, 2, 5, 3, 4 ] ) // 输出：5
   

call和apply的用途

1. 改变函数内部this的指向

   在实际开发中，经常会遇到 this 指向被不经意改变的场景，比如有一个 div 节点，div 节点的 onclick 事件中的 this 本来是指向这个 div 的：

   document.getElementById( 'div1' ).onclick = function(){ 
    alert( this.id ); // 输出：div1 
   };
   

   假如该事件函数中有一个内部函数 func，在事件内部调用 func 函数时，func 函数体内的 this就指向了 window，而不是我们预期的 div，见如下代码：

   document.getElementById( 'div1' ).onclick = function(){ 
    alert( this.id ); // 输出：div1 
    var func = function(){ 
    alert ( this.id ); // 输出：undefined 
    } 
    func(); 
   };
   

   这时候我们用 call 来修正 func 函数内的 this，使其依然指向 div：

   document.getElementById( 'div1' ).onclick = function(){ 
    var func = function(){ 
    alert ( this.id ); // 输出：div1 
    } 
    func.call( this ); 
   };
   

2. Function.prototype.bind:用于指定函数内部this指向

3. 借用其他对象的方法

   • 借用构造函数，实现类似继承的效果

     var A = function( name ){ 
       this.name = name; 
     }; 
     var B = function(){ 
       A.apply( this, arguments ); 
     }; 
     B.prototype.getName = function(){ 
       return this.name; 
     }; 
     var b = new B( 'sven' ); 
     console.log( b.getName() ); // 输出： 'sven'
     

   • arguments借用数数组的方法

     在操作 arguments 的时候，我们经常非常频繁地找 Array.prototype.push 对象借用方法。

     可以借用Array.prototype方法的对象需要满足以下两个条件

     • 对象本身要可以存储属性
     • 对象的length属性可读写