Help us understand the problem. What is going on with this article?

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

More than 3 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};
_(")_(")._(")(");
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした