javascript jQuery中的“this”是什么意思?[副本]

velaa5lx  于 2023-05-21  发布在  Java
关注(0)|答案(5)|浏览(109)

此问题已在此处有答案

How does the "this" keyword work, and when should it be used?(22答案)
3年前关闭。
在jquery中,this是什么意思,什么时候使用?

wgxvkvu9

wgxvkvu91#

JavaScript中的this非常特殊且强大。它可以意味着任何事情。我介绍了其中的一些herehere,但真的值得找一个关于JavaScript的好教程并花一些时间。
让我们先看看jQuery对它的使用,然后在JavaScript中更一般地讨论它(一点)。

在jQuery中,具体来说

在用jQuery编写的代码中,this * 通常 * 指的是作为被调用函数主题的DOM元素(例如,在事件回调中)。
jQuery事件回调示例(this是什么在the .bind docs中介绍):

$("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 instances [objects]上,而不是jQuery/$函数iself上。另一个是Here are the docs,我不会在这个答案中讨论另一个,因为它使用this的方式与html和事件回调相同,我想展示jQuery对this的不同使用。

JavaScript中的泛型

this引用一个对象。* 更新:* 从ES 5的严格模式开始,这不再是真的,this可以有任何值。在任何给定的函数调用中,this的值由 * 函数的调用方式 * 决定(而不是像C#或Java这样的语言中定义函数的位置)。在调用函数时设置this的最常见方法是通过对象上的属性调用函数:

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

在这里,因为我们通过obj上的一个属性调用了foo,所以在调用期间,this被设置为obj。但是不要以为fooobj有任何关系,这很好用:

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,所以我们在警报中得到了“undefined”。
还有其他方法可以调用函数并设置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"

callthis设置为您给予的第一个参数,然后沿着您提供的任何其他参数传递给它正在调用的函数。
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`

不过,关于JavaScript中的this,还有很多东西需要探索。这个概念非常强大,如果您习惯于其他一些语言的方式,它可能会有点欺骗性(如果您习惯于其他一些语言,则不会),值得了解。
下面是一些this在ES 5的严格模式下不引用对象的例子:

(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; live copy

fiei3ece

fiei3ece2#

this关键字

在JavaScript中,称为this的东西是“拥有”JavaScript代码的对象。
当在函数中使用this时,它的值是“拥有”函数的对象。当在对象中使用this时,它的值是对象本身。对象构造函数中的this关键字没有值。它只是新对象的替代品。当构造函数用于创建对象时,this的值将成为新对象。

请注意,这不是一个变量。这是一个关键字。您不能更改此值。

lymgl2op

lymgl2op3#

下面是我的解释,很简单:
this指的是object***,称为***function
看看这个

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

var bar = {
  name: "bar"
}
bar.log = foo.log;
bar.log();

bar对象将foo的log方法的引用存储到它自己的log属性**中。现在,当bar调用它的log方法时,这将指向bar,因为该方法是由bar对象调用的。
这适用于任何其他对象,甚至窗口对象。如果你通过全局作用域调用一个函数,它将指向窗口对象。
通过使用函数的bind或call方法,您可以显式定义对象this在执行期间将引用的内容。
有趣的事实:在global scope中定义的任何东西,这是顶层/级别,都将成为window object的属性(全局范围=窗口对象)。

piv4azn7

piv4azn74#

最佳Google搜索结果“javascript this”:http://www.quirksmode.org/js/this.html

**编辑:**我觉得关键句是:

在JavaScript中,“this”总是指我们正在执行的函数的“所有者”,或者更确切地说,指函数是其方法的对象。
Quirksmode(一般来说 *)很棒,值得详细阅读整篇文章。

  • 显然,这种说法不一定正确,见T. J。下面是克劳德的评论。
zphenhs4

zphenhs45#

关键字this充当占位符,当在JavaScript中实际使用该方法时,它将引用调用该方法的任何对象

相关问题