JavaScript setTimeout，使用调用来改变这个

Question

我有两个简单的链接，单击它们时应等待一秒钟，然后添加一个更改文本颜色的类。工作版本使用 $.proxy 而非工作版本我正在尝试使用 native JavaScript 来更改 this 的含义。为什么 btnWaitNoProxy 仍然引用全局对象？

fiddle

代码:

var obj = {
            wait: function () {
                setTimeout(function () {
                    console.log('inside the setTimeout');
                    $(this).addClass('lesson');
                    //refers to global object in the console
                }, 1000);
            }
        };

$('#btnProxy').on('click', function () {
            console.log('preparing to add class...');
            setTimeout($.proxy(function () {
                $(this).addClass('lesson')
                console.log(this);
            }, this), 1000);
        });
        $('#btnWaitNoProxy').on('click', function () {
            console.log(this);
            //call still refers to the global object
            obj.wait.call(this);
        });

Answer 1

因为你在 wait 中使用了 setTimeout，所以传递给 setTimeout 的回调方法将默认在全局上下文中执行。

一个可能的解决方案是使用 $.proxy() ，就像您对 setTimeout 处理程序所做的一样

var obj = {
    wait: function () {
        setTimeout($.proxy(function () {
            console.log('inside the setTimeout');
            $(this).addClass('lesson');
            //refers to global object in the console
        }, this), 1000);
    }
};

另一种是使用像这样的闭包变量

var obj = {
    wait: function () {
        var self = this;
        setTimeout(function () {
            console.log('inside the setTimeout');
            $(self).addClass('lesson');
            //refers to global object in the console
        }, 1000);
    }
};