0

0

理解“this”关键字

PHPz

PHPz

发布时间:2023-08-30 17:05:09

|

1058人浏览过

|

来源于php中文网

原创

理解“this”关键字

创建函数时,会创建一个名为 this 的关键字(在幕后),该关键字链接到函数运行的对象。换句话说,this 可用于其函数的范围,但它是对该函数作为属性或方法的对象的引用。

让我们看一下上一篇文章中的 cody 对象:

示例:sample98.html


注意在 getGender 函数内部,我们如何在 cody 对象本身上使用点表示法 (cody.gender) 访问 gender 属性。可以使用 this 重写来访问 cody 对象,因为 this 指向 cody 对象。

示例:sample99.html


this.gender 中使用的 this 只是指操作该函数的 cody 对象。

this 的主题可能会令人困惑,但事实并非如此。请记住,一般来说, this 在函数内部使用来引用该函数所包含的对象,而不是函数本身(例外情况包括使用 new 关键字或 call()应用())。

关键字 this 的外观和行为与任何其他变量类似,只是您无法修改它。

arguments 和发送到函数的任何参数相反,this 是调用/激活对象中的关键字(而不是属性)。


this 的值是如何确定的?

传递给所有函数的 this 的值基于运行时调用该函数的上下文。请注意这里,因为这是您只需要记住的怪癖之一。

以下代码示例中的 myObject 对象被赋予一个名为 sayFoo 的属性,该属性指向 sayFoo 函数。当从全局范围调用 sayFoo 函数时,this 引用 window 对象。当作为 myObject 的方法调用时,this 指的是 myObject

由于 myObject 有一个名为 foo 的属性,因此使用该属性。

示例:sample100.html


显然,this 的值基于调用该函数的上下文。考虑 myObject.sayFoosayFoo 都指向相同的函数。但是,根据调用 sayFoo() 的位置(上下文),this 的值会有所不同。

如果有帮助,这里是显式使用头对象(window)的相同代码。

示例:sample101.html


确保当您传递函数或对函数进行多次引用时,您意识到 this 的值将根据您调用该函数的上下文而变化。

thisarguments 之外的所有变量都遵循词法范围


this 关键字引用嵌套函数中的头对象

您可能想知道当 this 在一个包含在另一个函数中的函数内部使用时会发生什么。坏消息是在 ECMA 3 中,this 迷失了方向并引用了头对象(浏览器中的 window 对象),而不是定义该函数的对象。

在下面的代码中,func2func3 中的 this 迷失了方向,并且不是指向 myObject 而是指向头对象。

示例:sample102.html

衣购网站项目(三层开发)源码
衣购网站项目(三层开发)源码

商品查询功能提供了一个快速查看商品的途径。商品查询分为基本查询和高级查询。基本查询:提供关键字和商品大类两种条件的查询,用户可以只填写关键字或者选择商品大类或者关键字和商品大类都填写来查询商品。高级查询:提供关键字,商品大类,商品小类,商品价格范围四种条件的查询,用户可以任意填写其中一种或几种的查询条件来查询想要了解的商品信息。商品查询功能大大的方便了用户,提高了网站的用户体验。(5)帮助系统模块

下载

好消息是,这个问题将在 ECMAScript 5 中得到解决。现在,您应该意识到这种困境,尤其是当您开始将函数作为值传递给其他函数时。

考虑下一个示例以及将匿名函数传递给 foo.func1 时会发生什么。当在 foo.func1 (函数中的函数)内部调用匿名函数时,匿名函数内部的 this 值将是对 head 对象的引用。

示例:sample103.html


现在你永远不会忘记:当其宿主函数封装在另一个函数内或在另一个函数的上下文中调用时,this 值将始终是对头对象的引用(同样,这在 ECMAScript 5 中已修复) )。


利用作用域链解决嵌套函数问题

为了使 this 值不会丢失,您可以简单地使用作用域链在父函数中保留对 this 的引用。以下示例演示了如何使用名为 that 的变量并利用其作用域,我们可以更好地跟踪函数上下文。

示例:sample104.html



使用 call()apply() 控制 this 的值

this 的值通常由调用函数的上下文确定(除非使用 new 关键字,稍后会详细介绍),但您可以使用 this 的值>apply() 或 call() 来定义调用函数时 this 指向什么对象。使用这些方法就像在说:“嘿,调用 X 函数,但告诉该函数使用 Z 对象作为 this 的值。”通过这样做,JavaScript 确定 this 值的默认方式将被覆盖。

在下一个示例中,我们创建一个对象和一个函数。然后我们通过 call() 调用该函数,以便函数内 this 的值使用 myObject 作为其上下文。 myFunction 函数内的语句将使用属性填充 myObject,而不是填充头对象。我们更改了 this (在 myFunction 内部)引用的对象。

示例:sample105.html


在前面的示例中,我们使用了 call(),但也可以使用 apply()。两者之间的区别在于函数参数的传递方式。使用 call(),参数只是逗号分隔的值。使用 apply(),参数值在数组内部传递,如以下示例所示。

示例:sample106.html


这里您需要学习的是,您可以覆盖 JavaScript 在函数作用域中确定 this 值的默认方式。


在用户定义的构造函数中使用 this 关键字

当使用 new 关键字调用函数时,构造函数中声明的 this 的值指的是实例本身。换句话说:在构造函数中,我们可以在实际创建对象之前通过 this 来利用该对象。在这种情况下, this 的默认值的更改方式类似于使用 call()apply()

在下面的示例中,我们设置了一个 Person 构造函数,该函数使用 this 来引用正在创建的对象。当创建 Person 的实例时,this.name 将引用新创建的对象,并在新对象中放置一个名为 name 的属性,并将参数 (name) 中的值传递给构造函数。 p>

示例:sample107.html


同样,当使用 new 关键字调用构造函数时,this 指的是“将成为的对象”。如果我们没有使用 new 关键字,则 this 的值将是调用 Person 的上下文 - 在本例中为头对象。让我们看一下以下场景:

示例:sample108.html



原型方法中的关键字 this 引用构造函数实例

当在添加到构造函数 prototype 属性的函数中使用时,this 指的是调用该方法的实例。假设我们有一个自定义 Person() 构造函数。作为参数,它需要人的全名。如果我们需要访问人员的全名,我们将 whatIsMyFullName 方法添加到 Person.prototype 中,以便所有 Person 实例继承该方法。当使用 this 时,该方法可以引用调用它的实例(以及它的属性)。

这里我演示了创建两个Person对象(codylisa)以及继承的whatIsMyFullName方法,其中包含this关键字来访问实例。

示例:sample109.html



结论

这里要带走的概念是 that 关键字 this 用于在 prototype 对象中包含的方法内部使用时引用实例。如果实例不包含该属性,则开始查找原型。

如果 this 指向的实例或对象不包含所引用的属性,则应用适用于任何属性查找的相同规则,并且将在原型链上“查找”该属性。因此,在我们的示例中,如果 fullName 属性未包含在我们的实例中,则将在 Person.prototype.fullName 中查找 fullName 属性,然后在 Object.prototype.fullName 中查找。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

556

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

732

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

414

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

991

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

552

2023.09.20

高德地图升级方法汇总
高德地图升级方法汇总

本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

72

2026.01.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号