[JavaScript] 英語動画「クロージャー(closure) 」で一番再生されている動画の和訳 No.2
Youtubeチャンネル Techsithの45万回以上再生されているクロージャー(Closure)に関する動画を日本語でまとめてみました。
クロージャー(Closure)とは
以下のコードでは、仮引数(parameter)passedが設定してあり、functionの中には定数inner=2があります。
とてもシンプルです。実引数(arguments)に3を入れることで5が出てきますね。
const addTo = function(passed) {
const inner = 2;
return passed + inner;
};
console.log(addTo(3));
しかしJavascriptでは、この仮引数passedを設定しなくても5をconsole.logで出すことが可能なんです。
functionの上にconst passed = 3を置いてみましょう・・・ 5が出てきます
const passed = 3
const addTo = function() {
const inner = 2;
return passed + inner;
};
console.log(addTo()); //結果 5
これをクロージャーといいます。
JavaScriptではfunctionの外側に設定されている変数(定数)をfunctionの内側からアクセスすることが可能です。それはJavaScriptには「レキシカルスコープ」という機能が採用されているからなんです。
functionもオブジェクトというところに注目!
ちょっと上記コードのaddToをconsoleでみてみましょう・・・
【ここはよく、じっくり読んでください】
このようにみてみると・・・functionオブジェクトに、外側で定義したconst passedがプロパティとして入っていて、それの値(value)が3となっています!
つまり、クロージャーはマジックでも適当な機能でもなんでもなくて、JavaScriptの機能として、「functionオブジェクトのプロパティに、外側で定義された変数(定数)がPRESERVED(保存)されるから」function内で使用することが出来る。。ということなんです!! (これは衝撃)
*オブジェクトやプロパティがまだわからない人は、「しまぶー」さんのYoutube動画でとてもわかりやすく、詳しく説明してくれています。
他の例もみてみましょう!!
const addTo = function(passed) {
const add = function(inner) {
return passed + inner
};
const addThree = new addTo(3);
const addFour = new addTo(4);
console.log(addThree(1)); // 結果 4
console.log(addFour(1)); // 結果 5
}
const addTo = function(passed) {
const add = function(inner) {
return passed + inner
};
const addThree = new addTo(3);
const addFour = new addTo(4);
console.log(addThree(1)); // 結果 4
console.log(addFour(1)); // 結果 5
}
1) まず、addThreeをみてみると addToの仮引数passed に3が入力されていますね!
「外側で設定された変数は内側functionオブジェクトのプロパティとして保存される」クロージャーのルールにより、function add(functionオブジェクト)ではもうすでに passed = 3 が入ってます!!! (ヤバすぎる!!!)
2) つまり、addThreeには、初期設定としてもうすでにpassedが入っている。
console.log(addThree(1))としてあげると、4が結果として出てくるということになります。
この動画では繰り返し、クロージャーは機能とかではなくて、ただ単に「外側で定義された変数はfunctionオブジェクトにプロパティとして"保存"される」ということを強調していました。そう考えると、確かにfunction内で当たり前のように使用できることも納得ですね!
参考動画: https://www.youtube.com/watch?v=71AtaJpJHw0&list=PLhiwWzNTSiJnjMWJ2Xn1fYiWewl0qnRIH&index=21&t=6s
Author And Source
この問題について([JavaScript] 英語動画「クロージャー(closure) 」で一番再生されている動画の和訳 No.2), 我々は、より多くの情報をここで見つけました https://qiita.com/rika4886/items/6caf6d790e708850d86c著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .