JavaScript中的this关键词是使很多程序员的一个头痛的问题,很多人都会选择其他代替的方法来逃避this的问题,接下来会给出一些this的用例子(例子都是在浏览器坏境下执行),来说明this分别指向谁。
首先要知道每个函数的this是在调用时被绑定的,完全取决于函数的调用位置(也就是函数的调用方法)
例子1
var obj = { say: function () { setTimeout(() => { console.log(this) // obj }, 0) } } obj.say()复制代码
上面例子的setTimeout中是箭头函数,在箭头函数中的this和上一级指向是同一个。上面代码可以写成
var obj = { say: function () { let _self = this setTimeout(() => { console.log(_self) }, 0) } } obj.say()复制代码
这里是obj调用的say,所以say这个函数中的this是指向obj的,也就是_self是obj,那么上面的例子中的this是指向obj的。
例子2
function test() { console.log(this) // Window } test()复制代码
该例子中的this指向的是Window,test() 相当于 window.test()
例子3
var obj = { say: function () { function _say() { console.log(this) // Window } return _say.bind(obj) } } obj.say()复制代码
该列子中的this指向的是Window,要理解这个this要先了解这个代码的执行顺序
第一步:var obj; 声明变量第二步: _say.bind(obj) 给say赋值 这步的时候obj为undefinde第三步 obj = {...} 给obj赋值复制代码
这里有句话说obj.bind(arg) arg为mull 和 undefinde 时 obj函数中的this是指向Window的。
例子4
var obj = {} obj.say = function () { function _say() { console.log(this) // obj } return _say.bind(obj) }() obj.say()复制代码
该例子和上一个很相似,区别是 执行 _say.bind(obj) 该代码时 参数obj不一样,上面为 undefinde,而在该例子中执行bind时obj已经赋值{},所以该例子中的this为obj
结尾
最后关于this问题《你不知道的JavaScript》中有非常详细的说明。