在绑定函数中访问对象值

Question

我正在尝试创建一个对象并附加一个相应的 DOM 元素，我想将触发函数的事件绑定到该元素。我的问题是：是否可以在该绑定函数中访问对象的初始值？

function Bloc() {

    this.DOMel;
    this.ID = Math.round( Math.random() * 1000);
    this.startPosX;


    this.init = function() {
        $('#blocs-container').append( '<div class="bloc" data-id="' + this.ID + '"></div>' );

        this.DOMel = $('.bloc[data-id="' + this.ID + '"]');

        this.DOMel.bind('touchstart', function(e) {
            this.startPosX = e.originalEvent.touches[0].pageX;
        });
    }

}

例如，我想在绑定到 touchstart 事件的函数中访问和修改 this.startPosX。

可能吗？如果没有，我该如何解决？

谢谢！

Answer 1

你失去了上下文。试试这个：

this.DOMel.bind('touchstart', function(e) {
    this.startPosX = e.originalEvent.touches[0].pageX;
}.bind(this));

Answer 2

你可以利用这个：

function Bloc() {
   var self = this;

   self.startPosX;

}

然后在你的函数中调用它 self.startPosX.

Why the above works?

在变量 self 中存储函数 Bloc 的实例。当你进入你分配给 this.init 的匿名函数时，上下文发生变化并且 this 指向这个函数的实例。因此，您无权访问存储到外部上下文的变量，使用 this。但是，使用上述技巧，您可以使用 self 访问 startPosX 所在的上下文。

Answer 3

我将 this.startPosX 更改为 var startPosX 后，它也开始工作了，我猜 Christos 我解释了它工作的基本原理。此外，在我更改以下行之前，我无法让 touchstart 事件工作：

 this.DOMel.bind('touchstart', function(e) {

到

 $('.block[data-id="blocks"]').bind('touchstart', function(e) {

请注意选择器略有不同，因为我创建了一些 div 用于测试目的。一旦移动模拟器用于 touchstart 事件，Fiddle 就会工作。

在绑定函数中访问对象值

Access object value within bound function

javascript

jquery

object