从规范的角度看 this 丢失 —— 详解 Reference Type

简介: 从规范的角度看 this 丢失 —— 详解 Reference Type

640.png


Reference Type


深入的语言特性


本文所讲的是一个高阶主题,能帮你更好地理解一些边缘情况。

这仅是锦上添花。许多经验丰富的的开发者不甚了了也过得不错。如果你想了解代码运行的本质,那就继续读下去吧。

一个动态执行的方法调用可能会丢失 this


例如:


let user = {
  name: "John",
  hi() { alert(this.name); },
  bye() { alert("Bye"); }
};
user.hi(); // 正常运行
// 现在让我们基于 name 来选择调用 user.hi 或 user.bye
(user.name == "John" ? user.hi : user.bye)(); // Error!


在最后一行有个在 user.hiuser.bye 中做选择的条件(三元)运算符。当前情形下的结果是 user.hi


接着该方法被通过 () 立刻调用。但是并不能正常工作!


如你所见,此处调用导致了一个错误,因为在该调用中 "this" 的值变成了 undefined


这样是能工作的(对象.方法):


user.hi();


这就无法工作了(被评估的方法):


(user.name == "John" ? user.hi : user.bye)(); // Error!


为什么呢?欲知缘何,且让我们深入 obj.method() 调用运行的本质。


Reference type 解读


仔细看的话,我们可能注意到 obj.method() 语句中的两个操作:


  1. 首先,点 '.' 取了属性 obj.method 的值。
  2. 接着 () 执行了它。


那么,this 的信息是怎么从第一部分传递到第二部分的呢?

如果我们将这些操作放在不同的行,this 必定是会丢失的:


let user = {
  name: "John",
  hi() { alert(this.name); }
}
// 把获取方法和调用方法拆成两行
let hi = user.hi;
hi(); // 报错了,因为 this 的值是 undefined


这里 hi = user.hi 把函数赋值给了一个变量,接下来在最后一行它是完全独立的,所以这里没有 this


为确保 user.hi() 调用正常运行,JavaScript 玩了个小把戏 —— 点 '.' 返回的不是一个函数,而是一个特殊的 Reference Type[1] 的值。


Reference Type 是 ECMA 中的一个“规范类型”。我们不能直接使用它,但它被用在 JavaScript 语言内部。


Reference Type 的值是一个三个值的组合 (base, name, strict),其中:


  • base 是对象。
  • name 是属性名。
  • strictuse strict 模式下为 true。


对属性 user.hi 访问的结果不是一个函数,而是一个 Reference Type 的值。对于 user.hi,在严格模式下是:


// Reference Type 的值
(user, "hi", true)


() 被在 Reference Type 上调用时,它们会接收到关于对象和对象的方法的完整信息,然后可以设置正确的 this(在此处 =user)。


Reference Type 是一个特殊的“中间人”内部类型,目的是从 . 传递信息给 () 调用。


任何例如赋值 hi = user.hi 等其他的操作,都会将 Reference Type 作为一个整体丢弃掉,而会取 user.hi(一个函数)的值并继续传递。所以任何后续操作都“丢失”了 this


因此,this 的值仅在函数直接被通过点符号 obj.method() 或方括号 obj['method']( "'method'") 语法(此处它们作用相同)调用时才被正确传递。在本教程的后续章节,我们会学习多种解决这个问题的方式,例如 func.bind()[2]


总结


Reference Type 是语言内部的一个类型。


读取一个属性,例如在 obj.method() 中,. 返回的准确来说不是属性的值,而是一个特殊的 "Reference Type" 值,其中储存着属性的值和它的来源对象。


这是为了随后的方法调用 () 获取来源对象,然后将 this 设为它。


对于所有其它操作,Reference Type 会自动变成属性的值(在我们这个情况下是一个函数)。


这整个机理对我们是不可见的。它仅在一些微妙的情形下才重要,例如一个方法是通过表达式从对象动态获取的。

目录
打赏
0
0
0
0
3
分享
相关文章
【python】连接sql server数据库,并实现简单的增删改查(1)
Python编程语言越来越受到大家的喜爱,本篇文章就从链接微软数据库进行增删改查操作的讲解
822 0
NineData:从Kafka到ClickHouse的数据同步解决方案
NineData 提供了强大的数据转换和映射功能,以解决 Kafka 和 ClickHouse 之间的格式和结构差异,确保数据在同步过程中的一致性和准确性。
648 2
NineData:从Kafka到ClickHouse的数据同步解决方案
Laravel-admin实现时间戳和自定义日期的自动转换
今天介绍我在使用laravel-admin遇到的坑,我数据库存储的时间是int类型的时间戳,需要在管理后台展示日期怎么优雅的实现呢?
1517 0
Laravel-admin实现时间戳和自定义日期的自动转换
重生之我在 Claude 上 “复刻”了 DeepSeek-R1 效果
本文讲述 DeepSeek-R1 出来以后,作者尝试使用提示词工程在 Claude 上“复刻”DeepSeek-R1 使用效果的过程,包括背景介绍、复刻的尝试与优化,还阐述了复刻的意义、对提示词工程的影响。
重生之我在 Claude 上 “复刻”了 DeepSeek-R1 效果
🚀告别繁琐!Python I/O管理实战,文件读写效率飙升的秘密
在日常编程中,高效的文件I/O管理对提升程序性能至关重要。Python通过内置的`open`函数及丰富的库简化了文件读写操作。本文从基本的文件读写入手,介绍了使用`with`语句自动管理文件、批量读写以减少I/O次数、调整缓冲区大小、选择合适编码格式以及利用第三方库(如pandas和numpy)等技巧,帮助你显著提升文件处理效率,让编程工作更加高效便捷。
148 0
Llama 3.3开源!70B媲美405B性能,支持128K上下文
近期,Meta开源了Llama 3.3 多语言大型语言模型(LLM),Llama 3.3 是一个预训练并经过指令调优的生成模型,参数量为70B(文本输入/文本输出)。
1753 5
Llama 3.3开源!70B媲美405B性能,支持128K上下文
阿里云基于Anycast弹性公网IP实现多源站的就近访问加速
本文介绍了如何使用阿里云Anycast弹性公网IP实现基于地理位置的访问策略,通过在不同地区部署ECS服务器并绑定Anycast实例,实现就近加速访问。具体步骤包括创建ECS、创建Anycast实例、绑定资源和测试效果。
357 2
高级前端常见的面试题?
【7月更文挑战第11天】 **高级前端面试聚焦候选人的技术深度、项目实战、问题解决及技术趋势洞察。涉及React/Vue生命周期、Redux/Vuex状态管理、Webpack优化、HTTP/HTTPS安全、性能提升策略、PWA、GraphQL、WebAssembly、安全性议题及项目管理。通过回答,展现候选人技术广度与应对复杂场景的能力。**
443 1
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问