JS中的this
背景
JS中的this指向问题,一直以来自己并不是十分的清楚,平时在开发中使用时倒是也能正常应用,但是对其使用和判断并不能信手拈来,所以自己搜索了一些资料,总结了一下,也希望对大家有所帮助。
目录
- 什么是this?
- this的指向
- 为什么要使用this?
1. 什么的this?
this,从字面上含义是(指较近的人或事物) 这,这个;
this:表示当前对象的一个引用。
this的指向:this不是固定不变的,是根据调用的上下文(执行时环境)改变而改变。
- 如果单独使用,this 表示全局对象。
- 在方法中,this 表示该方法所属的对象。
- 在函数中,this 表示全局对象。
- 在函数中,在严格模式下,this 是未定义的(undefined)。
- 在事件中,this 表示接收事件的元素。
2. this的指向
2.1 全局环境
全局环境就是在<script></script>
里面,这里的this始终指向的是window对象。
<script>
console.log(this); // 全局环境,即window对象下,this -> window
</script>
2.2 局部环境
严格模式下,函数中的this为undefined;
1)在全局作用域下直接调用函数,this指向window
function fun() {
console.log(this);
}
fun(); // fun() 实际上是window.fun(), 所以this -> window
2)对象函数调用,哪个对象调用就指向哪个对象
var obj1 = {
a: 1,
fun1: function() {
console.log(this);
},
obj2: {
fun2: function() {
console.log(this);
}
}
}
obj1.fun1(); // fun1由obj调用,所以this -> obj1
obj1.obj2.fun2(); // fun2由obj2调用,所以this -> obj2
3)new实例化对象,构造函数中的this指向实例对象
var Person = function() {
this.name = "小刘"; // 这里的this -> obj对象
}
var obj = new Person();
4)事件中的this
在HTML事件句柄中,this指向了接收事件的HTML元素
<button onclick="this.style.display='none'">点我我就消失</button>
3. 为什么要使用this?
首先,我们得问问自己:
- 为什么要在代码中使用this?
存在即是合理的,为什么要使用this,可以参考下面的链接
JavaScript 的 this 原理 - 阮一峰