JavaScript中的this指向详解

什么是this

  在JavaScript中，this的值是函数运行时所在的环境，在绝大多数情况下，函数的调用方式决定了this的值，并且每次函数被调用时this的值也可能会不同。
  需要注意的是，如果在函数里使用严格模式，全局函数里this的值是undefined。而在匿名函数里则不会绑定任何对象。

this的指向

下面我们使用MDN的举例来详细介绍一下几种不同情况下的this指向。

全局环境

  无论是否在严格模式，在全局执行环境中（在任何函数体外部）的this 都指向全局对象window。

// 在浏览器中, window 对象同时也是全局对象：
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

函数（运行）环境

  函数在未执行时，函数内部this指向undefined，在函数内部，this的值取决于函数被调用的方式。this的指向在函数创建的时候是决定不了的，在调用的时候才能决定。

• 当函数被直接调用，或是函数中的立即执行函数，这两种执行方式相当于是在全局对象下执行的，所以(非严格模式下)this都指向全局对象window。

function f1(){
  return this;
}
//在浏览器中：
f1() === window;   //在浏览器中，全局对象是window

• 在事件处理函数中，哪个元素触发事件，this就指向哪个元素。

// 被调用时，将关联的元素变成蓝色
function bluify(e){
  console.log(this === e.currentTarget); // 总是 true

  // 当 currentTarget 和 target 是同一个对象时为 true
  console.log(this === e.target);        
  this.style.backgroundColor = '#A5D9F3';
}

// 获取文档中的所有元素的列表
var elements = document.getElementsByTagName('*');

// 将bluify作为元素的点击监听函数，当元素被点击时，就会变成蓝色
for(var i=0 ; i<elements.length ; i++){
  elements[i].addEventListener('click', bluify, false);
}

• 在箭头函数被调用的时候，不会自动绑定一个this对象。换句话说，箭头函数根本就没有自己的this。它的this都是捕获其上一层作用域的this值。因此，只要离它最近的外部环境中的this改变，箭头函数中的this就会改变。

• 当函数以对象的方法被调用时，它的this是调用该函数的对象，并且是距离最近的对象。对象中函数的this指向情况较多，追梦子的博客中对此解释的十分详细。

1. 这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o。

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

2. 如果一个函数中有this，这个函数被多个对象以嵌套的形式包含时，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。

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

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

3. this永远指向的是最后调用它的对象，也就是看它执行的时候是谁调用的。以下这种情况this指向的是window。这个例子中对象中存在的fn只是一个指向函数fn的地址，将函数fn赋值给变量j时相当于将这个地址给了变量j，这时通过变量j执行函数fn与在全局环境下直接执行函数fn无异。

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

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

• 当函数被用作构造函数调用时，this指向正在构造的新对象。但是当在构造函数中return一个对象（Object/Array/Function）时，this指向返回return语句的返回值。如果返回值不是一个对象那么this还是指向函数的实例。至于原因，是因为new关键字会创建一个空的对象，然后会自动调用一个函数方法，将this指向这个空对象，这样的话函数内部的this就会被这个空的对象替代。

1. 没有return时的构造函数

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

2. return Object和Function()时

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

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

3. return 不是对象时

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

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

改变this的指向

• 使用call()和apply()方法调用，改变函数内部this的绑定值。
  call()方法的语法和作用与 apply()方法类似，只有一个区别，就是 call() 方法接受的是一个参数列表，而apply()方法接受的是一个包含多个参数的数组。
• 使用bind()方法，bind()方法会创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
  bind()方法会永久把this与一个对象绑定。无论这个函数如何被调用，都改变不了this。

参考资料
阮一峰的网络日志《JavaScript 的 this 原理》
追梦子 《彻底理解js中this的指向》
MDN《this》
前端哇发哈《大话javascript 6期：this深度解析》
《深入理解JavaScript this》
《箭头函数：我只是this的搬运工》