Question

function() {
 return this === window // true
}()

$("h1").click(function() {
 $(this).css({"color": "red"}) // "this" becomes DOM element(s) here.
})

对于此类回调调用，JQuery如何实现从this到window的{{1}}引用？

Answer 1

使用.apply方法完成。

https://github.com/jquery/jquery/blob/1.9-stable/src/event.js

thecallback.apply(theelement,theeventobject)

以下是代码的链接：

Answer 2

一切都与范围有关！通常，当前作用域中绑定到this的对象由当前函数的调用方式决定，在执行期间不能通过赋值来设置，并且每次调用函数时它都可以不同。

EcmaScript 5引入了bind方法来修复函数this，无论它是如何被调用的。

当this关键字出现在函数内部时，其值取决于函数的调用方式。

function() {
   return this === window // true, "this" would be the window
}

function f2(){
    "use strict"; 
    return this;  // "this" would return undefined in  strict mode
}

var o = {
  prop: 'test',
  f: function() {
    return this.prop; // here "this" would be the object o, and this.prop
                      // would equal o.prop
  }
};

var t = o.f(); // t is now 'test'

jQuery使用call()和apply()来更改某个范围内this的值，这样做是这样的：

function add(c, d){
  return this.a + this.b + c + d;
}

var o = {a:1, b:3};

// The first parameter is the object to use as 'this', 
//subsequent parameters are passed as 
// arguments in the function call
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16

// The first parameter is the object to use as 'this', 
// the second is an array whose members are used 
//as the arguments in the function call
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

您可以在this上阅读更多关于call()，apply()，MDN和其他内容的内容！

“this”如何引用JQuery中的DOM元素

2 个答案: