javascript - 在 Javascript 中 'this' 没有按预期工作

Question

我在一个名为 FL 的对象中创建了一个方法，即 connectEvent()，它的属性包括 event、 el 和 fn。 当我使用该方法然后尝试访问 this.el 时，console.log() 显示 undefined，即使我已经分配了 window 到 el。

为什么 this.el 未定义？ this 不是应该引用对象 FL 吗？

JS:

var FL = {
    connectEvent : function(params) {

        var params = params || {};

        if (params.el.addEventListener) {
            params.el.addEventListener(params.event, params.fn, false);
        } else if (params.el.attachEvent) {
            params.el.attachEvent('on' + params.event, params.fn);
        } else {
            params.el['on' + params.event] = params.fn;
        }
    }
};

FL.connectEvent({ 
    event: 'resize', 
    el: window, 
    fn: function() {
        console.log('start on resize');

        console.log('wat is this.el? ', this.el);

        console.log('end on resize');
    } 
});

Answer 1

这是因为在事件监听器中(通常在大多数回调中)函数的“this”发生了变化。在事件监听器中，通常是触发事件的元素，在您的情况下，这实际上是您的“el”。要解决此问题，您可以执行以下操作:

var FL = {
    connectEvent : function(params) {

        var params = params || {};
        var listener = function () {
            params.fn();
        };

        if (params.el.addEventListener) {
            params.el.addEventListener(params.event, listener, false);
        } else if (params.el.attachEvent) {
            params.el.attachEvent('on' + params.event, listener);
        } else {
            params.el['on' + params.event] = listener;
        }
    }
};

FL.connectEvent({ 
    event: 'resize', 
    el: window, 
    fn: function() {
        console.log('start on resize');

        console.log('wat is this.el? ', this.el);

        console.log('end on resize');
    } 
});

这样，监听器函数会继承其创建时所在的上下文，因此它可以访问参数并且调用 params.fn() 会保留它的“this”。如果你还想获得事件回调的参数，你可以这样做:

var listener = function () {
     params.fn.apply(params, arguments);
};

最后一个相当于使用:

var listener = params.fn.bind(params);

，但也适用于旧版浏览器。