8个月前关闭。
在jquery中,什么this意思和何时使用?
this
thisJavaScript中的代码非常特殊且功能强大。这可能意味着任何事情。
首先让我们看一下jQuery对jQuery的使用,然后再在JavaScript中更广泛地讨论它。
在用jQuery编写的代码中,this 通常 指的是作为要调用的函数的主题的DOM元素(例如,在事件回调中)。
例如jQuery的事件回调(什么this是覆盖在该.bind文档):
.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函数允许这样做:
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:
jQuery.each
var a = ["one", "two", "three"]; jQuery.each(a, function() { alert(this); });
…会先提示“一个”,然后提示“两个”,然后提示“三个”。如您所见,这是的完全不同的用法this。
(混淆,jQuery有两个函数调用each/时,其中一个以上是对jQuery的$函数本身和始终称为这种方式[ jQuery.each(...)或$.each(...)]和jQuery的不同的一个 实例 [对象]而不是jQuery的/ $函数iself。这里是另一个文档,我不在此答案中讨论另一个文档,因为它使用this相同的方式html和事件回调来做,并且我想展示jQuery 的 不同 用法this。)
each
jQuery.each(...)
$.each(...)
this 指对象。 更新: 从ES5的严格模式开始,这不再是事实,this可以具有任何价值。this在任何给定的函数调用中,in 的值取决于 函数的调用方式 (而不是像C#或Java这样的语言中定义函数的位置)。this调用函数时最常见的设置方法是通过对象上的属性调用函数:
var obj = {}; obj.foo = function() { alert(this.firstName); }; obj.firstName = "Fred"; obj.foo(); // alerts "Fred"
在那里,因为我们叫foo经上的属性obj,this设置为obj呼叫的持续时间。但是不要foo以任何方式得到与结婚的印象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它根本就不与 任何 对象绑定:
var f = obj.foo; // Not *calling* it, just getting a reference to it f(); // Probably alerts "undefined"
在那里,由于我们没有f通过对象属性进行调用,this因此未明确设置。如果this未明确设置,则默认为全局对象(window在浏览器中)。window可能没有属性firstName,因此我们在警报中得到“未定义”。
f
window
firstName
还有其他方法可以调用函数并设置其内容this:通过使用函数.call和.apply函数:
.call
.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设置this为您给它的第一个参数,然后将您给它的任何其他参数传递给它正在调用的函数。
call
apply 确实做同样的事情,但是您将函数的参数作为数组而不是单独给定:
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); } })();
输出:
[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。
typeof this = object