小编典典

jQuery中的“ this”是什么意思?

javascript

8个月前关闭。

在jquery中,什么this意思和何时使用?


阅读 541

收藏
2020-04-25

共1个答案

小编典典

thisJavaScript中的代码非常特殊且功能强大。这可能意味着任何事情。

首先让我们看一下jQuery对jQuery的使用,然后再在JavaScript中更广泛地讨论它。

特别是在jQuery中

在用jQuery编写的代码中,this 通常 指的是作为要调用的函数的主题的DOM元素(例如,在事件回调中)。

例如jQuery的事件回调(什么this是覆盖在.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函数允许这样做:

// 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

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。)

# 一般用JavaScript

this 指对象。 更新: 从ES5的严格模式开始,这不再是事实,this可以具有任何价值。this在任何给定的函数调用中,in
的值取决于 函数的调用方式 (而不是像C#或Java这样的语言中定义函数的位置)。this调用函数时最常见的设置方法是通过对象上的属性调用函数:

var obj = {};
obj.foo = function() {
    alert(this.firstName);
};
obj.firstName = "Fred";
obj.foo(); // alerts "Fred"

在那里,因为我们叫foo经上的属性objthis设置为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,因此我们在警报中得到“未定义”。

还有其他方法可以调用函数并设置其内容this:通过使用函数.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为您给它的第一个参数,然后将您给它的任何其他参数传递给它正在调用的函数。

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

2020-04-25