JavaScript Closure

updated Oct 14, 2021created Oct 14, 2021

クロージャは「関数」と「その関数が作られた環境」という 2 つのものの組み合わせです。

js
function makeFunc(name) { return function(age) { return `${name}の年齢は、${age}ですね!`; }; } const func1 = makeFunc("田中太郎"); const func2 = makeFunc("山田太郎"); console.log(func1(22)); // 田中太郎の年齢は、22ですね! console.log(func2(23)); // 山田太郎の年齢は、23ですね!

クロージャでプライベートメソッドの模倣

js
// Module Pattern const counterModule = (function() { let count = 0; return { increment: function() { count++; }, show: function() { console.log(count); } }; })(); counterModule.show(); // 0 counterModule.increment(); counterModule.show(); // 1 console.log(count); // ReferenceError: count is not defined

IIFE (Immediately Executed Function Expression) --MDN Web Docs Glossary: Definition of Web-related Terms | MDN

Bad Case:

アロー関数 call、apply、bind のような、一般にスコープの設定のためのメソッドには適していません。

アロー関数式 - JavaScript | MDN