摘要：一直感覺中的是一個大坑，雖然一直都有注意，一直都有研究，但是總是會忘記。即使也沒有權利改變。但是可以影響后面的參數(shù)值。由于只是我根據(jù)經驗和資料自己總結的，所以不知道是否有疏忽或者遺漏，如果有問題的地方，歡迎提出。

一直感覺javascript中的this是一個大坑，雖然一直都有注意，一直都有研究，但是總是會忘記。在這里，總結一下一些簡單的規(guī)律

下面的所有的都是不考慮箭頭函數(shù)的情況下，因為箭頭函數(shù)和普通的差別很大

除非是bind綁定過的，其他情況下，直接調用的方法的this都是window。所謂的直接調用，就是直接以method()的形式調用，沒有call, apply, new

看幾種情況：

function foo(){
   return this;
}
foo(); // window

var obj = {
  foo: function(){ return this; }
}

var foo = obj.foo;
foo(); // window

function Foo(){
  this.foo = function(){
    console.log(this);
  }

  var foo = this.foo;
  foo(); // window
}

new Foo();

除非是bind綁定過的，一般情況下，誰調用這個方法，那么內部的this就指向這個對象。也就是說obj.method()，那么就指向obj。obj.foo.method()，那么就指向obj.foo

看幾個例子：

var obj = {
  foo: function(){ return this; }
}
obj.foo(); // obj調用，所以結果是obj

function foo(){ return this };
var obj = {};
obj.foo = foo;
obj.foo(); // obj調用，所以結果是obj

var obj = {
  bar: function(){ return this; },
  foo: function(){
    return this.bar();
  }
}
obj.foo(); // 在foo中, this是obj, 而this調用的bar, 所以返回的是obj

var obj = {
   bar: {
     foo: function(){ return this }
   }
}
obj.bar.foo(); // obj.bar調用的foo，所以返回的結果是bar

function foo(){
  this.bar = function(){ return this }
  return this.bar();
}
foo(); // 由于foo中的this是window, 所以this.bar()返回的是window

function Foo(){
  this.foo = function(){ console.log(this); }
  this.foo();
}
var object = new Foo(); // 由于this.foo中的this是object，所以this是object

所有情況下，(箭頭函數(shù)不能使用new關鍵字)，使用了new以后，會把內部的this指向新生成的對象。

除去bind的情況下，prototype中的this也指向新生成的對象

function Foo(){
  console.log(this); // this指向新生成的對象，object
}
var object = new Foo(); 

function Foo(){
  this.foo = function(){ return this === object; }
}
var object = new Foo();
object.foo(); // 輸出true

function Foo(){}
Foo.prototype.foo = function(){ return this === object; }
var object = new Foo();
object.foo(); // 輸出true

除非是bind的情況，call, apply是誰，那么內部的this就是誰。

注意：如果是基本類型，那么javascript會把基本類型轉換成Object的形式

也是看例子：

function foo(){ return this; }
foo.call("a"); // String
typeof foo.call("a"); // object

var obj = {
  foo : function(){ return this; }
}
obj.foo.call(1); // Number
typeof obj.foo.call(1); // object

function Foo(){
  this.foo = function(){ return this; }
}
var object = new Foo();
object.foo.call(1); // Number

除了new這一種特殊情況，bind的對象是誰，那么this也就是誰。即使call, apply也沒有權利改變。

注意：如果是基本類型，那么javascript會把基本類型轉換成Object的形式

function foo() { return this; } 
foo = foo.bind(1);
foo(); // Number
typeof foo(); // object

function foo() { return this; } 
foo = foo.bind(1);
foo.call("a"); // Number 1

function Foo() { return this; } 
Foo.prototype.foo = (function(){ return this; }).bind(1);
var object = new Foo();
object.foo(); // Number

特殊情況
new這個關鍵詞可以改變方法內部的this，使他指向新生成的對象

function Foo(){ this.foo = function(){ console.log(this === obj) } }
Foo = Foo.bind(1);
var obj = new Foo();
obj.foo(); // 輸入true

箭頭函數(shù)的"this"是根據(jù)定義環(huán)境的this來定的，也就是說定義的函數(shù)周圍的this是什么，它的"this"就是什么。（注意我在this上加了引號，是因為這個this并不是真的箭頭函數(shù)的this）

而且不會被bind, call, apply所改變

var foo = ()=>{ return this };
foo() // window

var obj = { foo: ()=>this }
obj.foo(); // 由于定義的時候，周圍的環(huán)境是window，所以返回window

var obj = {
  foo(){
     var bar= ()=>{ return this };
     return bar();
  }
}
obj.foo(); // 由于定義bar的時候，周圍環(huán)境是obj，所以返回obj
var foo = obj.foo;
foo(); // 同理，這里是window

var foo = ()=>{ return this };
foo = foo.bind(1);
foo(); // window
foo.call(1); // window
foo.apply(1); // window

function Foo(){
  // 箭頭函數(shù)
  var a = ()=>{
    console.log(this === object); // true
  }

  // 對比普通函數(shù)
  var b = function(){
    console.log(this === window); // true
  }
  
  this.foo = function(){
    a(); b();
  }
}

var object = new Foo();
object.foo();

function Foo(){}
// window
Foo.prototype.foo = ()=>{ return this }
// window
var object = new Foo();
object.foo(); // 由于定義foo的時候，周圍環(huán)境是window,所以這里是window

之前在上面寫的都是記憶方法，方便記憶，但是并沒有涉及到原理，這里大概點幾點：

其實可以從bind的簡單實現(xiàn)看出來：

Function.prototype.bind = Function.prototype.bind || function(context, ...args){
  var func = this;
  return function(...currentArgs){
    return func.apply(context, args.concat(currentArgs));
  }
}

所以，從這里看出來，bind以后，返回了一個新的function，所以即使以后再對返回的方法進行bind, apply, call，也只是對新的function操作，并不影響func.apply(context...)中的context值。但是可以影響后面的參數(shù)值。

關于bind方法的介紹，今天看到顏海鏡、顏大的文檔，感覺對bind的了解加深一步，附上鏈接

根據(jù)MDN的文檔，箭頭函數(shù)是不會生成自己的this的(還有arguments)。所以我才給上面的this加上雙引號。而且由于它本身并沒有this，所以才不會被apply，bind, call所改變。

那么在箭頭函數(shù)中調用的this是怎么來定的呢？

下面來自vajoy的一篇譯文

雖然箭頭函數(shù)沒有一個自己的this，但當你在內部使用了this的時候，他會指向最近一層作用域的this

function foo(){
  return ()=>{
    return ()=>{
      return ()=>{
        console.log("id:", this.id);
      }
    }
  }
}
foo.call({id:42})()()(); // id:42

這里只有一次this的綁定，也就是foo()的時候.

這些連接內嵌的函數(shù)們都沒有生命他們自己的this，所以this.id的引用會簡單地順著作用域鏈查找，一直查找到foo()函數(shù)，他是第一處能找到一個確切存在的this的地方。

由于只是我根據(jù)經驗和資料自己總結的，所以不知道是否有疏忽或者遺漏，如果有問題的地方，歡迎提出。謝謝