JS中的this详解

JS中的this

背景

JS中的this指向问题，一直以来自己并不是十分的清楚，平时在开发中使用时倒是也能正常应用，但是对其使用和判断并不能信手拈来，所以自己搜索了一些资料，总结了一下，也希望对大家有所帮助。

目录

1. 什么是this？
2. this的指向
3. 为什么要使用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>

5）改变this的指向

3. 为什么要使用this?

首先，我们得问问自己：

• 为什么要在代码中使用this?

存在即是合理的，为什么要使用this，可以参考下面的链接
JavaScript 的 this 原理 - 阮一峰