什么时候需要保存this?

https://www.imooc.com/wenda/detail/312105

javascript中this什么时候可以直接调用？什么时候要把它赋值给一个变量后才能调用？

• 1) 避免多层this

    var o = {  
  
         f1: function() {    
  
             console.log(this);      
  
            var f2 = function() {      
  
                 console.log(this);    
  
             }();   
  
            }     
  
    } 
  
    o.f1()
  

  上面代码包含两层this，结果运行后，第一层指向该对象，第二层指向全局对象。一个解决方法是在第二层改用一个指向外层this的变量。

    var o = {   
  
        f1: function() {     
  
            console.log(this);      
  
            var that = this;     
  
            var f2 = function() {       
  
                console.log(that);     
  
            }();   
  
        } 
  
    } 
  
    o.f1()
  

  上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。

• 2) 避免数组处理方法中的this

  数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。

    var o = {
     v: 'hello',
     p: [ 'a1', 'a2' ],
     f: function f() {
       this.p.forEach(function (item) {
         console.log(this.v+' '+item);
       });
     }}
  
    o.f()
  

  上面代码中，foreach方法的参数函数中的this，其实是指向window对象，因此取不到o.v的值。

  解决这个问题的一种方法，是使用中间变量。

    var o = {
     v: 'hello',
     p: [ 'a1', 'a2' ],
     f: function f() {
       var that = this;
       this.p.forEach(function (item) {
         console.log(that.v+' '+item);
       });
     }}
  
    o.f()
  

  另一种方法是将this当作foreach方法的第二个参数，固定它的运行环境。

    var o = {
     v: 'hello',
     p: [ 'a1', 'a2' ],
     f: function f() {
       this.p.forEach(function (item) {
         console.log(this.v+' '+item);
       }, this);
     }}
  
    o.f()
  

• 3) 避免回调中的this

    var o = new Object();o.f = function (){
    console.log(this === o);}o.f()
  

  上面代码表示，如果调用o对象的f方法，其中的this就是指向o对象。

  但是，如果将f方法指定给某个按钮的click事件，this的指向就变了。

    $('#button').on('click', o.f);