JavaScript之this的认识

关于this的两个误解

1、this指向自身

function foo(num){
  console.log("foo:"+num);

  //记录foo被调用的次数
  this.count++;
}

foo.count = 0;
var i;
for(i=0;i<10;i++){
  if(i>5){
    foo(i);
  }
}
//foo:6
//foo:7
//foo:8
//foo:9

//foo被调用了多少次?
console.log(foo.count); //0 

console.log语句产生了4条输出，证明foo(…)确实被调用了4次，但是foo.count仍然是0.显然从字面意思来理解this是错误的。

执行foo.count=0时，的确向函数对象foo添加了一个属性count。但是函数内部代码this.count中的this并不是指向那个函数对象，所以虽然属性名相同，根对象却并不相同。

解决办法（两种）：
（1）需要通过一个指向函数对象的词法标识符（变量）来引用它。

function foo(){
  foo.count = 4; //foo指向它自身
}

setTimeout(function(){
  // 匿名（没有名字的）函数无法指向自身
}，10)；

（2）强制this指向foo函数对象

function foo(num){
  console.log("foo:" +num);

  //记录foo被调用的次数
  // 注意，在当前的调用方式下，this确实指向foo
  this.count++;
}

foo.count = 0;

var i;

for(i=0;i<10;i++){
  if(i>5){
    //使用call(...)可以确保this指向函数对象foo本身
    foo.call(foo, i);
  }
}
//foo:6
//foo:7
//foo:8
//foo:9

//foo被调用了多少次
console.log(foo.count); //4

2、this指向函数的作用域

这个问题有点复杂，因为在某种情况下，它是正确的，但是在其他情况下它却是错误的。

注意：this在任何情况下都不指向函数的词法作用域

this到底是什么？

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

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

调用位置

在理解this的绑定过程之前，首先要理解调用位置：调用位置就是函数在代码中被调用的位置（而不是声明的位置）
确定调用位置，最重要的是要分析调用栈。而我们关心的调用位置就在当前正在执行的函数的前一个调用中。

function baz(){
  //当前调用栈是：baz
  //因此，当前调用位置是全局作用域

  console.log("baz");
  bar(); //<-- bar的调用位置
}

function bar(){
  //当前调用栈是baz->bar
  //因此，当前调用位置在baz中

  console.log("bar");
}

baz(); //<--baz的调用位置

绑定规则

1、默认绑定

最常用的函数调用类型：独立函数调用。
eg：

function foo(){
  console.log(this.a);
}

var a=2;

foo(); //2

在本例中，函数调用时应用了this的默认绑定，因此this指向全局对象。
原因：在代码中，foo()是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，无法应用其他规则。

如果使用严格模式（strict mode），那么全局对象将无法使用默认绑定，因此this会绑定到undefined：

function foo(){
  "use strict"
  console.log(this.a);
}

var a=2;

foo(); //TypeError: this is undefined

注意：
虽然this的绑定规则完全取决于调用位置，但是只有foo()运行在非strict mode下，默认绑定才能绑定到全局对象；严格模式下与foo()的调用位置无关：

function foo(){
  console.log(this.a);
}

var a=2;

（function(){
  "use strict";

  foo(); //2
}）();

2、隐式绑定

调用位置是否有上下文对象，或者说是否被某个对象拥有或者包含。

function foo(){
  console.log(this.a);
}

var obj = {
  a:2,
  foo:foo
};

obj.foo(); //2

调用位置会使用obj上下文来引用函数，因此你可以说函数被调用时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(); //4

隐式丢失

一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象，也就是说他会应用默认绑定，从而把this绑定到全局对象或者undefined，取决于是否是严格模式。

function foo(){
  console.log(this.a);
}

function doFoo(fn){
  //fn 其实引用的是foo

  fn();
}

var obj = {
  a:2,
  foo:foo
};

var a= "oops,gloabal"; //a是全局对象的属性
doFoo(obj.foo); //"oops,gloabal"

参数传递其实就是一种隐式赋值，因此我们传入函数时也会被隐式赋值。

如果把函数传入语言内置的函数而不是传入你自己声明的函数，结果也是一样的

function foo(){
  console.log(this.a);
}

var obj = {
  a:2,
  foo:foo
};

var a= "oops,gloabal"; //a是全局对象的属性
setTimeout(obj.foo, 100); //"oops,gloabal"

3、显示绑定

可以使用call(…)和apply(…)方法。它们的第一个参数是一个对象，他们会把这个对象绑定到this，接着在调用函数时指定这个this。因为你可以直接指定this的绑定对象，所以我们称之为显式绑定。

解决绑定丢失问题的两种解决办法：
（1）硬绑定

function foo(){
  console.log(this.a);
}

var obj = {
  a:2
};

var bar = function(){
  foo.call(obj);
};

bar(); //2
setTimeout(bar,100); //2

//硬绑定的bar不可能再修改它的this
bar.call(window); //2

工作过程：我们创建了函数bar()，并在它的内部手动调用了foo.call(obj)，因此强制把foo的this绑定到了obj。无论之后如何调用函数bar，它总会手动在obj上调用foo。这种绑定是一种显示的强制绑定，因此我们称之为硬绑定。

ES5中提供了内置的方法Function.prototype.bind，它的用法如下：

function foo(something){
  console.log(this.a, something);
  return this.a + something;
}

var obj = {
  a:2
};

var bar = foo.bind(obj);

var b = bar(3); //2 3
console.log(b); //5

bind（…）会返回一个硬编码的新函数，它会把参数设置为this的上下文并调用原始函数。

（2）API调用的“上下文”
第三方库以及许多新的内置函数，都提供了一个可选的参数，通常被称为“上下文”，其作用和bind(…)一样，确保你的回调函数使用指定的this。

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

使用new来调用foo(…)时，我们会构造一个新对象并把它绑定到foo（…）调用中的this上。

优先级

显示绑定优先级更高；
new绑定比隐式绑定优先级高

小结

如果要判断一个运行中函数的this绑定，就需要找到这个函数的直接调用位置。找到之后就可以顺序应用下面这四条规则来判断this的绑定对象。

1、由new调用？绑定到新创建的对象。
2、由call或者apply（或者bind）调用？绑定到指定的对象。
3、由上下文对象调用？绑定到那个上下文对象。
4、默认：在严格模式下绑定到undefined，否则绑定到全局对象。

ES6中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的测法作用域来决定this，具体来说，箭头函数会继承外层函数调用的this绑定（无论this绑定到什么）。这其实和ES6之前代码中的self = this机制一样。

参考资料

你不知道的JavaScript（上卷）
JS高级程序设计（JS红宝书）