JavaScript中this的指向

MDN文档上this介绍

与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

在绝大多数情况下，函数的调用方式决定了this的值。this不能在执行期间被赋值，并且在每次函数被调用时this的值也可能会不同。ES5引入了bind方法来设置函数的this值，而不用考虑函数如何被调用的，
ES2015 引入了支持this词法解析的箭头函数（它在闭合的执行环境内设置this的值）。

1.this的最终指向的是那个调用它的对象

例子1：

调用fn方法的对象为window

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

例子2：

例子1=例子2

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

例子3：

调用fn方法的对象为o

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

例子4：

例子3=例子4

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

例子5：

调用fn方法的对象为b

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

例子6：

调用fn方法的对象为window

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

2.特殊情况

2.1构造函数中实例变量

function Fn(){
    this.user = "追梦子";
}
var a = new Fn();
console.log(a.user); //追梦子

2.2构造函数中return

返回引用类型（对象，数组，函数），this指向这个对象

function fn()  
{  
    this.user = '追梦子';  
    return {
      user : 'return里的user'
    };  
}
var a = new fn;  
console.log(a.user); //return里的user

返回非引用类型，this指向函数的实例

function fn()  
{  
    this.user = '追梦子';  
    return 1;
}
var a = new fn;  
console.log(a.user); //追梦子

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

function fn()  
{  
    this.user = '追梦子';  
    return null;
}
var a = new fn;  
console.log(a.user); //追梦子

在JavaScript构造函数中：如果return值类型，那么对构造函数没有影响，返回实例化对象；如果return引用类型（数组，函数，对象），那么实例化对象就会返回该引用类型。

2.3箭头函数

箭头函数没有自己的this值，箭头函数中所使用的this都是来自函数作用域链，它的取值遵循普通普通变量一样的规则，在函数作用域链中一层一层往上找。

// 创建一个含有bar方法的obj对象，
// bar返回一个函数，
// 这个函数返回this，
// 这个返回的函数是以箭头函数创建的，
// 所以它的this被永久绑定到了它外层函数的this。
// bar的值可以在调用中设置，这反过来又设置了返回函数的值。
var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar();

// 直接调用fn而不设置this，
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj); // true

// 但是注意，如果你只是引用obj的方法，
// 而没有调用它
var fn2 = obj.bar;
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window); // true

参考：

https://www.cnblogs.com/pssp/p/5216085.html（理解this的基础概论）

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this（MDN文档）

https://www.cnblogs.com/xxcn/p/11056495.html（MDN文档的个人理解）