总之一句话:谁调用,this就指向谁。
- 普通函数中
- 构造函数中
- 箭头函数中
- 原型链上的this
- getter、setter中
- 定时器回调函数中
- 作为对象方法中
- dom事件处理函数中
- 内联事件函数中
- 在Function构造器中
1、普通函数中:
- 非严格模式下指向全局window
- 严格模式下undefined
2、构造函数中:
- 指向实例对象
3、箭头函数中:
- 箭头函数本身没有this,函数体中的this继承于所在作用域的this
4、原型链上的this:
- 指向调用该方法的对象
5、getter、setter中:
- 指向被设置或获取的目标对象
6、定时器的回调函数中:
- 无论是否严格模式,任何作用域下,都指向全局window
方式一:
setTimeout(function(){console.log(this)}, 0);
方式二:
var a = {
b(){
setTimeout(function(){console.log(this)}, 0)
}
}
a.b();
方式三:
var q = {q : function(){console.log(this)}};
var a = {b: function(){
setTimeout(q.q, 0);
}}
a.b();
运行结果:
7、作为对象方法中:
- 指向调用该方法的对象
var a = {
b(){
console.log(this)
}
}
a.b()
运行结果:
8、dom事件处理函数中:
- 指向触发事件的元素
//html
<div id="test"></div>
//js:
var fun = function(){
console.log(this)
}
var elm = document.getElementById("test");
elm.addEventListener('click', fun, false);
9、内联事件函数中:
- 外层指向当前dom节点
- 函数中的函数指向全局window
//html
<div onclick="console.log(this)"></div>
//html
<div onclick="console.log(this); var a = function(){console.log(this); a(); }"></div>
10、在function构造器中:
- 无论是否严格模式,任何作用域下,都指向全局window
var a = { b: function(){ var f = new Function('console.log(this)'); f(); } } a.b();
运行结果: