js實現鏈式操作

前言：前不久阿里遠端面試時問了我乙個問題，如下：

functionperson(){};
var person = newperson();
//實現person.set(10).get()返回20

當時正在問我原型鏈的問題，所以面試官直接用我寫的person問的，我當時是這麼實現的：

functionperson(){};
var person = newperson();
person.set = function(n)}
}

返回結果其實也對，但set()和get()耦合太緊，不靈活。再聯想一下當時正在考我原型鏈，且面試開始時問了我jquery的鏈式操作原理（沒答上來），所以感覺這題應該跟鏈式操作有關，於是上網查了查，確實是要用鏈式操作。先來看看鏈式操作的原理和js如何實現。

jquery有乙個十分強大的特點：鏈式操作。其實原理很簡單，就是每次方法執行完後返回this物件，這樣後面的方法就可以繼續在this環境下執行。先來實現一下：

//建立乙個類
functionperson(){};
//在原型上定義相關方法
person.prototype =,
setage:function()
}//例項化
var person= newperson();
person.setname("mary").setage(20);

以上過程就實現了鏈式操作，而原理只是在每個方法呼叫後返回了this。jquery中不用new乙個例項化物件，所以可以將例項化過程封裝如下：

//將例項化過程封裝為乙個函式
functionnewobj()
newobj().setname("mary").setage(20);

此時再想想上面的那道題，就很簡單了：

functionperson(){};
//實現部分
person.prototype =,
get:function()
}var person = newperson();
console.log(person.set(10).get());//20

首先來說說缺點。

根據上面阿里面試題的實現，我們可以看出，get方法裡不能返回this，因為有值需要返回。這就是鏈式操作的乙個侷限：只能應用在不需要返回值的情況下，或者只能最後一步需要返回值。jquery主要是對dom元素的操作，只需要改變dom元素的表現而不需要返回值，所以適合鏈式操作。

再來說說優點。

js的執行環境為單執行緒，為了避免阻塞，我們時常用一些非同步程式設計方式來完成一些可能產生阻塞的操作。常見的非同步程式設計方式包括**函式、事件監聽、es6中的promise物件。

鏈式操作實際上就是使得非同步程式設計的流程更加清晰，不會像**函式一樣相互耦合，難以分辨函式的執行順序且維護困難。es6中的promise也正是沿用了這一思想，每乙個非同步任務返回乙個promise物件，通過then方法指定**函式。