一直以来我们对JS 中的this指向问题尤为头疼，那么今天梦颜带大家认识认识这个万恶的this
大家首先要明确一点
this概念：任何函数，内部都有一个变量(系统自动产生)this，每一个函数都有自己的主人。
那就是this 永远指向当前函数的主人 。
【注】构造函数中的this指向当前新创建的对象。构造函数主人就是属于新创建的对象。
1、 普通函数的调用
```javascript
//一般情况下this指向window
window.username='潇梦颜'
function fn(){
alert(this.username);//潇梦颜
}
fn();
//调用可以理解为
//window.fn();
```
2.对象函数调用
这个相对来说就是比较好理解啦， this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的
```javascript
window.b=我是22
let obj={
a:我是1,
fn:function(){
alert(this.a);//我是1
alert(this.b);//undefined
}
}
obj.fn();
```
当然也有比较特殊的情况
如下：
```javascript
//1.
var o = {
a:10,
b:{
// a:12,
fn:function(){
console.log(this.a); //undefined
}
}
}
o.b.fn();
```
此案例中对象b中没有属性a，这个this指向的也是对象b，因为**this只会指向它的上一级对象**，不管这个对象中有没有this要的东西。
```javascript
//2.
var o = {
a:10,
b:{
a:12,
fn:function(){
console.log(this.a); //undefined
console.log(this); //window
}
}
}
var j = o.b.fn;
j();
```
这里this指向的是window，是不是有些难搞？
遇它不要慌，其实**this永远指向的是最后调用它的对象**，也就是看它执行的时候是谁调用的，例子中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并**没有执行**所以最终指向的是window
```javascript
//3.
let obj1={
a:22
};
let obj2={
a:111,
fn:function(){
alert(this.a);
}
}
obj1.fn=obj2.fn;
obj1.fn();//22
```
虽然obj1.fn是从obj2.fn赋值而来，但是调用函数的是obj1，所以this指向obj1
**看到这里对this是不是有点好感了呢？**
this讲来讲去其实就是那么一回事， 在不同的情况和环境下this也会有不同，对于这个这个大家也不用着急， 只能慢慢地的去体会，也是需有一定的代码基础的。
3.构造函数的调用
```javascript
//1.
let userName=function(){
this.name='111';
}
let subName=new userName();
subName.name='cn';
console.log(this.name);//cn
let subName1=new userName();
console.log(this.name)//111
```
关于这个案例我们来回忆下（new的四个步骤）就差不多了！
在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象**（但是有一个坑，虽然一般不会出现，但是有必要提一下。）
```javascript
//2.
function Fn(){
this.user = "潇梦颜";
}
var a = new Fn();
console.log(a.user); //潇梦颜
```
这里之所以对象a可以点出函数Fn里面的user是因为**new关键字可以改变this的指向 ，将这个this指向对象a，因为用了new关键字就是创建一个对象实例，我们这里用变量a创建了一个Fn的实例（**相当于复制了一份Fn到对象a里面**），此时仅仅只是创建，并没有执行，而调用这个函数Fn的是对象a，那么this指向的自然是对象a。
<font color=red>**补充说明一下，当this遇到return的时候该 怎么办呢？**</font>
```javascript
//3.
function fn()
{
this.user = '潇梦颜';
return {};
//return function(){};
}
var a = new fn;
console.log(a.user); //undefined
```
<font color=red> 如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数**</font>
```javascript
function fn()
{
this.user = '潇梦颜';
return undefined;
// return null;
}
var a = new fn;
console.log(a); //fn {user: "潇梦颜"}
```
4.apply和call调用
```javascript
function show(x, y){
alert(x + ", " + y);
alert(this);
}
// show(10, 20); //Window
// show.call("call", 20, 30);
// show.apply("apply", [30, 40]);
// show.bind("bind")(40, 50);
```
**apply、call以及bind都是用来强制改变this指向的方法**
1.call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。
2.apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）。
3.bind与apply、call最大的区别是它不会立即调用。
5、箭头函数调用
在ES6中给我们新提供了一种箭头函数，这提高了我们的开发效率，但是在箭头函数里面，没有 this ，**箭头函数里面的 this 是继承外面的环境**。所以在处理一些指向问题的时候也可以直接用箭头函数代替，既方便又好理解
举个栗子~~
```javascript
let obj={
a:1,
fn:function(){
setTimeout(function(){
console.log(this.a)
});
}
};
obj.fn();//undefined
============================================================
解决方法：
let obj={
a:1,
var _this = this;
fn:function(){
setTimeout(function(){
console.log(_this.a)
});
}
};
obj.fn();//1
//此时this将一直指向obj;
```
栗子中，虽然 fn() 里面的 this 是指向 obj ，但是，传给 **setTimeout 的是普通函数**， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。
改用箭头函数=>
```javascript
let obj={
a:1,
fn:function(){
setTimeout(()=>{
console.log(this.a)
});
}
};
obj.fn();//1
```
这次可以输出 1是因为，**传给 setTimeout 的是箭头函数**，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj 。所以输出结果为 1
说到这里也该收尾了，蟹蟹大家的支持，梦颜欢迎大家多多指教，在工程师的道路上共同进步，加油！
小编持续更新ing~┏(＾0＾)┛下次见~~拜拜~~
