JavaScript中this指向的简单学习

前提理解

this的指向在函数定义的时候是无法确定的，只有在函数执行的时候才能确定this指向，即this指向的是那个调用它的对象。

1、 普通函数调用

function fn() {
    var user = "dee";
    console.log(this.user); //undefined
    console.log(this); //Window
}
fn();

如上所述，this最终指向的是调用它的对象，此处的函数fn实际指向window对象。如下证明：

var user = "dee";
function fn(){
    alert(this.user);//dee
}
fn();

2、对象函数调用

var o = {
    user:"dee",
    fn:function(){
        console.log(this.user);  //dee
    }
}
o.fn();

this指向的是对象o，因为调用函数fn是通过o.fn()执行的，自然指向对象o。

var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window；
情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

3、构造函数调用

function Fn(){
    this.user = "dee";
}
var a = new Fn();
console.log(a.user); // dee
var b = new Fn();
b.user = 'gem';
console.log(b.user); // gem

new 操作符的四个步骤：

• 创建一个新对象；
• 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
• 执行构造函数中的代码（为这个新对象添加属性）；
• 返回新对象；

注意：在构造函数里面返回一个对象，会直接返回这个对象，而不是执行构造函数后创建的对象。例：

function fn()  
{  
    this.user = 'dee';  
    return {};  
}
var a = new fn;  
console.log(a); // {}
console.log(a.user); //undefined

4、箭头函数调用

在箭头函数里面，没有this，箭头函数里面的this是继承外面的环境。

let obj={
    a:222,
    fn:function(){    
        setTimeout(function(){console.log(this.a)});
    }
};
obj.fn();//undefined

虽然fn()里面的this指向obj，但传给setTimeout的是普通函数，this指向是window ， window下面没有a ，所以这里输出undefined。换成箭头函数：

let obj={
    a:222,
    fn:function(){    
        setTimeout(()=>{console.log(this.a)});
    }
};
obj.fn();//222

传给setTimeout的是箭头函数，因为箭头函数里面没有this，所以要向上层作用域查找。在此处， setTimeout的上层作用域是fn，而fn里面的this指向obj，因此setTimeout里面的箭头函数的this指向obj，所以输出222 。

参考文章

1、https://blog.csdn.net/weixin_37722222/article/details/81625826
2、https://www.cnblogs.com/rinack/p/5698018.html
3、https://www.cnblogs.com/faith3/p/6209741.html