Javascriptのcallとbindをちゃんと理解する

2021/05/21

Javascript テクノロジー

t f B! P L
eyecatch Javascript Loveの、弓削田です。 webブラウザの標準言語、で唯一無二というのが、なんとも素敵な言語ですね。 今現在は、だいぶ標準化も進んできていて、ブラウザ事の方言などもかなり少なくなってます。 これもひとえにIEが無くなってくれたおかげですねwww そんなJavascriptの言語で、わかりにくい機能として、 「call」と「bind」というのがあります。 他にも類似や関連機能として「apply」と「this」というのがあります。 質問サイトなどでも、たびたび見かけるこれらの機能をちゃんと理解できると、 Javascriptの開発が非常にはかどるので、自分なりの理解をブログにまとめておくことにしました。

サンプルプログラム

まず、次のようなプログラムを用意してみました。 var a = function(){ this.x = 1; }; var b = function(){ this.x = 2; }; var c = function(){ return this.x; }; 何がやりたいプログラムなのかというと、 a,b,c,それぞれの関数で、 関数aは、this.xに1を代入して、 関数bは、this.xに2を代入してます。 そして、関数cは、this.xを返すという内容になっていて、aとbのどちらかと連動して実行するようになっています。

call

上記サンプルプログラムをcall関数で実行するには、次のように書きます。 c.call(a()); > 1 c.call(b()); > 2

bind

callと同じ結果を出すようにするには、次のように、書きます。 c.bind(a())(); > 1 c.bind(b())(); > 2

簡単解説

ほとんど違いが分かりずらいので、間違い探しのようになっていますが、 bindは、後ろに()がついているのがわかるかと思います。 要するに、callは、それ自体でc関数を実行できているんですが、 bindの場合は、関数を定義する機能になっているようです。 なので、その後実行させるために、()をつけてあげなければいけないんですね。 どのサイトにも、thisの説明やらが書かれていて、少し分かりづらかったので、 もっとも短いサンプルプログラムで解説してみました。 もちろん、thisのことも理解した上で使わないといけないので、 やっぱりprototypeについては学習しておく必要がありそうです。 とりあえず、今回は、簡単にcallとbindが使えるようになることを目的にしてみました。 これでも分かりにくい人は、お便りでもください。

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ