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

2024-04-25

在 jquery 中,什么是this手段以及何时使用?


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.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

jQuery 中的“this”是什么意思? [复制] 的相关文章

随机推荐

  • Git:切换分支时保留忽略的文件

    我知道这看起来像是重复的GIT 切换分支时如何保留被忽略的文件 https stackoverflow com questions 15552959 git how to keep ignored files when switching
  • Tomcat 组件是什么?什么是卡塔利娜和郊狼? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 谁能描述一下 Tomcat 中的组件是什么 它在 Tomcat 服务器中的作用是什么 什么是郊狼 卡塔琳娜是什么 Catalina是T
  • 奇数运算符优先级/关联性行为[重复]

    这个问题在这里已经有答案了 在 Python 2 7 中 下面的内容是怎么回事 True w in what 两者的行为都不同 True w in what and True w in what gt gt gt True w in wha
  • 当你用 mlockall 设置的内存用完时会发生什么?

    我正在开发一个需要大量内存才能批量运行的 C 应用程序 gt 20GB 我的一些客户遇到了内存限制 有时操作系统开始交换 总运行时间加倍或更糟 我读到可以使用 mlockall 来防止进程被换出 当进程内存需求以这种方式接近或超过可用物理内
  • 如何在JPA中反映“嵌套集”模型

    很好用嵌套集 http www evanpetersen com item nested sets html对于分层数据 但在这个设计中 如果删除或插入一些数据 您应该始终计算右侧和左侧节点 此外 您没有任何外键 我如何用 JPA 反映这个
  • python模拟下面的return_value是什么

    我对 python 模拟很陌生 所以只是想理解它 在下面的代码中 下面指出的 1 和 2 语句之间有什么区别 因为最后我可以设置mock response status code与任一陈述 import requests def get d
  • Safari - 视频加载速度太慢

    我在将视频添加到我的网站时遇到了一些麻烦 我使用这段代码
  • 使用自己的路径在不同的 python 可执行文件下生成 multiprocessing.Process

    我有两个版本的Python 实际上是两个conda环境 path to bin 1 python path to bin 2 python 我想从一个版本的 python 启动一个在另一个版本中运行的函数 使用类似multiprocessi
  • 敲除验证

    我有一个 asp net mvc3 项目 我在其中使用淘汰赛绑定对表进行批量编辑 我想在保存数据时进行必需验证和数字验证等验证 有没有更简单的方法来进行淘汰验证 PS 我没有使用表格 看一下敲除验证 https github com eri
  • 井字游戏的极小极大

    我正在尝试用简单的极小极大算法来解决井字游戏 简单 但应该涵盖很多语言 到目前为止我所拥有的 该板表示为 9 个 未绑定 变量的数组 这些变量可以设置为x or o 获胜条件基本上是 win Player X1 X2 X3 X1 Playe
  • 如何在 IAR EWARM 5.4 中抑制警告(从错误转换)

    我有一个用于日志记录的宏 它接受可变数量的参数 该宏将由 GCC 在非嵌入式上下文中处理 并扩展为有效的 C 代码 尽管如此 无论我在何处调用宏 数千个位置 IAR EWARM 都会给出错误 Pe054 宏调用中的参数太少 EWARM 确实
  • AngularJS 阻止 symfony2 表单中的提交按钮

    我在 symfony2 中创建了表单 最后呈现了提交表单的按钮 当我添加ng app myApp 一切正常 但我无法提交此页面上的表单 为什么会这样以及如何解锁 FORM gt add company choice array mapped
  • NSAssert 与断言:您使用哪个以及何时使用?

    最近 我读到了两条非常有趣的建议 在评论中这个 StackOverflow 答案 https stackoverflow com questions 1375786 whats the point of nsassert actually
  • 如何将多个身份验证提供商链接到 Firebase 帐户?

    我无法成功执行此操作 我按照 Firebase 文档上的说明执行了以下步骤 使用现有的身份验证提供程序登录使用 我的案例 脸书 完成新身份验证提供程序的登录流程 直至 但不包括 调用其中之一Auth signInWith方法 我的情况 我想
  • Oauth2 Google 身份验证流程 - Next.JS / Express

    我正在使用 React Next Js 前端 并尝试通过 Google 的 Oauth2 策略实现身份验证 我对这个过程感到非常困惑 目前在客户端上 我有一个 Google 登录组件 其中包含客户端 ID 并且可以检索访问令牌
  • 如何将查询结果放入文本字​​段?

    我正在创建一个会计数据库 对于财务结果 我的表 单有一个文本字段 Previous Solde 其中显示了前几个月的销售情况 确切的金额是通过以下查询计算出来的 SELECT sq Argenta Prep Vorig Saldo Acco
  • 为什么导入在 setuptools Entry_point 脚本中失败,但在 python 解释器中却失败?

    我有以下项目结构 project project py init py setup py lib init py project init py tools py with project py from project lib impor
  • 从 Java 访问 Firefox 的证书信任存储

    我对这个几乎失去希望了 我正在尝试使用 Firefox 安装附带的 NSS 库通过 PKCS 11 从 Java 7 访问 Firefox 信任存储 这是代码 import java security KeyStore import jav
  • Spring 测试 DBunit 警告

    我正在使用 spring test dbunit 并且在单元测试中收到一条警告 其中包含以下消息 Code RunWith SpringJUnit4ClassRunner class ContextConfiguration locatio
  • jQuery 中的“this”是什么意思? [复制]

    这个问题在这里已经有答案了 在 jquery 中 什么是this手段以及何时使用 this在 JavaScript 中是非常特殊和强大的 它几乎可以意味着任何事情 我涵盖了其中一些here http blog niftysnippets o