js this的指向

JavaScript中的函数既可以被当作普通函数执行，也可以作为对象方法执行，这是导致this含义如此丰富的主要原因。

一个函数被执行时，会创建一个执行环境，函数的所有的行为均发生在此执行环境中，构建该执行环境时，首先会创建活动对象，接着创建作用域链，最后为this变量赋值。

为什么要用this?

function getName(){
  console.log(this.name);
}
var o1 = {name:'张三'};
var o2 = {name:'李四'};
getName.call(o1);
getName.call(o2);

使用this可以在不同的上下文对象中重复使用函数，不用针对每个对象编写不同版本的函数。因此可以将 API 设计得更加简洁并且易于复用。

this指向函数自身？

function foo(num) {
  this.count++;
}
foo.count = 0;
var i;
for (i=0; i<10; i++) {
  if (i > 5) {
    foo( i );
  }
}
console.log( foo.count ); // 0 

foo(..) 确实被调用了 4 次，但是 foo.count 仍然是 0。显然从字面意思来理解 this 是错误的。

this到底是什么

 this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。 this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。 this 就是记录的其中一个属性，会在函数执行的过程中用到。

this的调用位置及绑定规则

在理解 this 的绑定过程之前，首先要理解调用位置。

1. 默认绑定：独立函数调用

function foo(){
  console.log(this.a);
}
var a = 2;
foo();   //2

 foo() 是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定（ this 指向全局对象）。虽然 this 的绑定规则完全取决于调用位置，但只有在非严格模式下运行时，默认绑定才能绑定到全局对象；严格模式下 this 会绑定到 undefined 。

2. 隐式绑定：调用位置是否有上下文对象

function foo() {
  console.log( this.a );
}
var obj = {
  a: 2,
  foo: foo
};
obj.foo(); // 2

当 foo() 被调用时，它的落脚点指向 obj 对象。当函数引用有上下文对象时，隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调用 foo() 时 this 被绑定到 obj ，因此 this.a 和 obj.a 是一样的。

对象属性引用链中只有最顶层或者说最后一层会影响调用位置

function foo() {
  console.log( this.a );
}
var obj2 = {
  a: 42,
  foo: foo
};
var obj1 = {
  a: 2,
  obj2: obj2
};
obj1.obj2.foo(); // 42

隐式丢失

function foo() {
  console.log( this.a );
}
var obj = {
  a: 2,
  foo: foo
};
var bar = obj.foo; 
var a = "window"; 
bar(); // 'window';

虽然 bar 是 obj.foo 的一个引用，但是实际上，它引用的是 foo 函数本身。因此，此时的bar() 其实是一个不带任何修饰的函数调用，应用默认绑定。

3. 显示绑定：使用函数的 call(..) 和apply(..) 方法 

function foo() {
  console.log( this.a );
}
var obj = {
  a:2
};
foo.call( obj ); // 2

4. new绑定

先来看看使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作

    1. 创建（或者说构造）一个全新的对象。

    2. 这个新对象会被执行 [[ 原型 ]] 连接。

    3. 这个新对象会绑定到函数调用的 this 。

    4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。

function foo(a) {
  this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

优先级

1. 由 new 调用？绑定到新创建的对象。

2. 由 call 或者 apply （或者 bind ）调用？绑定到指定的对象。

3. 由上下文对象调用？绑定到那个上下文对象。

4. 默认：在严格模式下绑定到 undefined ，否则绑定到全局对象。

PS：new 和 call / apply 无法一起使用

附上一张决策图

参考文献

《你不知道的 JavaScript 》