如何减少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中设置的各种方式。