Question

function(){
"use strict";

var FileCrop = function() {
    this.init();
};

var p = FileCrop.prototype = lx.BaseClass.extend(lx.BaseClass);
p.BaseClass_init = p.init;


p.test = 'test';

p.init = function() {
    // Super
    this.BaseClass_init();
    // Init
    this.ready();

};

p.ready = function() {

    this._initEvents();

};
p._initEvents = function() {
    console.log(this.test); //this works

    this.cropBox.on('mousedown', this.mouseDown);
    $(document).on('mouseup', this.mouseUp);

};

p.mouseDown = function(e) {

console.log(this.test);//this is undefined
    $(document).on('mousemove', this.mouseMove);


};

 p.mouseMove = function(e) {
     console.log('mouse is moving'); //this is never called
 };


lx.FileCrop = FileCrop;
}(window));

我在范围和班级方面遇到了麻烦。

如果有人能向我解释我做错了什么，那就太好了。我试图在整个类中获取测试变量（在真正的类中它是其他东西，但这给出了一个易于理解的例子）。

我已经对上面的代码进行了评论，其中test var记录正常，而不是。鼠标移动也遇到了麻烦。这失败了：

$(document).on('mousemove', this.mouseMove);

虽然这有效：

$(document).on('mousemove', p.mouseMove);

我只是想知道为什么会这样，因为我可以在鼠标按下时使用'this'并且它可以工作。

Answer 1

您需要明确确保在事件处理程序中使用的this值是对对象的引用。当您使用this.mouseDown之类的表达式时，这不会自动发生。这将为您提供对该函数的引用，但不保留与this引用的对象的关系。

在现代JavaScript环境中执行此操作的一种简单方法是

  this.cropBox.on('mousedown', this.mouseDown.bind(this));

.bind()函数返回另一个函数，它将调用最初所需的函数（“mouseDown”函数），其值this保证是您通过参数请求的函数。

类中的变量范围

1 个答案: