メソッドチェーンの仕組みを今までスルーしていたんですが、関数でthisを返し、そのthisを利用するとできるんですね。
ここでいうthisとは、いわゆるwindowオブジェクトです。なので環境依存ですね。(ブラウザでは動くと思います)
メソッドチェーンの仕組み
var base = function(){
console.log("base");
return this;
};
var chain = function(){
console.log("chain");
return this;
};
//base chain chain chain
base().chain().chain().chain();
base()はthis(windowオブジェクト)を返して、this.chain()を実行、chainはさらにthisを返して、this.chain()
thisのグローバル空間はどこか?というのも、最近の環境によって色々あると思う(node.js , webview, electronなど)ので掘り下げたいテーマですね。
そうしたら、ムーアの法則を作ってみます。(1年で2倍とします)
ムーアの法則
var entry = function(num){
this.num = num;
console.log("entry",this.num);
return this;
};
var moore = function(){
this.num *= 2;
console.log(this.num);
return this;
};
//entry 2 , 4 , 8 , 16 , 32
entry(2).moore().moore().moore().moore();
//32 グローバル(this.num)に変数が汚染
console.log(num);
ここでいうthisというのはwindowオブジェクトですから、グローバルなんですね。ということでどんどんグローバルに変数が入っていってしまいます。なので、本当はメソッドチェーンはクラスを作って使うのが良いようです。それか使うなら、命名を特殊にして名前が競合しないようにとかですかね。
もうちょっと遊んでみましょう。
顔に見えますか?
0_0
var $_$ = function(){
return this;
};
var _0_0 = function(){
return this;
};
$_$("0_0")._0_0("$_$");
混乱を誘うコードを書いてみましょう(あえてシンタックスなし)
var _ = function(){return this};
_(")_(")._(")(");