如何在Javascript中减少内部函数变量的范围?

时间:2015-09-13 18:29:19

标签: javascript module scope this

所以,我有这段代码:

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
    };
  };
})();

我希望x1y1仅限于example.test范围内。是否有任何方法可以使用this执行此操作,还是必须为example.test.x1执行某些操作?目前它们的范围是整个exampleModule,我想将其缩小到example.test

我只是在理解整个self/that = this;咒语。我知道Javascript有这个错误,this当函数中的函数引用全局作用域时,但是当上面的例子中有3个函数的时候呢?什么是this等于嵌套三个或四个函数时?

1 个答案:

答案 0 :(得分:4)

您可以使用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
    };
  };
})();

注意:这种设计模式通常充满了问题,因为这假设你总是在鼠标移动之前得到一个mousedown,显然并非总是如此。因此,您将在mousemove处理程序中仔细编写代码,以确保使用之前设置的适当值。

另外,thisexample.test的值似乎不是您想要的值,但您还没有真正包含有关该部分代码的足够信息我们要知道你的意图。

Javascript中的

this由如何调用函数设置,并在ES5中的每个函数调用中设置为新值(ES6中的箭头函数是一个例外)。因此,在您的mousedown处理程序内部,将根据此方法的调用方式进行设置。我们总结了this answer中设置this的各种方法。