javascript - jquery回调函数中this的作用域

Question

我的jquery的事件如下:

$('body').on('click', '.show-it', function (e) {
       e.preventDefault();
       showIt();
});

function showIt() {...};

在 showIt 函数中，当我想尝试访问 $(this) 时，它总是返回 window 对象。据我所知，因为 showIt 函数现在用作回调函数的一部分，所以 showIt 函数中的 this 的范围应该是和.show-it按钮的点击回调函数一样，就是被点击的元素。但似乎不是。我必须在回调函数中使用 self.showIt.call(this)() 来获得 this 的正确范围。那么幕后发生了什么？

Answer 1

JQuery 使用 callback.call(el) 或等效表达式将 this 的值设置为回调函数中的给定 DOM 元素。但这不会级联到该回调中调用的其他函数。试试看:

var o = {
    name: "baz",
    foo: function() {
        console.log(this);
    }
}

function foo() {
    console.log(this);
}

function bar() {
    console.log(this); // bar's this
    foo();             // the global object
    foo.call(this);    // bar's this
    o.foo();           // o
    o.foo.call(this);  // bar's this
}

bar.call(new Date());

输出:

Thu Feb 13 2014 13:26:47 GMT-0800 (PST)
Window {top: Window, window: Window, location: Location...}
Thu Feb 13 2014 13:26:47 GMT-0800 (PST) VM350:10
Object {name: "baz", foo: function}
Thu Feb 13 2014 13:26:47 GMT-0800 (PST)

请注意，当您调用作为对象属性的函数时，this 会绑定(bind)到该对象，无论调用上下文中的 this 是什么，除非之前已使用 Function.bind 绑定(bind)函数。