this
在 JavaScript 中是非常特殊和强大的。它几乎可以意味着任何事情。我涵盖了其中一些here http://blog.niftysnippets.org/2008/03/mythical-methods.html and here http://blog.niftysnippets.org/2008/04/you-must-remember-this.html,但确实值得找到一个关于 JavaScript 的优秀教程并花一些时间来学习它。
让我们先看看 jQuery 对它的使用,然后在 JavaScript 中更一般地讨论它(一点)。
在 jQuery 中,特别是
在用 jQuery 编写的代码中,this
usually指的是作为被调用函数主题的 DOM 元素(例如,在事件回调中)。
jQuery 事件回调示例(什么this
是覆盖在the .bind docs http://api.jquery.com/bind/):
$("div").click(function() {
// Here, `this` will be the DOM element for the div that was clicked,
// so you could (for instance) set its foreground color:
this.style.color = "red";
// You'll frequently see $(this) used to wrap a jQuery object around the
// element, because jQuery makes lots of things a lot simpler. You might
// hide the element, for example:
$(this).hide();
});
类似地,作用于当前 jQuery 选择器匹配的所有元素的各种 jQuery 函数可以选择接受一个函数,并且当该函数被调用时,this
又是有问题的 DOM 元素——例如,html http://api.jquery.com/html/函数允许这样:
// Find all divs inside the `foo` element, and set
// their content to their CSS class name(s)
// (Okay, so it's a hokey example)
$("#foo div").html(function() {
return this.className;
});
jQuery 使用的另一个地方this
是在回调中jQuery.each http://api.jquery.com/jQuery.each/:
var a = ["one", "two", "three"];
jQuery.each(a, function() {
alert(this);
});
...这将提醒“一”,然后“二”,然后“三”。正如你所看到的,这是完全不同的用法this
.
(令人困惑的是,jQuery 有两个函数,称为each
,上面的那个在 jQuery/$ 函数本身上并且总是以这种方式调用 [jQuery.each(...)
or $.each(...)
],以及 jQuery 上的另一个实例[对象] 而不是 jQuery/$ 函数本身。这是文档 http://api.jquery.com/each/对于另一个,我不会在这个答案中讨论另一个,因为它使用this
一样的方法html
和事件回调,我想展示一个不同的 use of this
通过 jQuery。)
一般在 JavaScript 中
this
refers to an object. Update: As of ES5's strict mode, that's no longer true, this
can have any value. The value of this
within any given function call is determined by how the function is called (not where the function is defined, as in languages like C# or Java). The most common way to set up this
when calling a function is by calling the function via a property on the object:
var obj = {};
obj.foo = function() {
alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"
在那里,因为我们打电话给foo
通过属性obj
, this
被设置为obj
在通话期间。但不要有这样的印象foo
以任何方式与以下人士结婚obj
,这工作得很好:
var obj = {};
obj.foo = function() {
alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"
var differentObj = {};
differentObj.firstName = "Barney";
differentObj.bar = obj.foo; // Not *calling* it, just getting a reference to it
differentObj.bar(); // alerts "Barney"
实际上,foo
没有本质上的联系any根本对象:
var f = obj.foo; // Not *calling* it, just getting a reference to it
f(); // Probably alerts "undefined"
在那里,因为我们没有打电话f
通过对象属性,this
没有明确设置。什么时候this
没有显式设置,它默认为全局对象(即window
在浏览器中)。window
可能没有房产firstName
,因此我们的警报中出现“未定义”。
还有其他方法可以调用函数并设置什么this
是:通过使用函数的.call
and .apply
功能:
function foo(arg1, arg2) {
alert(this.firstName);
alert(arg1);
alert(arg2);
}
var obj = {firstName: "Wilma"};
foo.call(obj, 42, 27); // alerts "Wilma", "42", and "27"
call
sets this
传递给您提供的第一个参数,然后将您提供的任何其他参数传递给它所调用的函数。
apply
做完全相同的事情,但是你将函数的参数作为数组而不是单独提供:
var obj = {firstName: "Wilma"};
var a = [42, 27];
foo.apply(obj, a); // alerts "Wilma", "42", and "27"
// ^-- Note this is one argument, an array of arguments for `foo`
不过,还有很多值得探索的地方this
在 JavaScript 中。这个概念很强大,但如果您习惯了其他一些语言的做法(如果您习惯了其他一些语言则不然),但有点具有欺骗性,并且值得了解。
以下是一些示例this
不引用 ES5 严格模式下的对象:
(function() {
"use strict"; // Strict mode
test("direct");
test.call(5, "with 5");
test.call(true, "with true");
test.call("hi", "with 'hi'");
function test(msg) {
console.log("[Strict] " + msg + "; typeof this = " + typeof this);
}
})();
Output:
[Strict] direct; typeof this = undefined
[Strict] with 5; typeof this = number
[Strict] with true; typeof this = boolean
[Strict] with 'hi'; typeof this = string
而在松散模式下,所有这些都会说typeof this = object
; 实时复制 http://jsbin.com/ukiMIsI/1.