我應該在局部變量中引用'this'嗎？

Question

我經常在代碼中看到：var me = this;。這是爲什麼？如果我在局部變量中引用'this'會有一些性能增益嗎？

Answer 1

如果有功能內部的功能，在這些嵌套函數，使得代碼需要訪問的this從外上下文值這是有用的。

function example() { 
    var me = this; 
    document.getElementById('whatever').onclick = function() { 
    me.clicked = 1; 
    }; 
} 

由於this建立重新用於每個函數調用，而不積攢在可變外this那裏會是沒有辦法從內功能引用它。

Answer 2

這是用來保存對this的引用。後面的代碼中有一個帶回調的AJAX調用（例如）。所以，在那個回調裏面this跟外面是不一樣的。這就是爲什麼人們將「外部」this備份到一個變量。

我個人喜歡用這種形式：

var that = this; 

看起來很滑稽:)

順便說一句，CoffeeScript，這是一種「JavaScript的做對」，有此作爲修復好。

它有兩種形式的功能定義，細箭頭和胖箭頭。細箭頭的行爲與JavaScript完全相同，胖箭頭自動將this綁定到來自外部上下文的值。

所以，這CoffeeScript的

Account = (customer, cart) -> # thin arrow 
    @customer = customer 
    @cart = cart 

    $('.shopping_cart').bind 'click', (event) => # fat arrow 
    @customer.purchase @cart 

被轉化爲這個JavaScript

var Account; 
Account = function(customer, cart) { 
    var _this = this; 
    this.customer = customer; 
    this.cart = cart; 
    return $('.shopping_cart').bind('click', function(event) { 
    return _this.customer.purchase(_this.cart); 
    }); 
}; 

酷，不是嗎？

Answer 3

這樣，當this發生變化時，您仍然可以在需要的代碼處參考this。

Answer 4

IMO這是不尋常的，你會看到它自己 - 這是一個幾乎總是在關閉時使用的構造，以避免JS處理this值，在執行期間評估，而不是聲明。

Answer 5

這通常用於回調方法，其中回調運行時範圍會有所不同。

實施例：

var me = this; 
$.getJSON(url, function(data) { 
    // here "this" will be "window", so "me" is used to access the object 
}) 

Answer 6

即用於閉合範圍。看看這兩個jQuery插件的區別：

$.fn.blinkClosure = function() { 
    var jQueryMonad = this, toggleClass = this.toggleClass; 
    setInterval(function() { 
     toggleClass.apply(jQueryMonad, ['invisible']); 
    }, 500); 
}; 

問題出在setInterval。當setInterval中的函數被調用時，它會啓動一個新的執行鏈，並且該鏈中的this綁定到window。在封閉的例子中，我們保留了一個引用我們將插件應用於jQueryMonad（或代碼中的me）的jQuery對象。這樣，我們可以保持我們的範圍正確的JavaScript。

$.fn.blink = function() { 
    setInterval($.proxy(function() { 
     this.toggleClass('invisible'); 
    }, this), 500); 
}; 

在第二個例子中，jQuery.proxy處理，對你。

這是爲了解決JavaScript在執行時綁定this而不是創建時間的問題。

Answer 7

通常的原因是代碼包含一個稍後會被調用的閉包，作者想要確保閉包有權訪問當前的this。例如：

這裏的代碼，人們經常寫正確，就像這樣：

var obj = { 
    name: "Fred", 
    foo: function() { 
     setTimeout(function() { 
      alert(this.name); // <=== Fails, `this` is no longer `obj` 
     }, 1000); 
    } 
}; 
obj.foo(); 

下面是適用於它var me = this;：

var obj = { 
    name: "Fred", 
    foo: function() { 
     var me = this; 
     setTimeout(function() { 
      alert(me.name); // <=== Works now 
     }, 1000); 
    } 
}; 
obj.foo(); 

這都有關，因爲在JavaScript中，this完全被定義如何調用函數，而不是函數的定義。

更多閱讀（披露：都是鏈接到我的博客）：

• You must remember this
• Closures are not complicated

Answer 8

它用於內部函數。如你所知，你可以在對象構造函數中使用函數，並且函數內部可以有函數。如果你看到下面的代碼。

function Circle(radius){ 
this.radius=radius; 
this.getArea=function(){ 
        var changeRadius=function(){ 
          this.radius=20; //here this points to global 
         } 
        changeRadius(); 
        return Math.PI*Math.pow(this.radius, 2); 
        } 
} 

var cd= new Circle(10); 
console.log(cd.getArea()); 

當你調用的getArea（），您將根據半徑10.雖然你調用changeRadius（），但內部功能changeRadius裏面，這開始指向全局對象，而不是您所創建的對象獲取區域。你可以使用var self=this construct來解決這個問題。

所以爲了解決這種情況，我們可以進行以下更改。

function Circle(radius){ 
var self=this; 
this.radius=radius; 
this.getArea=function(){ 
        var changeRadius=function(){ 
          self.radius=20; 
         } 
        changeRadius(); 
        return Math.PI*Math.pow(this.radius, 2); 
        } 
} 

var cd= new Circle(10); 
console.log(cd.getArea());