JS中的this用法很灵活，使用场景不同，this的指向也会不同。

本文我先给出this在使用过程中指向的注意点，配合下文示例服用更佳：

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象
如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格模式中this指向的不是window
如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象
如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的，例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子3是不一样的，例子3是直接执行了fn
例子一：

function a(){
    var userName = 'Nitx';
    console.log(this.userName);  //undefined
    console.log(this);  //window
}

a();    //
1
2
3
4
5
6
7
解释：等同于window.a(),而this指向的是在函数执行时最终调用它的那个对象，在本例中就是window调用的，而window对象中又没有userName属性

例子二：

var o = {
    a : 10,
    fn : function(){
        console.log(this.a)
    }
}
o.fn(); //10
1
2
3
4
5
6
7
解释：fn函数执行时调用this的对象是o，所以this就指向了o，this.uer就是指的o.user的值，这里需求强调下，this的指向在函数创建时是决定不了的，只有当函数被调用时才能决定，谁调用就指向谁

例子三：

var o = {
    a : 10,
    b : {
        a : 12,
        fn : function(){
            console.log(this.a);
        }
    }
}
o.b.fn();   //12
1
2
3
4
5
6
7
8
9
10
解释：尽管fn函数被多层对象中的最外层对象o调用，但其中的this仍然指向该函数的上一级对象

//例子四：

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

var j = o.b.fn;
j();    //undefined  
1
2
3
4
5
6
7
8
9
10
11
12
解释：这边怎么又指向window了呢？其实还需要记住一个关于this的关键用法，this永远指向最后调用它的那个对象，这个例子虽然函数fn被对象b所引用，但是在将fn函数赋值给变量j的时候，却没有执行，而最终是变量j()来执行的，那么这个问题又回到j变量是谁调用上来了，此时变量j是window对象下面的属性，所以就是window是最后调用的对象，所以this指向window

例子五 构造函数中的this指向：

function Foo(){
    this.userName = 'Nitx';
}

var foo = new Foo();
console.log(foo.userName);  //'Nitx'  

console.log(typeof null)    //Object    表示null是一个对象
console.log(typeof undefined)   //undefined 表示undefined是一个undefined类型
1
2
3
4
5
6
7
8
9
解释：new关键字会改变this的指向，把this指向对象foo，为什么说foo是对象，因为用了new关键字就是创建一个对象实例，所以此处从Foo构造函数中new出来的对象实例foo其实就相当于复制了复制了一份Foo到对象实例foo里面，但此时仅只是创建，还没有执行，当调用这个函数Foo时（其实就是代码Foo(）表示调用），并且当调用函数Foo的是对象a时，this的指向就变更为指向foo对象实例上面，由于foo对象实例是从Foo构造函数中new出来的，所以Foo具有的各种属性和方法，foo对象实例也会具有。此时 foo.userName === this.userName === ‘Nitx’

当this遇到return时该怎么指向？

情况1：

function fn(){
    this.user = 'Nitx';
    return {};        //返回一个空对象
}
var a = new fn();
console.log(a.user)        //undefined
1
2
3
4
5
6
情况2：

function fn(){
    this.user = 'Nitx';
    return function(){}
}
var a = new fn();
console.log(a.user);        //undefined
1
2
3
4
5
6
情况3：

function fn(){
    this.user = 'Nitx';
    return 1;        //返回值不是对象
}
var a = new fn();
console.log(a.user);        //Nitx
1
2
3
4
5
6
情况4：

function fn(){
    this.user = 'Nitx';
    return undefined;
}
var a = new fn();
console.log(a.user);        //Nitx
1
2
3
4
5
6
总结： 如果return返回值是一个对象，则this就指向那个返回的对象，如果return返回值不是一个对象，则this依旧指向new出来的对象实例。

但是有个例外特殊，就是null，虽然null也是一个对象，但是如果返回值是null的话，this依旧指向new出来的那个对象实例：

function fn(){
    this.user = 'Nitx';
    return null;
}
var a = new fn();
console.log(a.user)        //Nitx
1
2
3
4
5
6
最后补充几个知识点：

在严格模式下，默认的this指向不再是window，而是undefined
new操作符会改变this的指向，是因为new关键字会创建一个空的对象，然后自动调用一个函数apply方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象所代替
---------------------
【转载，仅作分享，侵删】
作者： 一期一会
原文：https://blog.csdn.net/qq_34832846/article/details/86062215

奈斯