计算机杂谈让前端飞程序员

JavaScript中this取值机制的本质

2017-08-25  本文已影响0人  科研者

很多前端人员对JavaScript中函数this的取值感到迷域，感觉没有一个简单的任何情况都适用的规则，即使有多年经验的JavaScript程序员，也只是记住或者总结了在各种情况下的规则，但是仍没有能统领全景的规则，所以，当他们遇到本文中第4部分《不容易理解的函数调用方式》的代码时，仍然搞不清this的值；

为了弄清this的本质机制，我进行了一系列的研究，并总结出了一个万能的且容易理解的规则；为了帮助大家理解，现分享研究成果如下：（若想更深入地理解JavaScript的各种特性，可以参考另一篇文章：《JavaScript的发现与理解》）

目录

一. 函数this的取值机制
二. 数组的本质
三. 调用数组中的函数时的this值
四. 不容易理解的函数调用方式
五.注意

内容

一. 函数this的取值机制

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

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

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

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

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

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

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

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

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

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

因为：

所以：

结论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"

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

五.注意

上一篇 下一篇

猜你喜欢

热点阅读