如何減少Javascript中的內部函數變量的範圍？

Question

所以，我有這樣的代碼：

var exampleModule = (function() { 
    var example = {}; 

    var self = this; 

    example.test = function() { 
    this.mousedown = function (e) { 
     self.x1 = e.offsetX; 
     self.y1 = e.offsetY; 
    }; 

    this.mousemove = function(e) { 
     // do something with x1 and y1 and e.offsetX and e.offsetY 
    }; 
    }; 
})(); 

我想有x1和y1只能example.test內作用域。有沒有辦法做到這一點this或我必須做一些像example.test.x1爲每一個？目前他們的範圍是整個exampleModule，我想把它縮小到只有example.test。

我只是有點理解整個self/that = this;口頭禪。我知道Javascript有這個bug，其中this當一個函數中的某個函數引用全局範圍時，但是當上面的例子中有3個函數時什麼時候？什麼是this等於嵌套三個或四個功能下來？

Answer 1

您可以使用您已經擁有的example.test()功能的中間範圍和存儲的變量有：

var exampleModule = (function() { 
    var example = {}; 

    var self = this; 

    example.test = function() { 
    var x1, y1; 
    this.mousedown = function (e) { 
     x1 = e.offsetX; 
     y1 = e.offsetY; 
    }; 

    this.mousemove = function(e) { 
     // do something with x1 and y1 and e.offsetX and e.offsetY 
    }; 
    }; 
})(); 

注：這種設計模式是常有的問題，充滿因爲這假定之前，你總是會得到一個鼠標按下一個鼠標移動，顯然並非總是如此。因此，您將在mousemove處理程序中仔細地編寫代碼，以確保您使用的是之前設置的適當值。

另外，它看起來並不像在example.testthis值可能是你希望它是什麼，而是你還沒有真正納入你的那部分代碼足夠的信息讓我們知道你的意圖是什麼。

this在Javascript中是通過調用函數的方式來設置的，並且在ES5中的每個函數調用中都設置了一個新值（ES6中的箭頭函數是一個例外）。所以，在你的mousedown處理程序中，它將由如何調用這個方法來設置。總結了this在this answer中設置的各種方式。