很多前端人员对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 ;