摘要：普通函數(shù)調(diào)用函數(shù)在全局作用域下運(yùn)行在非嚴(yán)格模式下，指向全局對(duì)象，在嚴(yán)格模式下，會(huì)變成。使用來調(diào)用函數(shù)，或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。即構(gòu)造函數(shù)的指向它實(shí)例化出來的對(duì)象。

JavaScript中的this實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里被調(diào)用。

先來列舉一下都有哪些函數(shù)調(diào)用方式：

普通函數(shù)調(diào)用

對(duì)象方法調(diào)用

call()、apply() 調(diào)用

bind()

構(gòu)造函數(shù)調(diào)用

ES6箭頭函數(shù)

通俗來說，“函數(shù)被誰調(diào)用，this就指向誰”。

函數(shù)在全局作用域下運(yùn)行；在非嚴(yán)格模式下，this指向全局對(duì)象window，在嚴(yán)格模式下，this會(huì)變成undefined。

function foo1(){
  return this;
}

foo1() === window; // true 

function foo2(){
  "use strict";
  return this;
}

foo2() === undefined; // true

當(dāng)以對(duì)象里的方法的方式調(diào)用函數(shù)時(shí)，它們的this是調(diào)用函數(shù)的對(duì)象。

function foo() {
  console.log(this); // {x: 1, foo: ?}
  console.log(this.x); // 1
}

var obj = {
  x: 1,
  foo: foo
};

obj.foo(); 

上面代碼中，調(diào)用foo的是對(duì)象obj ，所以這里的this指向?qū)ο?b>obj。

如果將對(duì)象里的foo方法賦給一個(gè)變量：

function foo() {
  console.log(this); // window
  console.log(this.x); // undefined
}

var obj = {
  x: 1,
  foo: foo
};

var fn = obj.foo;
fn(); 

將obj.foo賦給了fn變量，而fn是在全局作用域中運(yùn)行，因此this指向window，由于window下沒有x這個(gè)變量，所以this.x為undefined。

如果把obj.foo傳遞給一個(gè)自己聲明的函數(shù)。

function foo() {
  console.log(this); // window
  console.log(this.x); // undefined
}

var obj = {
  x: 1,
  foo: foo
};

// 自定義函數(shù)
function todoFn(cb) {
  cb();    
};

todoFn(obj.foo);

將obj.foo傳遞給自定義函數(shù)作為回調(diào)函數(shù)執(zhí)行。結(jié)果一樣。因?yàn)樗匀皇窃谌肿饔糜蛑羞\(yùn)行。

最后來看看在setTimeout()中又會(huì)輸出怎樣的結(jié)果。

function foo() {
  console.log(this); // {x: 1, foo: ?}
  setTimeout(function(){
    console.log(this); // window
  }, 0);
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

第一個(gè)this還是對(duì)象方法調(diào)用方式；但在setTimeout()里的this指向的是全局作用域window。為什么會(huì)這樣？

原因是，由setTimeout()調(diào)用的代碼運(yùn)行在與所在函數(shù)完全分離的執(zhí)行環(huán)境上，該函數(shù)是在全局作用域中執(zhí)行的，所以this就指向 window。

上面代碼的后三段代碼中，都出現(xiàn)了同樣的問題，就是它們的this都丟失了。怎么做才能讓它們的this仍然指向原來的對(duì)象？

后面即將提到的call()、apply()及bind()方法都能解決這一問題。

使用call()或者apply()可以改變上下文的this值。

// 定義一個(gè)對(duì)象
var obj = {
  x: "local"
};

// 定義一個(gè)全局變量
var x = "global";

// 定義函數(shù)，返回值取決于調(diào)用方式
function speak(){
  return this.x;
}

speak(); // "global"
speak.call(obj); // "local"
speak.apply(obj); // "local"

直接調(diào)用sayName()時(shí)，相當(dāng)于普通函數(shù)調(diào)用，this指向window，值為global；使用call()或apply()作用一致，都讓this指向了對(duì)象obj。只不過在給call()和apply()傳遞參數(shù)時(shí)有區(qū)別，如：

function add(c, d) {
  return this.a + this.b + c + d;
}

var obj = {
  a: 1,
  b: 2
};

// 第一個(gè)參數(shù)作為 this 使用的對(duì)象，而后續(xù)參數(shù)作為參數(shù)傳遞給函數(shù)
add.call(obj, 3, 4); // 10

// 第一個(gè)參數(shù)同樣是作為 this 使用的對(duì)象
// 第二個(gè)參數(shù)是傳遞一個(gè)數(shù)組
add.apply(obj, [3, 4]); // 10

Function.prototype.bind()會(huì)創(chuàng)建一個(gè)新的包裝函數(shù)，這個(gè)函數(shù)會(huì)忽略它當(dāng)前的this綁定（無論綁定的對(duì)象是什么）， 并把我們提供的對(duì)象綁定到this上。

var x = 9;
var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

// 相當(dāng)于對(duì)象方法調(diào)用，this指向?qū)ο?o
obj.getX(); // 81

// 將對(duì)象 o 的方法getX賦值給 f，f 執(zhí)行時(shí)是在全局環(huán)境中，this指向全局作用域
var f = obj.getX;
f(); // 9

// 創(chuàng)建一個(gè)新函數(shù)，將this綁定到對(duì)象 o 中
var f2 = obj.getX.bind(o);
f2(); // 81

接著上面【對(duì)象方法調(diào)用】里的幾個(gè)丟失this的例子。如何用call()
、apply()或bind()來綁定this到指定的對(duì)象。

先看看這個(gè)例子：

function foo() {
  console.log(this); // {x: 1, foo: ?}
  console.log(this.x); // 1
}

var obj = {
  x: 1,
  foo: foo
};

// 使用call()或apply()
var fn1 = obj.foo;
fn1.call(obj);
//fn.apply(obj);

// 使用bind()
var fn2 = obj.foo.bind(obj);
fn2();

再看這個(gè)回調(diào)函數(shù)的例子：

function foo() {
  console.log(this); // {x: 1, foo: ?}
  console.log(this.x); // 1
}

var obj = {
  x: 1,
  foo: foo
};

// 自定義函數(shù)
function todoFn(cb) {
  cb.call(obj);
  // cb.apply(obj);
};

todoFn(obj.foo);

只需要在執(zhí)行回調(diào)函數(shù)的時(shí)候使用call()或apply()將this綁定到obj對(duì)象即可。

最后看定時(shí)器的例子：

function foo() {
  console.log(this); // {x: 1, foo: ?}
  setTimeout(function(){
    console.log(this); // {x: 1, foo: ?}
  }.bind(this), 0);
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

這里是使用了bind()方法，將上下文的this綁定到定時(shí)器里的匿名函數(shù)，它最終還是指向?qū)ο?b>obj。

如果函數(shù)或者方法調(diào)用之前帶有關(guān)鍵字new，它就構(gòu)成構(gòu)造函數(shù)調(diào)用。使用new來調(diào)用函數(shù)， 或者說發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

創(chuàng)建（或者說構(gòu)造） 一個(gè)全新的對(duì)象。

這個(gè)新對(duì)象會(huì)被執(zhí)行 [[ 原型 ]] 連接。

這個(gè)新對(duì)象會(huì)綁定到函數(shù)調(diào)用的this。

如果函數(shù)沒有返回其他對(duì)象， 那么new表達(dá)式中的函數(shù)調(diào)用會(huì)自動(dòng)返回這個(gè)新對(duì)象。

來看一個(gè)例子：

function foo(x){
  this.x = x;
  console.log(this); // foo {x: 2}
}
var f = new foo(2); 
console.log(f.x); // 2

使用new來調(diào)用foo()時(shí)， 會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到foo()調(diào)用中的this上。即構(gòu)造函數(shù)的this指向它實(shí)例化出來的對(duì)象。

箭頭函數(shù)本身沒有this，是根據(jù)外層（函數(shù)或者全局）作用域來決定this。

先來看一個(gè)例子：

var x = 1;
function testFn() {
  var fn1 = function() {
    console.log(this); // window
    console.log(this.x); // 1
  }
  var fn2 = () => {
    console.log(this); // window 
    console.log(this.x); // 1
  }
  fn1(); 
  fn2(); 
}
testFn();

兩段代碼輸出的結(jié)果一致。但運(yùn)行的機(jī)制不一樣。

fn1是普通函數(shù)調(diào)用，前面說過普通函數(shù)調(diào)用this指向window；

fn2是箭頭函數(shù)，它會(huì)繼承外層函數(shù)testFn的this，而testFn是在全局作用域中運(yùn)行的，所以它的this是window，因此fn2箭頭函數(shù)的this也是window。

對(duì)上面對(duì)例子做一點(diǎn)改動(dòng)：

var x = 1;
function testFn() {
  var fn1 = function() {
    console.log(this); // window
    console.log(this.x); // 1
  }
  var fn2 = () => {
    console.log(this); // {x: 2} 
    console.log(this.x); // 2
  }
  fn1(); 
  fn2(); 
}
testFn.call({ x: 2 });

改變了testFn的調(diào)用方式。

fn1依然是普通函數(shù)調(diào)用，this指向window；

fn2箭頭函數(shù)依然是繼承它外層函數(shù)testFn的this，但這里testFn通過call使this指向了對(duì)象{id: 2}，所以fn2的this也指向該對(duì)象。

接著上面【對(duì)象方法調(diào)用】里的setTimeout例子。如果使用箭頭函數(shù)會(huì)怎樣？

function foo() {
  console.log(this); // {x: 1, foo: ?}
  console.log(this.x); // 1
  setTimeout(() => {
    console.log(this); // {x: 1, foo: ?}
    console.log(this.x); // 1
  }, 0);
}

var obj = {
  x: 1,
  foo: foo
}

obj.foo();

這里定時(shí)器回調(diào)的this由它外層函數(shù)foo的作用域決定，而foo是由obj調(diào)用，所以它的this指向?qū)ο?b>obj，所以定時(shí)器的this也指向?qū)ο?b>obj。

另外，由于箭頭函數(shù)沒有自己的this，所以當(dāng)然也就不能用call()、apply()、bind()這些方法去改變this的指向。

JavaScript的this取決于被調(diào)用的方式。

如果是普通函數(shù)調(diào)用方式。非嚴(yán)格模式下，this指向window，嚴(yán)格模式下，this是undefined；

如果是對(duì)象調(diào)用方式，this指向該對(duì)象；

如果是call()、apply()或bind()方式調(diào)用，this指向被綁定的對(duì)象；

如果是構(gòu)造函數(shù)調(diào)用方式，this指向?qū)嵗鰜淼男聦?duì)象；

如果是箭頭函數(shù)，是根據(jù)當(dāng)前的詞法作用域來決定this， 具體來說，箭頭函數(shù)會(huì)繼承外層函數(shù)調(diào)用的this綁定。

原文地址：https://github.com/daijingfeng/blog/issues/2

參考資料：

1、https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout

2、https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

3、http://es6.ruanyifeng.com/#docs/function#箭頭函數(shù)

4、《JavaScript權(quán)威指南(第6版)(中文版)》

5、《你不知道的JavaScript（上卷）》