彻底理解js中this的指向问题 javascriptthis

在平时写js、react等等这些代码的时候，经常会遇到使用this的情况，当自己信心满满的写完代码，点击运行的时候，发现报错 this.xxx is undefined 或者 this.xxx is not a function，但自己的代码里面明明定义了 xxx 的。
为什么会出现这些错误呢，其实就是 this 指向的对象里面没有定义的 xxx。
所以搞懂 this 的指向是非常有必要的。
一、执行上下文
在开始说this之前，先简单说一下执行上下文
执行上下文有三个部分：

变量对象（Variable Object，VO）
作用域链
this

这里里面的this就是本文要说的 this
执行上下文又分为：

全局执行上下文
函数执行上下文

全局执行上下文是在代码执行时就创建了，函数执行上下文是在函数调用的时候创建的，同一个函数，在不同时刻调用，会创建不同的执行上下文。
二、this的指向
【彻底理解js中this的指向问题】由于this存在于执行上下文当中，而执行上下文又是在代码执行和函数调用的时候创建的，所以this的指向也是在代码执行和函数调用时确定的。
可以this使用的不同场景，将this的指向分为三种情况：

全局中的this
函数中的this
构造函数中的this

全局中的this 在浏览器中，全局中的this指向的是 window，node.js中全局的this指向 globel。

var a = 1; console.log(this); // window console.log(this.a); // 1 console.log(window.a); // 1 console.log(this === window); // true

函数中的this 根据函数调用方式，又可以分为以下两种情况：

当函数作为对象中的方法被调用时的this
当函数被独立调用时的this

1、对象方法中的this
当函数作为对象中的方法被调用时，函数中this指向的是，函数的拥有者。

var a = 111; var obj = { a: 222, func: function() { console.log(this); // obj console.log(this.a); // 222 } } obj.func();

在这里 func函数，作为 obj对象 里面的方法被调用，所以 func 里面的 this 指向的就是 func函数 的拥有者，在这里就是 obj
2、被独立调用时
当函数被独立调用时，函数里面的 this 就指向全局上下文里面的 this，即 window ；在 严格模式 下，this使 undefined 。

var a = 111; function func1(){ var a = 222; console.log(this); // window console.log(this.a); // 111 } func1(); function func2(){ "use strict" console.log(this); // undefined } func2();

ES6箭头函数中的this 箭头函数中this指向是在函数定义时确定的，这一点和声明式函数定义有所区别。
在箭头函数定义时，函数this指向，定义时所在执行上下文里面的this

var func = () => { console.log(this); // window } func();

func 函数是一个箭头函数，所以 func 函数里面的 this 是在其定义是确定的，定义时所在的执行上下文是全局执行上下文，上下文中的 this 指向的是 window，所以 func 函数的 this 指向的也是this。

var a = 111; var obj = { a: 222, func: function() { var fun2 = () => { var a = 333; console.log(this.a); } fun2(); } } obj.func();

在这段代码里，当 func函数调用时，func 里面的 this 指向的是 obj，在 func函数里面定义了一个箭头函数，所以 func2函数里面的 this 指向的是 func函数执行上下文里面的 this，所以最后打印出来的是 obj对象里面的 a(222)。
**构造函数中的this 构造函数new创建对象的过程：

创建一个新对象；
将构造函数的 this 指向这个新对象；
执行构造函数内部代码；
返回这个新对象

构造函数中的this指向生成的对象

function Obj(a){ this.a = a; this.func = function(){ console.log(this); console.log(this.a); } } var obj = new Obj(2); obj.func();

在这段代码当中，在使用 new 实例化对象之后，调用对象里面的func函数，这里的func函数就是 obj对象 里面的一个方法，所以func函数里面的 this，就指向函数的拥有者，所以这里打印的结果是 2。
三、改变this指向的方法
可以使用call，apply，bind来改变函数里面的this的指向

var a = 111; var obj1 = { a: 222, func: function() { console.log(this); // {a: 333} console.log(this.a); // 333 } }var obj2 = { a: 333, } obj1.func.call(obj2,);

这里调用obj1里面的func方法的时候，在后面加了一个call，它会吧func里面的this改变为指向call里面指定的 obj2，所以最后打印的是 333 ，在这里调用call，函数会立即执行。
apply方法和call的作用是一样的，他们之间的区别就是，call在传递其他参数时，是一个一个传的，而apply是传递一个数组，这样当传递的数据个数增多的时候，就不用像call一样，挨个写道call后面的括号里了。
比如：