jQuery中的“this”是什么意思？ [复制]

Question

在jquery中，this是什么意思，什么时候使用？

Answer 1

常规函数属于定义这些函数的类，调用函数的同一个对象作为第一个参数传递给函数，函数用this关键字处理它；

当一个对象从一个类中创建时，它只包含一组属性并且对象中没有任何功能。并且函数属于类。 但是，对象如何调用函数呢？

考虑下面的代码。

var obj = {
            p1: 'property 1',

            func1 () {
                return this.p1
            },

            func2 (param) {
                return this.p1 + param
            }
    }

还可以通过obj对象调用函数

obj.func1 ();
obj.func2 ('A');

其实运行时的函数如下所示

var obj = {
            p1: 'property 1',

            func1 (this) {
                return this.p1
            },

            func2 (this, param) {
                return this.p1 + param
            }
    }

func1 (obj);
func2 (obj, 'A');

使用bind方法可以创建一个不属于类的新函数，并且可以用一个固定的对象设置'this'参数；

this.func1 = this.func1.bind(aObject)

在箭头函数中，this 绑定到定义箭头函数的对象，并且该对象作为this 参数传递给函数。

Answer 2

这就是我的解释，简单地说：

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 方法时， this 将指向 bar，因为 bar 对象调用了该方法。

这适用于任何其他对象，甚至是窗口对象。如果通过全局作用域调用函数，this 将指向窗口对象。

通过使用函数的绑定或调用方法，您可以显式定义对象this 在执行期间将引用的内容。

有趣的事实：global scope 中定义的任何内容，即顶层/级别，都将成为window object 的属性（全局范围 = 窗口对象）。

Answer 3

this关键字

在 JavaScript 中，称为 this 的东西是“拥有” JavaScript 代码的对象。

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

请注意，这不是变量。它是一个关键字。您无法更改此值。

Answer 4

JavaScript 中的this 非常特殊和强大。它可能意味着任何事情。我在here 和here 中介绍了其中的一些内容，但确实值得找到一个关于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 元素——例如，@ 987654324@ 函数允许这样做：

// 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/$ 函数本身。Here are the docs 对于另一个，我不会在这个答案中讨论另一个，因为它使用 this 的方式与 html 和事件回调，我想展示 jQuery 对this 的不同使用。）

一般在 JavaScript 中

this 指的是一个对象。 更新： 在 ES5 的严格模式中，这不再是真的，this 可以有任何值。在任何给定的函数调用中this 的值由函数的调用方式确定（而不是函数的定义位置，如在 C# 或 Java 等语言中）。调用函数时设置this 的最常见方法是通过对象上的属性调用函数：

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

在那里，因为我们通过obj 上的属性调用了foo，所以在调用期间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 与 任何 对象根本没有内在联系：

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`

不过，关于 JavaScript 中的this，还有很多需要探索的地方。这个概念很强大，如果你习惯了其他一些语言是如何做到的（而不是如果你习惯了其他一些），那么这个概念会有点欺骗性，并且值得了解。

以下是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);
    }
})();

输出：

[严格] 直接；这个类型=未定义
[严格] 5；这个类型=数字
【严】以真； typeof this = boolean
[严格] 用'hi'； typeof this = string

而在松散模式下，所有这些都会说typeof this = object； live copy.

Answer 5

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

Answer 6

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

编辑：我认为关键句是：

“在 JavaScript 中，“this”总是指我们正在执行的函数的“所有者”，或者更确切地说，指的是函数作为方法的对象。”

Quirksmode（一般*）非常出色，值得详细阅读整篇文章。

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