別再為了this發愁了：JS中的this機制
題記：JavaScript中有很多令人困惑的地方，或者叫做機制。但是，就是這些東西讓JavaScript顯得那么美好而與眾不同。比方說函數也是對象、閉包、原型鏈繼承等等，而這其中就包括頗讓人費解的this機制。不管是新手還是老手，不仔細深摳一下還真鬧不明白this倒地咋回事捏。今天，我們就一起看一下this倒地咋回事，別再為了this發愁了。
1、this是啥?
簡言之，this是JavaScript語言中定義的眾多關鍵字之一，它的特殊在于它自動定義于每一個函數域內，但是this倒地指引啥東西卻讓很多人張二摸不著頭腦。這里我們留個小懸念，希望看完這篇文章了你能回答出來this到底指引個甚。
2、this有啥用?
那邊觀眾又該問了，既然this這么難以理解，那么為個甚還要用它呢?我們來看個例子：
- function identify() {
- return this.name.toUpperCase();
- }
- function sayHello() {
- var greeting = "Hello, I'm " + identify.call( this );
- console.log( greeting );
- }
- var person1= {
- name: "Kyle"
- };
- var person2= {
- name: "Reader"
- };
- identify.call( person1); // KYLE
- identify.call( person2); // READER
- sayHello.call( person1); // Hello, I'm KYLE
- sayHello.call( person2); // Hello, I'm READER
這段代碼很簡單，我們定義了兩個函數，分別為identify和sayHello。并且在不同的對象環境下執行了它們，達到了復用的效果，而不用為了在不同的對象環境下執行而必須針對不同的對象環境寫對應的函數了。簡言之，this給函數帶來了復用。那邊客官又問了，我不用this一樣可以實現，如：
- function identify(context) {
- return context.name.toUpperCase();
- }
- function sayHello(context) {
- var greeting = "Hello, I'm " + identify( context);
- console.log( greeting );
- }
- var person1= {
- name: "Kyle"
- };
- var person2= {
- name: "Reader"
- };
- identify( person1); // KYLE
- identify( person2); // READER
- sayHello( person1); // Hello, I'm KYLE
- sayHello( person2); // Hello, I'm READER
仔細一看，這位客官給出的解決方法的確也達到了類似的效果。贊一個!我想說的是，隨著代碼的增加，函數嵌套、各級調用等變得越來越復雜，那么傳遞一個對象的引用將變得越來越不明智，它會把你的代碼弄得非常亂，甚至你自己都無法理解清楚。而this機制提供了一個更加優雅而靈便的方案，傳遞一個隱式的對象引用讓代碼變得更加簡潔和復用。好了，知道了this的用處，那么再看看我們對它的誤解。
3、關于this的誤解
相信很多童鞋是學過其它語言的，在很多編程語言中都有this的機制，慣性思維把其它語言里對它的理解帶到了JavaScript中。同時，由于this這個單詞的理解導致了我們產生了對它各種各樣的誤解。所以，開始前，我們先澄清下對它的誤解。
3.1 誤解一：this引用function本身
我們都知道，在函數里引用函數可以達到遞歸和給函數屬性賦值的效果。而這在很多應用場景下顯得非常有用。所以，很多人都誤以為this就是指引function本身。例如：
- function fn(num) {
- console.log( "fn: " + num );
- // count用于記錄fn的被調用次數
- this.count++;
- }
- fn.count = 0;
- var i;
- for (i=0; i<10; i++) {
- if (i > 5) {
- fn( i );
- }
- }
- // fn: 6
- // fn: 7
- // fn: 8
- // fn: 9
- console.log( fn.count ); // 0 -- 耶？咋不是4捏？
上面我們想要記錄fn被調用的次數，可是明顯fn被調用了四次但count仍然為0。咋回事捏?這里簡單解釋下，fn里第4行的自增隱式的創建了一個全局變量count，由于初始值為undefined，所以每一次自增其實依然不是一個數字，你在全局環境下打印count(window.count)輸出的應該是NaN。而第6行定義的函數熟悉變量count依然沒變，還是0。如果對這個執行結果不清楚的，歡迎去看我前些天的那篇博文(聊一下JS中的作用域scope和閉包closure scope和closure)，在這里你只需要知道，this引用的是function這種理解是錯誤的就行。
這邊就會又有人問了，既然this不是引用function，那么我要實現遞歸函數，該咋引用呢?這里簡單回答下介個問題，兩種方法：①函數體內用函數名來引用函數本身②函數體內使用arguments.callee來引用函數(不推薦)。那么既然第二種方法不推薦，匿名函數咋引用呢?用***種，并且給匿名函數一個函數名即可(推薦)。
3.2 誤解二：this引用的是function的詞法作用域
這種誤解欺騙的人可能更多一些。首先，澄清一下，this并沒有引用function的詞法作用域。的確JS的引擎內對詞法作用域的實現的確像是一個對象，擁有屬性和函數，但是這僅僅是JS引擎的一種實現，對代碼來說是不可見的，也就是說詞法作用域“對象”在JS代碼中取不到。(關于詞法作用域，如果不理解，可以參考之前的一篇博文《聊一下JS中的作用域scope和閉包closure scope和closure》)。看個錯誤的例子：
- function fn1() {
- var a = 2;
- this.fn2();//以為this引用的是fn1的詞法作用域
- }
- function fn2() {
- console.log( this.a );
- }
- fn1(); //ReferenceError
上面的代碼明顯沒有執行出想要的結果，從而可以看到this并沒有引用函數的詞法作用域。甚至，可以肯定的說，這個例子里fn2可以在fn1里正確執行都是偶然的(理解了詞法作用域你就知道為什么這里執行不報錯了)。
4、this到底跟啥有關?
好了，扯了那么多都沒上干貨，有的觀眾都開始關閉當前頁開始離席了。這里，我們鄭重聲明：this跟函數在哪里定義沒有半毛錢關系，函數在哪里調用才決定了this到底引用的是啥。也就是說this跟函數的定義沒關系，跟函數的執行有大大的關系。所以，記住，“函數在哪里調用才決定了this到底引用的是啥”。
5、this機制的四種規則
this到底綁定或者引用的是哪個對象環境決定于函數被調用的地方。而函數的調用有不同的方式，在不同的方式中調用決定this引用的是哪個對象是由四種規則確定的。我們一個個來看。
5.1 默認綁定全局變量
這條規則是最常見的，也是默認的。當函數被單獨定義和調用的時候，應用的規則就是綁定全局變量。如下：
- function fn() {
- console.log( this.a );
- }
- var a = 2;
- fn(); // 2 -- fn單獨調用，this引用window
5.2 隱式綁定
隱式調用的意思是，函數調用時擁有一個上下文對象，就好像這個函數是屬于該對象的一樣。例如：
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2,
- fn: fn
- };
- obj.fn(); // 2 -- this引用obj。
需要說明的一點是，***一個調用該函數的對象是傳到函數的上下文對象(繞懵了)。如：
- function fn() {
- console.log( this.a );
- }
- var obj2 = {
- a: 42,
- fn: fn
- };
- var obj1 = {
- a: 2,
- obj2: obj2
- };
- obj1.obj2.fn(); // 42 -- this引用的是obj2.
還有一點要說明的是，失去隱式綁定的情況，如下：
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2,
- fn: fn
- };
- var bar = obj.fn; // 函數引用傳遞
- var a = "全局"; // 定義全局變量
- bar(); // "全局"
如上，第8行雖然有隱式綁定，但是它執行的效果明顯是把fn賦給bar。這樣bar執行的時候，依然是默認綁定全局變量，所以輸出結果如上。
5.3 顯示綁定
學過bind()\apply()\call()函數的都應該知道，它接收的***個參數即是上下文對象并將其賦給this。看下面的例子：
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2
- };
- fn.call( obj ); // 2
如果我們傳遞***個值為簡單值，那么后臺會自動轉換為對應的封裝對象。如果傳遞為null，那么結果就是在綁定默認全局變量，如：
- function fn() {
- console.log( this.a );
- }
- var obj = {
- a: 2
- };
- var a = 10;
- fn.call( null); // 10
5.4 new新對象綁定
如果是一個構造函數，那么用new來調用，那么綁定的將是新創建的對象。如：
- function fn(a) {
- this.a = a;
- }
- var bar = new fn( 2 );
- console.log( bar.a );// 2
注意，一般構造函數名首字母大寫，這里沒有大寫的原因是想提醒讀者，構造函數也是一般的函數而已。
6、結束語
讀到現在，1中問的問題你該自己能回答上來了。上面介紹的四種關于this綁定的4中情況和規則，現實寫代碼的過程中肯定比這要多和復雜，但是無論多復雜多亂，它們都是混合應用上面的幾個規則和情況而已。只要你的思路和理解是清晰的，那肯定沒問題的。
