0

可能重复：
Javascript 原型“this”问题

我有一个事件侦听器，它当然会调用事件的方法。此方法尝试持有对持有对象 this 的引用但未成功，以便它可以访问该对象的其他属性。

有一个注释表示行为未被理解的地方。this_hold.Name 在那里无法访问，就像我想的那样。

/*MUserExist
**
**
**
*/
$A.module({
    Name: 'MUserExist',
    S: {
        ClientStorage: SClientStorage,
        ComMessage: SComMessage,
        ComText: SComText,
        DynSma: SDynSma,
        DynTwe: SDynTwe,
        DynArc: SDynArc,
        AniMorphLabel: SAniMorphLabel,
        AniFlipPage: SAniFlipPage
    },
    E: {
        but: $A('#ue_but')[0],
        text: $A('#ue_go')[0],
        form: $A('#ue_fo')[0],
        check: $A('#ue_check')[0]
    },
    J: {
        box: $('#ue_box')
    },
    init: function () {
        var pipe = {},
            this_hold = this;
        this.J.box.draggable();
        this.E.but.addEventListener("click", function () {
            pipe = $A.definePipe(this_hold.Name);
            $A.machine(pipe);
        }, false);
        this.E.text.addEventListener("keypress", this.enter, false);
        this.S.AniMorphLabel.run(["ue_email",
                                  "ue_email_lab",
                                  "ue_go",
                                  "ue_pass_lab"
                                 ]);
    },
    enter: function (event) {
        var pipe = {},
            this_hold = this;
        if (event.keyCode === 13) {
            pipe = $A.definePipe(this_hold.Name); // fails here what does 'this' point to?
            $A.machine(pipe);
            event.preventDefault();
        }
    },
    pre: function (pipe) {
        var form_elements = this.E.form.elements,
            text_object = new this.S.ComText(form_elements);
        pipe.enter = this.enter;
        if ($A.Un.get('load') === '1') {
            if (!text_object.checkFull()) {
                pipe.type = 'empty';
                return this.S.ComMessage.message(pipe);
            }
            if (!text_object.checkPattern('email')) {
                pipe.type = 'email';
                return this.S.ComMessage.message(pipe);
            }
            if (!text_object.checkPattern('pass')) {
                pipe.type = 'pass';
                return this.S.ComMessage.message(pipe);
            }
        }
        pipe.page = text_object.getArray();
        pipe.proceed = true;
        pipe.page.remember = this.E.check.checked;
        return pipe;
    },
    post : function (pipe) {
        if (pipe.proceed === true) {
            this.S.ComMessage.resetView('ue_email');
            this.S.ComMessage.resetView('ue_go');
            this.S.ClientStorage.setAll(pipe.server.smalls);
            this.S.DynSma.run(pipe.server.smalls);
            this.S.DynArc.run(pipe.server.arcmarks);
            this.S.DynTwe.run(pipe.server.tweets);
            this.S.AniFlipPage.run('ma');
        } else {
            return this.S.ComMessage.message(pipe);
        }
    }
});
4

3 回答 3

2

this可能指向触发事件的 DOM 节点。您是否尝试过写入this控制台进行检查？

console.log(this);
于 2012-12-21T20:48:09.717 回答
1

尝试更改事件的绑定方式

this.E.text.addEventListener("keypress", this.enter, false);

到

var that = this;
this.E.text.addEventListener("keypress", function(event) {
  that.enter(event);
}, false);
于 2012-12-21T20:48:16.220 回答
1

this是生成事件的 DOM 对象。它不是您的 javascript 对象。

当您this.enter作为事件处理程序的方法传递时，该方法enter不会保持绑定到您的对象。如果您希望发生这种情况，您必须通过执行以下操作更改代码以使其发生：

// save local copy of my object so I can refer to it in
// the anonymous function
var obj = this;
this.E.text.addEventListener("keypress", function(event) {obj.enter(event)}, false);

重要的是要记住它this是由方法/函数的调用者设置的。在这种情况下，事件处理程序的调用者是浏览器中的事件子系统。它不知道你的对象是什么，它的设计行为是设置this为导致事件的 DOM 对象。所以，如果你想调用你的 obj.enter 方法，你不能只是enter作为事件处理程序传递。相反，您创建一个单独的函数作为事件处理程序调用，然后obj.enter()使用您的对象作为基础从该函数调用，以便this正确设置。

另一种解决方案是使用.bind()它还创建一个将权限绑定this到函数调用的存根函数，但我不使用.bind()自己，因为它不适用于所有旧浏览器。

于 2012-12-21T21:02:16.473 回答