如何縮小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有這個臭蟲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處理程序中仔細編寫代碼，以確保使用的是先前設置的適當值。

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

this在Javascript是由函數是如何調用，並在ES5設置為一個新值在每一個函數調用（在ES6箭頭功能是一個例外）設置。 因此，在mousedown處理程序內部，將通過調用此方法的方式進行設置。 還有的是，各種方式的概述this是在設置這個答案 。