JavaScript中this取值机制的本质

2024年1月16日 161次阅读来源: 科研者

很多前端人员对JavaScript中函数this的取值感到迷域，感觉没有一个简单的任何情况都适用的规则，即使有多年经验的JavaScript程序员，也只是记住或者总结了在各种情况下的规则，但是仍没有能统领全景的规则，所以，当他们遇到本文中第4部分《不容易理解的函数调用方式》的代码时，仍然搞不清this的值；
为了弄清this的本质机制，我进行了一系列的研究，并总结出了一个万能的且容易理解的规则；为了帮助大家理解，现分享研究成果如下：（若想更深入地理解JavaScript的各种特性，可以参考另一篇文章：《JavaScript的发现与理解》）

内容

一. 函数this的取值机制

经过测试，总结得出以下结论：

结论1：容易理解的this取值机制

函数的this的值取决于函数的调用方式；
函数有2种调用方式，如下：

直接调用；如：fn()；
属性调用；如：obj.fn()；

当函数以直接调用的方式调用时，this的值为全局对象，如：winodw；
当函数以属性调用的方式调用时，this的值为调用函数的对象；

对象属性调用有2种方式：

打点调用，如：obj.attr；
方括号调用，如：obj["attr"]；

所有通过这2种属性调用方式调用的函数的this的值都为调用函数的对象；

结论2：this取值的本质机制

我认为，本质上，函数的this的值取决于函数对象的查找方式：

如果函数对象在被调用时是在作用域链上查找到的，则该函数中this的值为全局对象；
如果函数对象在被调用时是在原型链上查找到的，则该函数中this的值为调用函数的对象；

备注：
关于标识符查找机制请参考《JavaScript中访问属性和访问变量的标识符查找规则》

因为：

当函数以 直接调用 的方式调用时，它是在作用域链上被查找到的，所以该函数中this的值为全局对象；
当函数以 属性调用 的方式调用时，它是在原型链上被查找到的，所以该函数中this的值为调用函数的对象；

所以：

结论1是正确的，并且结论1只是结论2的一个特例，即：结论2包含结论1；

二. 数组的本质

数组的本质还是对象，数组是通过对象实现的，它并没有为索引加入新的机制，数组中的索引本质是作为数组对象的属性存在的，因为打点调用的属性不能是数字，所以数组的索引不通过打点调用，只能通过方括号的方式调用；

三. 调用数组中的函数时的this值

因为数组中的索引本质是作为数组对象的属性存在的，所以调用数组中的函数（如：array[index]()；）时，被调用的函数的this的值为该数组对象；

四. 不容易理解的函数调用方式

假设在全局环境中有以下代码：

var inWhere = "The Window";
var aObject = {
        inWhere:"The aObject",
        getWhere:function(){
              return this.inWhere
           }
  };

则在全局环境下，以下三句代码及其执行结果如下：
代码1:

aObject.getWhere();     //结果："The aObject"

代码2:

(aObject.getWhere)();       //结果："The aObject"

代码3:

(aObject.getWhere=aObject.getWhere)();  //结果："The Window"

我认为造成以上执行结果的原因是：

因为对于代码1和代码2中的函数在被调用时，都是在原型链上查找到的，所以它们的执行结果均为The aObject；
因为赋值语句=在内部本质上是作为函数来实现的，并且这个函数有个返回值，会返回等号=右边表达式的值，在代码3中该返回值就是getWhere函数，所以 (aObject.getWhere=aObject.getWhere) 结果是getWhere函数，并且这个函数是从等号=函数的返回值中取得的；又因为返回值是在作用域链中查找到的，所以在getWhere被执行时，this的值为全局对象，所以代码3执行结果是The Window；

五.注意

计算属性的get和set函数中的this也符合上述规则；
ES6引用了模块机制，对模块中顶层的this做了处理，使得在ES6的模块中，顶层的this的值是undefined，所以，不应该在顶层代码使用this；所以，如果在模块中直接访问全局对象（如 window 对象）的计算属性（即：不是通过调用 window 属性的方式来访问，如 window.计算属性名，而是直接访问，如 全局对象的计算属性名），则该计算属性的 set 和 get 函数的 this 也是 undefined ；

    原文作者：科研者
    原文地址: https://www.jianshu.com/p/776f3cf07b13
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网