都說 JavaScript 是一種很靈活的語言，這其實也可以說它是一個混亂的語言。它把函數(shù)式編程和面向?qū)ο缶幊挑酆弦黄?，再加上動態(tài)語言特性，簡直強大無比（其實是不能和C++比的，^_^ ）。

這里的主題是 this ，不扯遠了。this 本身原本很簡單，總是指向類的當前實例，this 不能賦值。這前提是說 this 不能脫離 類/對象 來說，也就是說 this 是面向?qū)ο笳Z言里常見的一個關(guān)鍵字。說的極端點，如果你編寫的 JS 采用函數(shù)式寫法，而不是面向?qū)ο笫剑闼械拇a里 this 會少很多，甚至沒有。記住這一點，當你使用 this 時，你應(yīng)該是在使用對象/類 方式開發(fā)，否則 this 只是函數(shù)調(diào)用時的副作用。

JS 里的 this

在 function 內(nèi)部被創(chuàng)建
指向調(diào)用時所在函數(shù)所綁定的對象（拗口）
this 不能被賦值，但可以被 call/apply  改變

以前用 this 時經(jīng)常擔(dān)心，不踏實，你不知道它到底指向誰？ 這里把它所有用到的地方列出

this 和構(gòu)造器
this 和對象
this 和函數(shù)
全局環(huán)境的 this
this 和 DOM/事件
this 可以被 call/apply 改變
ES5 中新增的 bind 和 this
ES6 箭頭函數(shù)(arrow function) 和 this

1. this 和構(gòu)造器

this 本身就是類定義時構(gòu)造器里需要用到的，和構(gòu)造器在一起再自然不過。

/**
 * 頁簽
 *
 * @class Tab
 * @param nav {string} 頁簽標題的class
 * @param content {string} 頁面內(nèi)容的class
 *
 */
function Tab(nav, content) {
  this.nav = nav
  this.content = content
}
 
Tab.prototype.getNav = function() {
  return this.nav;
};
Tab.prototype.setNav = function(nav) {
  this.nav = nav;
};
Tab.prototype.add = function() {
};

按照 JavaScript 的習(xí)慣， this 應(yīng)該掛屬性/字段，方法都應(yīng)該放在原型上。

2. this 和對象

JS 中的對象不用類也可以創(chuàng)建，有人可能奇怪，類是對象的模板，對象都是從模板里 copy 出來的，沒有類怎么創(chuàng)建對象？ JS 的確可以，并且你完全可以寫上萬行功能代碼而不用寫一個類。話說 OOP 里說的是面向?qū)ο缶幊蹋矝]說面向類編程，是吧 ^_^ 。

var tab = {
  nav: '',
  content: '',
  getNav: function() {
    return this.nav;
  },
  setNav: function(n) {
    this.nav = n;
  }
}

3. this 和函數(shù)

首先，this 和獨立的函數(shù)放在一起是沒有意義的，前面也提到過 this 應(yīng)該是和面向?qū)ο笙嚓P(guān)的。純粹的函數(shù)只是一個低級別的抽象，封裝和復(fù)用。如下

function showMsg() {
  alert(this.message)
}
showMsg() // undefined

定義 showMsg，然后以函數(shù)方式調(diào)用，this.message 是 undefined。因此堅決杜絕在 純函數(shù)內(nèi)使用 this，但有時候會這么寫，調(diào)用方式使用 call/apply

function showMsg() {
  alert(this.message)
}
 
var m1 = {
  message: '輸入的電話號碼不正確'
}
var m2 = {
  message: '輸入的身份證號不正確'
}
 
showMsg.call(m1) // '輸入的電話號碼不正確'
showMsg.call(m2) // '輸入的身份證號不正確'

用這種方式可以節(jié)省一些代碼量，比如當兩個 類/對象 有一共相似的方法時，不必寫兩份，只要定義一個，然后將其綁定在各自的原型和對象上。這時候其實你還是在使用對象或類（方式1/2），只是間接使用罷了。

4. 全局環(huán)境的 this

前面提到 this 是 “指向調(diào)用時所在函數(shù)所綁定的對象”， 這句話拗口但絕對正確，沒有一個多余的字。全局環(huán)境中有不同的宿主對象，瀏覽器環(huán)境中是 window， node 環(huán)境中是 global。這里重點說下瀏覽器環(huán)境中的 this。

瀏覽器環(huán)境中非函數(shù)內(nèi) this 指向 window

alert(window=== this) // true
因此你會看很很多開源 JS lib 這么寫

(function() {
    // ...
    
})(this);
或這樣寫

(function() {
    // ...
  
}).call(this);
比如 underscore 和 requirejs，大意是把全局變量 window 傳入匿名函數(shù)內(nèi)緩存起來，避免直接訪問。至于為啥要緩存，這跟 JS 作用域鏈有關(guān)系，讀取越外層的標識符性能會越差。請自行查閱相關(guān)知識，再說就扯遠了。

瀏覽器中比較坑人，非函數(shù)內(nèi)直接使用 var 聲明的變量默認為全局變量，且默認掛在 window 上作為屬性。

var andy = '劉德華'
alert(andy === window.andy) // true
alert(andy === this.andy) // true
alert(window.andy === this.andy) // true

因為這個特性，有些筆試題如

var x = 10;
function func() {
  alert(this.x)
}
var obj = {
  x: 20,
  fn: function() {
    alert(this.x)
  }
}
var fn = obj.fn
func() // 10
fn() // 10

沒錯，最終輸出的都是全局的 10。永遠記住這一點：判斷 this 指向誰，看執(zhí)行時而非定義時，只要函數(shù)(function)沒有綁定在對象上調(diào)用，它的 this 就是 window。

5. this 和 DOM/事件

W3C 把 DOM 實現(xiàn)成了各種節(jié)點，節(jié)點嵌套一起形成 DOM tree。節(jié)點有不同類型，如文本節(jié)點，元素節(jié)點等10多種。元素節(jié)點又分成了很多，對寫HTML的人來說便是很熟悉的標簽（Tag），如 div，ul，label 等。 看 W3C 的 API 文檔，會發(fā)現(xiàn)它完全是按照面向?qū)ο蠓绞綄崿F(xiàn)的各種 API，有 interface，extends 等。如

看到了吧，這是用 Java 寫的，既然是用面向?qū)ο蠓绞綄崿F(xiàn)的API，一定有類/對象（廢話^_^），有 類/對象，則一定有 this （別忘了這篇文章的中心主題）。所有的 HTML tag 類命名如 HTMLXXXElement，如

HTMLDivElement
HTMLLabelElement
HTMLInputElement
...
前面說過 this 是指向當前類的實例對象，對于這些 tag 類來說，不看其源碼也知它們的很多方法內(nèi)部用到的 this 是指向自己的。 有了這個結(jié)論，寫HTML和JS時， this 就清晰了很多。

示例A

<!-- this 指向 div -->
<div onclick="alert(this)"></div>

示例B

<div id="nav"></div>
<script>
  nav.onclick = function() {
    alert(this) // 指向div#nav
  }
</script>

示例C

$('#nav').on('click', function() {
  alert(this) // 指向 nav
})

以上三個示例可以看到，在給元素節(jié)點添加事件的時候，其響應(yīng)函數(shù)（handler）執(zhí)行時的 this 都指向 Element 節(jié)點自身。jQuery 也保持了和標準一致，但卻讓人迷惑，按 “this 指向調(diào)用時所在函數(shù)所綁定的對象” 這個定義，jQuery 事件 handler 里的 this，應(yīng)該指向 jQuery 對象，而非 DOM 節(jié)點。因此你會發(fā)現(xiàn)在用 jQuery 時，經(jīng)常需要把事件 handler 里的 element 在用 $ 包裹下變成 jQuery 對象后再去操作。比如

$('#nav').on('click', function() {
  var $el = $(this) // 再次轉(zhuǎn)為 jQuery 對象，如果 this 直接為 jQuery 對象更好
  $el.attr('data-x', x)
  $el.attr('data-x', x)
})

有人可能有如下的疑問

<div id="nav" onclick="getId()">ddd</div>
<script>
  function getId() {
    alert(this.id)
  }
</script>

點擊 div 后，為什么 id 是 undefined，不說是指向的 當前元素 div 嗎？ 如果記住了前面提到的一句話，就很清楚為啥是 undefined，把這句話再貼出來。

判斷 this 指向誰，看執(zhí)行時而非定義時，只要函數(shù)(function)沒有綁定在對象上調(diào)用，它的 this 就是 window

這里函數(shù) getId 調(diào)用時沒有綁定在任何對象上，可以理解成這種結(jié)構(gòu)

div.onclick = function() {
  getId()
}

getId 所處匿名函數(shù)里的 this 是 div，但 getId 自身內(nèi)的 this 則不是了。 當然 ES5 嚴格模式下還是有個坑。

6. this 可以被 call/apply 改變

call/apply 是函數(shù)調(diào)用的另外兩種方式，兩者的第一個參數(shù)都可以改變函數(shù)的上下文 this。call/apply 是 JS 里動態(tài)語言特性的表征。動態(tài)語言通俗的定義

程序在運行時可以改變其結(jié)構(gòu)，新的函數(shù)可以被引進，已有的函數(shù)可以被刪除，即程序在運行時可以發(fā)生結(jié)構(gòu)上的變化

通常有以下幾點特征表示它為動態(tài)語言

動態(tài)的數(shù)據(jù)類型
動態(tài)的函數(shù)執(zhí)行
動態(tài)的方法重寫
動態(tài)語言多從世界第二門語言 LISP 發(fā)展而來，如死去的 SmallTalk/VB，目前還活著的 Perl/Python， 以及還流行的 Ruby/JavaScript。JS 里動態(tài)數(shù)據(jù)類型的體現(xiàn)便是弱類型，執(zhí)行的時候才去分析標識符的類型。函數(shù)動態(tài)執(zhí)行體現(xiàn)為 eval，call/aply。方法重寫則體現(xiàn)在原型重寫。不扯遠，這里重點說下 call/apply 對 this 的影響。

var m1 = {
  message: 'This is A'
} 
var m2 = {
  message: 'This is B'
} 
 
function showMsg() {
  alert(this.message)
}
 
showMsg() // undefined
showMsg.call(m1) // 'This is A'
showMsg.call(m2) // 'This is B'

可以看到單獨調(diào)用 showMsg 返回的是 undefined，只有將它綁定到具有 message 屬性的對象上執(zhí)行時才有意義。發(fā)揮想象力延伸下，如果把一些通用函數(shù)寫好，可以任意綁定在多個類的原型上，這樣動態(tài)的給類添加了一些方法，還節(jié)省了代碼。這是一種強大的功能，也是動態(tài)語言的強表現(xiàn)力的體現(xiàn)。

經(jīng)常會聽到轉(zhuǎn)向 Ruby 或 Python 的人提到“編程的樂趣”，這種樂趣是源自動態(tài)語言更接近人的思維（而不是機器思維），更符合業(yè)務(wù)流程而不是項目實現(xiàn)流程。同樣一個功能，動態(tài)語言可以用更小的代碼量來實現(xiàn)。動態(tài)語言對程序員生產(chǎn)力的提高，是其大行其道的主要原因。

性能方面，動態(tài)語言沒有太大的優(yōu)勢，但動態(tài)語言的理念是：優(yōu)化人的時間而不是機器的時間。提高開發(fā)者的生產(chǎn)力，寧肯犧牲部分的程序性能或者購買更高配置的硬件。隨著IT業(yè)的不斷發(fā)展和摩爾定律的作用，硬件相對于人件一直在貶值，這個理念便有了合理的現(xiàn)實基礎(chǔ)。

JS 里的 call/apply 在任何一個流行的 lib 里都會用到，但幾乎就是兩個作用

配合寫類工具實現(xiàn)OOP，如 mootools, ClassJS, class.js,
修復(fù)DOM事件里的 this，如 jQuery, events.js

關(guān)于 call 和 apply 復(fù)用：利用apply和arguments復(fù)用方法

關(guān)于 call 和 apply 的性能問題參考： 冗余換性能-從Backbone的triggerEvents說開了去

7. ES5 中新增的 bind 和 this

上面 6 里提到 call/apply 在 JS 里體現(xiàn)動態(tài)語言特性及動態(tài)語言的流行原因，其在 JS 用途如此廣泛。ES5發(fā)布時將其采納，提了一個更高級的方法 bind。

var modal = {
  message: 'This is A'
}
 
function showMsg() {
  alert(this.message)
}
 
var otherShowMsg = showMsg.bind(modal)
otherShowMsg() // 'This is A'

因為是ES5才加的，低版本的IE不支持，可以修復(fù)下Function.prototype。bind 只是 call/apply 的高級版，其它沒什么特殊的。

8. ES6 箭頭函數(shù)(arrow function) 和 this

ES6 在今年的 6月18日 正式發(fā)布（恰京東店慶日同一天，^_^），它帶來的另一種類型的函數(shù) - 箭頭函數(shù)。箭頭函數(shù)的一個重要特征就是顛覆了上面的一句話，再貼一次

判斷 this 指向誰，看執(zhí)行時而非定義時，只要函數(shù)(function)沒有綁定在對象上調(diào)用，它的 this 就是 window

是的，前面一直用這句話來判斷 this 的指向，在箭頭函數(shù)里前面半句就失效了。箭頭函數(shù)的特征就是，定義在哪，this 就指向那。即箭頭函數(shù)定義在一個對象里，那箭頭函數(shù)里的 this 就指向該對象。如下

var book = {
  author: 'John Resig',
  init: function() {
    document.onclick = ev => {
      alert(this.author) ; // 這里的 this 不是 document 了
    }
  }
};
book.init()

對象 book 里有一個屬性 author， 有一個 init 方法， 給 document 添加了一個點擊事件，如果是傳統(tǒng)的函數(shù)，我們知道 this 指向應(yīng)該是 document，但箭頭函數(shù)會指向當前對象 book。

箭頭函數(shù)讓 JS 回歸自然和簡單，函數(shù)定義在哪它 this 就指向哪，定義在對象里它指向該對象，定義在類的原型上，指向該類的實例，這樣更容易理解。

總結(jié)：

函數(shù)的上下文 this 是 JS 里不太好理解的，在于 JS 函數(shù)自身有多種用途。目的是實現(xiàn)各種語言范型（面向?qū)ο螅瘮?shù)式，動態(tài)）。this 本質(zhì)是和面向?qū)ο舐?lián)系的，和寫類，對象關(guān)聯(lián)一起的， 和“函數(shù)式”沒有關(guān)系的。如果你采用過程式函數(shù)式開發(fā)，完全不會用到一個 this。 但在瀏覽器端開發(fā)時卻無可避免的會用到 this，這是因為瀏覽器對象模型（DOM）本身采用面向?qū)ο蠓绞介_發(fā)，Tag 實現(xiàn)為一個個的類，類的方法自然會引用類的其它方法，引用方式必然是用 this。當你給DOM對象添加事件時，回調(diào)函數(shù)里引用該對象就只能用 this 了。

明白了么？

相信看完全文以后，this不再是坑～

最新評論