Javascript中的上下文频敛，我認(rèn)識的三個階段
原作者：一狂
js 中的 上下文 Context，可以說是一個膛檀，你即使不知道锰镀，沒聽過，也不影響你繼續(xù)寫 js 代碼的一個概念咖刃。但是互站，它又確確實實是無所不在的一個東西，是的僵缺，無所不在。
從我自己的經(jīng)驗來看踩叭，對上下文的認(rèn)識磕潮，算是分成了三個階段，每一個階段容贝，都讓我從外在的表現(xiàn)中自脯，理解了一些更本質(zhì)上的東西。
第一階段斤富，不知
我最開始接觸 js 的時候膏潮，看到了它的 new ，看到了它的 this 满力，很自然地會把 js 和其它的一些 OOP 語言等同起來看待焕参，并且，好像油额，也是這么回事叠纷。比如：
var Class = function(a){
????? this.a = a;
????? this.add = function(){
??????????? this.a++;
??????}
}
var ins = new Class(1);
ins.add();
console.log(ins.a); //2
上面的代碼，可以按預(yù)期的那樣潦嘶，最后得到 2 的輸出涩嚣。
但是，如果僅僅是 類，實例 這種層面的認(rèn)識航厚，我無法解釋下面的問題：
var ins = new Class(1);
var func = ins.add;
func();
console.log(ins.a); //1
甚至解釋不清楚下面的代碼：
var obj = {
????? a: 1,
??????add: function(){
???????????? this.a++;
?????? }
}
obj.add();
console.log(obj.a); //2
這里可沒有 類 顷歌，也沒有 實例 。
我上面的最開始對 js 的認(rèn)識當(dāng)中幔睬，局限就在于眯漩，把 this 理解成了 實例 。也許在其它語言中（比如 Python 常用的實例方法第一個參數(shù) self）溪窒，是這樣坤塞。但是在 js 中， this 跟 實例 完全沒有關(guān)系澈蚌。
第二階段摹芙，this
當(dāng)我明白問題出在 this 上，或者說宛瞄，當(dāng)我終于理解了 this 這個東西之后浮禾，上面的代碼，再也不會困擾我了份汗。
我知道了盈电， js 中有一個東西叫 上下文 ，可惜的是杯活，這時匆帚，我對上下文的概念，僅僅停留在 this 上旁钧。
這時我的理解是： this 表示的是吸重，函數(shù)調(diào)用時的 上下文 。
說得詳細(xì)一點歪今，就是 this 不是表示的 實例 嚎幸，而是函數(shù)調(diào)用時的 上下文 。 上下文 這個東西寄猩，默認(rèn)是 window 嫉晶，即 全局 。但是田篇，你可以明確地為函數(shù)指定一個 上下文 替废。回到 this 上泊柬，就是在定義時你根本不知道 this 是什么舶担，因為在調(diào)用時，它可以是任何東西（因為 上下文 是可以人為指定的）彬呻。
回到剛開始的代碼：
var Class = function(a){
????? this.a = a;
????? this.add = function(){
???????????? this.a++;
????? }
}
var ins = new Class(1);
ins.add();
console.log(ins.a); //2
這段代碼的結(jié)構(gòu)之所以是 2 衣陶，不是因為 實例 柄瑰，而是因為 上下文 。
首先說一下 new 剪况。 new 在 js 中教沾，不考慮原型鏈它的作用，相當(dāng)于是先創(chuàng)建了一個空的對象译断，然后把這個空的對象授翻，作為 構(gòu)造函數(shù) 的 上下文 ，再去執(zhí)行 構(gòu)造函數(shù) 孙咪，最后再返回這個當(dāng)初的空對象堪唐。即：
var what_new = function(func, a){
????? var context = {};
????? func.apply(context, [a]);
????? return context;
}
var Class = function(a){
????? this.a = a;
????? this.add = function(){
??????????? this.a++;
????? }
}
var ins = what_new(Class, 1);
ins.add();
console.log(ins.a);
當(dāng)然， new 除了上面的 func.apply 的作用之外翎蹈， 它還會處理原型鏈 淮菠，這里就不介紹了。上面的代碼僅是為了說明 new 對于所謂的構(gòu)造函數(shù)做了什么事荤堪。
有了上下文合陵，就不難解釋 ins 這個東西了。所謂的構(gòu)造函數(shù)澄阳，只是在指定了 this 到底是哪一個對象之后拥知，作了相應(yīng)的賦值操作而已，最后得到這個對象的返回碎赢，經(jīng)過了一些賦值操作低剔，對象中就有了新的東西了。
同樣肮塞，對于一個在定義時包含了 this 的函數(shù)襟齿，比如前面的例子：
var obj = {
????? a: 1,
????? add: function(){
??????????? this.a++;
????? }
}
如果來一句：
var func = obj.add;
func(); //undefined
func.apply({a: 0}) //1
這些都很容易明白了。 js 中的函數(shù)峦嗤，都是一些很單純的函數(shù)，所有的函數(shù)跟它在哪里定義完全沒有關(guān)系（考慮閉包的情況除外）屋摔。所以上面的代碼烁设，雖然 add 函數(shù)是寫在 obj 中的，但是钓试，它跟你在 window 中寫一個函數(shù)是 完全一樣 的：
var add = function(){this.a++}
var obj = {
?????? a: 1,
?????? add: add
}
既然 add 函數(shù)中有 this 装黑，那么這個函數(shù)執(zhí)行時的行為，就要小心一點了弓熏。所以上面明確地指定了一個上下文給它 func.apply({a: 0}) 恋谭。
還是回到開始的代碼：
var obj = {
????? a: 1,
????? add: function(){
??????????? this.a++;
??????}
}
對于上面的代碼，我知道了：
obj.add();
和：
var func = obj.add();
func();
會得到不一樣的結(jié)果挽鞠。并且知道疚颊，這個不一樣的結(jié)果是上下文引起的狈孔，還知道，后者 func() 執(zhí)行時材义，上下文是全局的 window 了均抽。
我雖然知道是這樣的一個情況，但是其掂，為什么油挥？執(zhí)行同一個函數(shù)結(jié)果怎么就不一樣了呢？
我在很長時間里款熬，都沒有去細(xì)細(xì)考慮過這個問題深寥。不過，因為知道了“上下文是一個在定義時無意義贤牛，其具體值完全由執(zhí)行時決定”這點之后惋鹅，我都盡量避免去使用 this ，實在要用盔夜，在調(diào)用時负饲，我都會通過 apply 或 call 明確指定上下文，這樣喂链，至少不會踩坑里返十。
第三階段，一切都是上下文
某天椭微，我在網(wǎng)上看到了這樣一段代碼（原始出處不知道）：
var bind = Function.prototype.call.bind(Function.prototype.bind)
這個新定義的 bind 函數(shù)具體做什么事先不管它洞坑，我好奇的是 call.bind() 這個調(diào)用。因為 call 這個函數(shù)蝇率，之前一直以為它是 Function 對象的一個方法（它本身也是一個函數(shù)）迟杂，但是，如果按“對象的方法”這個角度去想的話本慕，那對它綁定一個上下文（ bind() 的調(diào)用 ）不就完全沒有意義了么排拷？（因為對象的方法應(yīng)該是跟上下文無關(guān)的）
后來看到了這篇文章， http://www.html-js.com/article/JavaScript-functional-programming-in-Javascript-Bind-Call-and-Apply
其中以 slice 函數(shù)舉的例子讓我恍然大悟：
?上下文控制不僅僅是 apply / call锅尘，所有的點 . 监氢，都是在指定上下文。
?js 中的函數(shù)比我想像的還要純藤违，根本沒有“對象中的方法”這個東西浪腐，即使是“原生對象”中。（它僅僅起一個名字空間的作用）
所有的函數(shù)調(diào)用顿乒，都有兩層意義议街，比如 c.f()：
?f 這個函數(shù)，它在 c 中璧榄。（名字空間的問題）
?把 c 作為 f 的上下文特漩，去調(diào)用 f 吧雹。（前提是 f 沒有綁定過上下文）
如果 c 沒有，則默認(rèn)是 window 拾稳。
所有的吮炕，js 中所有的函數(shù)調(diào)用，都是如此访得。即使是 f.call(context, x) 龙亲，我之前只看到了第一層意義（ f 中有一個 call 方法可以使用），則忽略了第二層意義 —— 把 f 作為 call 的上下文悍抑。
簡單來說鳄炉，我們可以相像 call 這個函數(shù)，它的代碼大概是這樣的（可變參數(shù)的問題先不管）：
var call = function(context, a){
????? var new_func = this.bind(context);
????? retur new_func(a);
}
它的作用搜骡，就是把 指定的上下文（context） 作為 自己的上下文（this） 的 上下文 拂盯，然后再調(diào)用 自己的上下文（綁定上下文之后的 this） 。
上面一句話有些糾結(jié)哈记靡，主要搞明白多種上下文的關(guān)系谈竿， f.call(context, x) 當(dāng)中， 自己的上下文 上面是 f 摸吠。 指定的上下文 上面是 context 空凸。
再看 f.call(context, x) 這個代碼，結(jié)合“函數(shù)是單純”這點寸痢，我想到呀洲，即使是原生對象的那些方法， 也不過是把一些單純的函數(shù)放到了 prototype 中而已 啼止，比如把 call 函數(shù)放到了 Function.prototype 當(dāng)中道逗。
至此，再看 c.f() 献烦， a.b.c() 這些滓窍，不要去想是調(diào)用 c 對象中的 f 方法（這么說沒錯，但是名字空間的問題是顯而易見的嘛）巩那，而是想成吏夯，調(diào)用時把 c 作為 f 的上下文。
好了拢操，回到開始的那行例子：
var new_bind = Function.prototype.call.bind(Function.prototype.bind)
這個就非常好理解了（為了描述方便锦亦，我改成 new_bind 了）舶替，把 bind 作為上下文綁定到 call 中令境。
這里注意一下，綁定了上下文的 call 函數(shù)顾瞪，還是 call 函數(shù)舔庶，但是 “此 call 已經(jīng)非彼 call” 了抛蚁。
所以：
new_bind != Function.prototype.call
雖然調(diào)用形式上， new_bind 和 call 完全一樣惕橙，但是他們的上下文行為不一樣：
?call 是未綁定狀態(tài)瞧甩，所以 f.call() 會在執(zhí)行時把 f 作為上下文綁定到 call 函數(shù)中。
?new_bind 是已綁定狀態(tài)弥鹦，所以 f.new_bind() 對 new_bind() 的執(zhí)行完全沒影響肚逸。
我們可以以這樣的流程來幫助我們理解：
new_bind => call => bind.call => bind.call(f, context) => f.bind(context)
一步一步解釋：
: new_bind => call
new_bind 在形式上就是 call 。
: call => bind.call
只是這個 call 彬坏，是指定了 bind 作為它的上下文的朦促。既然是 bind 作為它的上下文，那我們可以寫成是 bind.call 的樣式栓始。
: bind.call(f, context) => f.bind(context)
new_bind 的調(diào)用 new_bind(f, context) 就相當(dāng)于是 bind.call(f, context) 务冕。考慮 call 函數(shù)之前的行為： f.call(context, a) 是把 context 作為 f 的上下文幻赚，也就是 context.f(a) 禀忆，那么 bind.call(f, context) 對應(yīng)的就是 f.bind(context) 。
: f.bind(context)
不用多說了吧落恼，把 context 綁定到 f 上箩退，返回一個綁定了上下文的新函數(shù)。
完全是最基本的代數(shù)推導(dǎo)嘛领跛，形式上乏德，上下文前置總是沒有問題的。
結(jié)語
我一直認(rèn)同吠昭，要理解 js 的東西喊括，從函數(shù)式語言入手，非常合適矢棚。硬要往面向?qū)ο蟮哪翘讝|西上套郑什，太糾結(jié)了（我不管概念上到底什么樣才叫面向?qū)ο螅鷽]有類定義蒲肋，沒有繼承蘑拯，沒有實例化，就別扯這些就完了兜粘。對了申窘，我認(rèn)為原型追溯那不叫繼承哈）。
當(dāng)然孔轴，我不知道弄明白了最后那個“代數(shù)推導(dǎo)”到底有什么好處剃法，也許沒有，因為就算不明白這些也不影響我寫了很多可以正常工作的 js 代碼嘛路鹰。只是贷洲，我以后再寫收厨，思路上的可能會有一些不同了。比如代碼組織的形式上优构，可以嘗試把很多的小函數(shù)做到不同的“名字空間”中诵叁，然后再在業(yè)務(wù)層面，通過 Mixin 來拼出不同的業(yè)務(wù)對象钦椭。這些函數(shù)中可能到處充斥著 this 拧额，我能控制好它們了。
