明白JavaScript的中心知识点：This

2024年5月16日 221次阅读 来源: ushio

this 是 JavaScript 中异常主要且运用最广的一个症结字，它的值指向了一个对象的援用。这个援用的效果异常轻易引发开辟者的误判，所以必需对这个症结字寻根究底。

实行高低文：Execution Context

在深切相识 this 对象之前先引见另一个观点：实行高低文。

没错，实行高低文与 this 在实质上是两个观点，或者说它们指代的范畴有差别，想要正确熟悉 this，就得先把它们区离开。

可以把实行高低文设想为一个容器，个中包含了一句句待实行的代码。代码在这个容器中有高低行两条线路，是由某一些特别代码所触发（如函数），上行线路跳入了一个新的容器，最先在新容器中实行另一些代码，本容器中的后续代码被临时中缀；假如新容器中另有代码会触发上行线路，就继承往上增添新容器，并交出控制权，层层叠加，形成了一个从底往上情势的叠罗汉，这就是 JavaScript 运转时的实行高低文栈。

实行高低文这一笼统观点自身包含了更多有关 JavaScript 这门言语的内部机制，关于言语运用者来说是不透明的，个中与运转前的编译划定规矩有很大关联，并被包含到全部顺序运转前的初始化历程当中，与词法作用域的变量剖析划定规矩相配合，将这些静态剖析后的变量带入运转时的环境，所以它是顺序运转时的症结内部组件或者说容器，而 JavaScript 将对实行高低文的援用供应给顺序开辟者的唯一进口就是 this，它得以接见被编译后带入到某个实行高低文运转环境中的变量。this 指代的实在只是内部笼统的实行高低文向用户所开放的那一部份，实在体是一个对象，绑定了很多编译后的变量。

以下是一段关于实行高低文精炼的总结：

An execution context is purely a specification mechanism and need not correspond to any particular artefact of an ECMAScript implementation. It is impossible for ECMAScript code to directly access or observe an execution context.

翻译：实行高低文纯粹是一种范例机制，它不须要与基于 ECMAScript 范例的任何特定扩大完成对应。ECMAScript 代码没法直接接见或视察实行高低文。

关于This对象：What’s This

我将官方文档和一些别的文章里的申明略加梳理，可以从以下段落中较为清楚地看出 this 的实质：

First, know that all functions in JavaScript have properties, just as objects have properties. And when a function executes, it gets the
this property—a variable with the value of the object that invokes the function where
this is used.

The this keyword evaluates to the value of the ThisBinding of the current execution context.

The abstract operation GetThisEnvironment finds the Environment Record that currently supplies the binding of the keyword this

this is not assigned a value until an object invokes the function where this is defined.

翻译：

  • 起首，要晓得 JavaScript 中所有的函数与对象一样都具有属性。当一个函数实行时，它获得 this 属性——一个指向挪用函数的对象的变量。
  • this 症结字盘算为当前实行高低文的 ThisBinding 属性的值。
  • GetThisEnvironment 笼统运算查找当前供应 this 症结字的绑定的环境纪录。
  • 在对象挪用了定义了 this 的函数之前，this 不会被赋值。

由此可得出关于 this 的完整定义：this 是在顺序运转时，经由历程言语内部笼统操纵在实行高低文中动态盘算获得的，指向挪用运用了其的函数的对象的变量。

实行高低文 vs. This症结字：Execution Context vs. This Keyword

实行高低文和 this 症结字的关联与潜认识相干于认识的关联相似，实行高低文是冰山下深奥巨大而不可窥伺的秘地，而 this 只将其一个小部份显露出来。由于 JavaScript 是面向对象的编程言语，所以实行高低文实在质相当于一个对象，this 指向了它向开辟者开放了的一系列属性鸠合的对象，因此我把 this 叫做实行高低文的援用对象。

This因何而来：Why This

JavaScript 在编写初始自创了JAVA 和 C 言语的特征，即使实质上差别，但照样把这个犹如通例般存在的 this 拿了过来。运用 this 的缘由实在很简朴：

起首，我们常常没法得知挪用了函数的对象的称号，而且有时刻根本就没有称号可以用来援用挪用对象。这是一个急切的缘由，由于我们在开辟时必定会碰到须要援用挪用函数的对象的场景。

其次，防止反复指代，就像我们常常运用第三人称来指代前文的主体一样，作为顺序员人人固然很愿意运用一个快捷体式格局来防止机器反复一些不必要的代码，这也是“言语”这一主要产物的特征。

末了，它供应给我们完成高等功用的可能性，我们可以经由历程 this 动态关于实行高低文的指代而完成顺序的复用性和扩大。

This的推断划定规矩：Rules of This

对 this 的泉源举行深切探讨的目标就是为了在开辟中对本身所运用的 this 症结字指代的对象举行正确的剖断，它就是一个变量，所以当我们运用它的时刻，必需清楚地晓得它的值究竟是什么。

平常来说，我们可以经由历程肯定是哪一个对象具有所挪用的函数来肯定其 this 的指向。这是由于 this 的绑定值是在函数挪用的时刻才给予的，要看函数在哪一个高低文对象中挪用，但有时刻这不是仅用肉眼就可以视察出来的。

别的还要庄重声明一下，虽然在之前下定义的时刻将 this 的观点明确地分别到了运转阶段，但由于它作为一个变量的特征，是可以转变援用值的，它的值的盘算与词法划定规矩照样息息相干，得将编译和运转时两个阶段结合起来，总结出关于推断 this 绑定值的基本原则。

this 症结字绑定的操纵是在言语内核机制的运转时里实行的，由于没法去探究其内部，只能经由历程官方文档中给出的一系列形貌顺序来得知其怎样推断，可以梳理出函数挪用的内部历程当中对 this 的绑定盘算的依据：

前置学问 1: 内部机制建立实行高低文、初始化函数所属范畴和建立相干环境纪录

在函数被真正实行之前，内部机制会实行建立具有函数的范畴、建立实行高低文、移交当前实行高低文控制权、建立环境纪录、环境纪录对象参数的绑定等一系列操纵，为顺序运转做编译预备。在将函数推入实行栈顶层的时刻，对其高低文的归属有以下的推断历程，此处与一个新的观点范畴有关：

  • 假如范畴中的属性 this 返回了一个对象，就将内部属性 thisValue 设置为以此对象为基本依据规格建立的 js 对象，不然 thisValue 绑定值为 undefined，表明范畴的全局对象（当地全局对象）将设置为全局对象（顺序全局对象）。

这里在新范例里涌现的一个观点范畴庖代了之前版本中简朴的作用域的观点，由于完成了模块化等其他新特征，所以作用域的观点可以相当于扩大成了如今的范畴，它部属了其他几个环境纪录，个中变量的绑定分别在差别环境纪录中，这里就不做深切诠释了。

范畴中比较主要的属性是范畴中的全局对象，这与顺序运转时的全局对象的观点要加以区分，所以可以把范畴中的全局对象看做是当地全局变量，实在也就是函数所属的高低文对象，它的值就是在适才的以上的推断中肯定的，假如没有这个前置对象，就会把全局对象设置为当地全局对象的值。

前置学问 2: 内部机制建立函数

内部机制在词法分析阶段会经由历程函数的定义体式格局向建立函数操纵传入几种差别范例的函数范例：Normal、Arrow、Method，相对应的是平常函数、箭头函数、作为对象要领的函数。同时在这一步还传入指定代码严厉形式的参数 strict。然后举行函数的初始化的。

体式格局 1: 内部机制初始化平常函数

内部机制在这一步会设置函数的一个主要属性 ThisMode 的值，它是决议 this 绑定值的依据，它的值是依据上一步传入的参数来推断的，顺次实行一下三条推断分支：

  • 函数范例为 Arrow：将 ThisMode 赋值为 lexical ，这个值在盘算 this 绑定时将依据词法作用域的划定规矩来赋值，也就是说 this 的值与定义函数的词法作用域中的 this 相一致。
  • 代码形式为 strict ：将 ThisMode 赋值 strict，依据这个值盘算 this 绑定时只会将显式传入的高低文对象绑定给 this。
  • 非以上两种前提：将 ThisMode 赋值 global，被设置为 global 以后，函数在运转阶段被挪用时，this 的值就会指向全局对象。

体式格局 2: 内部机制建立对象要领函数

作为对象属性的要领是别的来盘算 this 的，只要在作为对象要领被挪用的函数，在内部建立函数时才会传入 Method 值。毫无疑问它将 this 指向了这个前置的对象。组织函数也是同理。

总结一下对平常运用到的函数的推断划定规矩以下：

  • 箭头函数：不管挪用位置，取它词法定义处的外层高低文中绑定的 this，没有中心当地对象存在时老是可以取到全局对象。
  • 严厉形式：不管挪用位置，只取显式给定的高低文绑定的 this，经由历程 call()、apply()、bind() 要领传入的第一参数，不然是 undefined。
  • new 症结字挪用的组织器函数：不管挪用位置，this 必为在内部建立的新的实例对象
  • 显式绑定高低文对象的平常函数：不管挪用位置，this 必为传入的高低文对象

  • 要领函数：属于隐式绑定，不管词法定义位置，现实情况视挪用途而定：

    • 直接挪用时：this 为前置高低文对象
    • 作为被援用值时：this 为挪用时的高低文对象，在其他对象中援用 this 就是这个挪用它的对象；被全局变量援用，this 就是全局对象。
  • 平常函数：不管词法定义位置，视挪用途而定，实在质在内存都都是被作为援用值挪用的，所以 this 都指向全局对象，严厉形式划定规矩优先。

别的关于事宜形成的一些 this 误会可以参考The this keyword这篇文章。实在并不属于特别划定规矩，是由于种种事宜监听定义体式格局自身形成的。

在现实开辟中可以参考《You Don’t Know JS》里关于 this 的绑定划定规矩和优先级的章节Nothing But Rules。在这套基本通用划定规矩以外，箭头函数利用了另一套体式格局来推断 this 的绑定值，这篇文章里也有详实的叙说。

参考文献：Reference

    原文作者：ushio
    原文地址: https://segmentfault.com/a/1190000018908361
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞