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