持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

js中的this详解

什么是this？

this指的是当前对象的一个引用

运行时上下文和调用栈

运行时上下文理解为运行时的当前运行环境，而JavaScript代码的执行是执行栈来完成，执行栈又称为调用栈，后面一律称为调用栈。调用栈正如其名字一样是一个LIFO的栈结构，即后进先出。

var a = 'Hello World!';

function first() {  
  console.log('Inside first function');  
  second();  
  console.log('Again inside first function');  
}
 
function second() {  
  console.log('Inside second function');  
}
 
first();  
console.log('Inside Global Execution Context');

上述代码运行时（即调用first函数时）我们理解为首先全局上下文最先入栈，其次是first函数的上下文，最后是second函数的上下文入栈，而三个上下文环境的出栈顺序正好相反，second函数会最先执行完成并且其上下文出栈，其次是first函数执行完成并且上下文出栈，最后是全局上下文出栈。

而上下文分两个阶段被创建，一是创建阶段，二是执行阶段，而在创建阶段的时候会进行this的绑定，我理解的是会在执行的上下文创建一个this的引用来指向这个对象。

this的指向

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();
window.a()

这里a( )和window.a( )的作用效果是相同的，这里就可以看作是给window对象添加了一个方法a( )，就像window的alert( )一样，此时的this指向的都是window对象。这里的 o 实际上是给window对象添加了一个属性，等同于

var window = {
    alert(){
    	.......
    	},
    o:{
        user:"追梦子",
    	fn:function(){
        console.log(this.user);  //追梦子
        }
    }
}
window.o.fn();

是相当于给window添加了一个o的属性对象

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象

1.箭头函数内的this对象，就是定义时所在的对象，而不是使用时所在的对象。 2.this对象的指向是可变的，但是在箭头函数中，它是固定的。比如其他对象的函数我们可以通过调用call和apply来改变函数体内部this的指向

箭头函数中的this

向外层作用域中，一层层查找this，查到有this的定义为止，这是因为箭头函数本身是没有this的，需要注意的是箭头函数中的this是在定义的时候决定的，并不是像之前在函数调用的时候确定。

const obj = {
	aaa() {
		setTimeout(function(){
			console.log(this); //window
	})
		setTimeout(()=>{
			console.log(this); //obj
	})
}
}

上个例子箭头函数中的this，会向外层找this，是在aaa这个方法中，而aaa方法中的this是obj对象。