Question

我的问题是，当我尝试将函数添加为某个对象的侦听器时，它不会尊重this范围，在该范围内创建了被调用的函数。

正如您所看到的，showAct()将打印“MyActivity”，但点击红色<div>则不会。结果是： MyActivity
undefined

如何点击<div>同时打印它？传递对象作为函数的参数真的有必要吗？我想以尽可能干净的方式做到这一点。

以下粘贴代码以防万一

谢谢！

JS

var activity = 'MyActivity';

var Screen = {
    act: activity,

    _privFunc: function()
    {
        console.log(this.act);
    },

    publicFunc: function()
    {
        $('div').on('click', this._privFunc);
    },

    showAct: function()
    {
        this._privFunc();
    }
}

Screen.publicFunc();
Screen.showAct();

HTML + CSS

<div>CLICK</div>

div { background: red; width: 100px; height: 100px; cursor: pointer; font-weight: bold

Answer 1

当处理程序内的默认this执行事件处理程序时，将引用处理程序注册到的dom元素。在您的情况下，您需要使用自定义执行上下文来执行回调函数。这可以通过使用$.proxy()

来完成

jQuery：$.proxy()

$('div').on('click', $.proxy(this._privFunc, this));

下划线：bind()

$('div').on('click', _.bind(this._privFunc, this));

现代浏览器：bind()

$('div').on('click', this._privFunc.bind(this));

Answer 2

您只需使用bind并将第一个参数设置为this的预期目标。

作为Arun suggested，如果您使用的是jQuery并且您正在为旧版浏览器提供服务，那么$.proxy是一个不错的选择。

Answer 3

为什么不使用类似以下的内容？

var Screen = function () {
    var act = activity,
    _privFunc = function()
    {
        console.log(act);
    };

    this.publicFunc = function()
    {
        $('div').on('click', _privFunc);
    };

    this.showAct = function()
    {
        _privFunc();
    }
}

var s = new Screen();
s.publicFunc();
s.showAct();

http://jsfiddle.net/Ht4x9/7/

使用监听器时无法传递“this”

3 个答案: