Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

ごく短いメソッドチェーンの仕組みと遊び

More than 5 years have passed since last update.

メソッドチェーンの仕組みを今までスルーしていたんですが、関数で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};
_(")_(")._(")(");
hp0me
スマートフォンゲームがメインですが、最近は雑食になってきました。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away