ホームページ > 記事 > ウェブフロントエンド > クロージャ - JavaScript の課題
この投稿のすべてのコードは、リポジトリ Github で見つけることができます。
/** * @return {Function} */ function createHelloWorld() { return function (...args) { return "Hello World"; }; } // Usage example const output = createHelloWorld(); console.log(output()); // => "Hello World"
/** * @param {...any} args * @return {Function | number} */ function add(...args) { let sum = args.reduce((acc, val) => acc + val, 0); function innerAdd(...moreArgs) { sum += moreArgs.reduce((acc, val) => acc + val, 0); return innerAdd; } innerAdd.getValue = function () { return sum; }; return innerAdd; } // Usage example console.log(add(1).getValue()); // => 1 console.log(add(1)(2).getValue()); // => 3 console.log(add(1)(2)(3).getValue()); // => 6 console.log(add(1)(2, 3).getValue()); // => 6 console.log(add(1, 2)(3).getValue()); // => 6 console.log(add(1, 2, 3).getValue()); // => 6
/** * @param {number} num */ function sum(num) { const func = function (num2) { return num2 ? sum(num + num2) : num; }; func.valueOf = () => num; return func; } // Usage example const sum1 = sum(1); console.log(sum1(2) == 3); // => true console.log(sum1(3) == 4); // => true console.log(sum(1)(2)(3) == 6); // => true console.log(sum(5)(-1)(2) == 6); // => true
/** * @param {number} initialValue * @return {Function} */ function makeCounter(initialValue = 0) { let count = initialValue - 1; return function (...args) { count += 1; return count; }; } // Usage example const counter = makeCounter(0); console.log(counter()); // => 0 console.log(counter()); // => 1 console.log(counter()); // => 2 //------------------------------ // return an object /** * @param {number} initialValue * @return {{get: Function, increment: Function, decrement: Function, reset: Function }} */ function makeCounter(initialValue = 0) { let count = initialValue; return { get: () => count, increment: () => ++count, decrement: () => --count, reset: () => (count = initialValue), }; } // Usage example const counterObj = makeCounter(0); console.log(counterObj.get()); // => 0 counterObj.increment(); console.log(counterObj.get()); // => 1 counterObj.decrement(); counterObj.reset(); console.log(counterObj.get()); // => 0
/** * @template T * @param {...T} values * @returns () => T */ function cycle(...values) { let index = -1; return function (...args) { index = (index + 1) % values.length; return values[index]; }; } // Usage example const helloFn = cycle("hello"); console.log(helloFn()); // => "hello" console.log(helloFn()); // => "hello" const onOffFn = cycle("on", "off"); console.log(onOffFn()); // => "on" console.log(onOffFn()); // => "off" console.log(onOffFn()); // => "on"
/** * @param {Function} func * @param {Number} count * @return {Function} */ function limit(fn, max) { let count = 0; let value; return function (...args) { if (count < max) { value = fn.call(this, ...args); count++; } return value; }; } // Usage example let i = 1; function incrementBy(value) { i += value; return i; } const incrementByAtMostThrice = limit(incrementBy, 3); console.log(incrementByAtMostThrice(2)); // i is now 3; The function returns 3. console.log(incrementByAtMostThrice(3)); // i is now 6; The function returns 6. console.log(incrementByAtMostThrice(4)); // i is now 10; The function returns 10. console.log(incrementByAtMostThrice(5)); // i is still 10 as this is the 4th invocation; The function returns 10 as it's the result of the last invocation. i = 4; console.log(incrementByAtMostThrice(2)); // i is still 4 as it is not modified. The function still returns 10.
/** * @param {Function} fn * @return {Function} */ function once(fn) { let ranOnce = false; let value; return function (...args) { if (!ranOnce) { value = fn.call(this, ...args); ranOnce = true; } return value; }; } // Usage example function func(num) { return num; } const onced = once(func); console.log(onced(1)); // => 1, func called with 1 console.log(onced(2)); // => 1, even 2 is passed, previous result is returned
/** * @param {any} val * @return {true | Error} */ function expect(val) { return { toBe: function (arg) { if (val === arg) { return true; } else { throw new Error("Not Equal"); } }, notToBe: function (arg) { if (val !== arg) { return true; } else { throw new Error("Equal"); } }, }; } // Usage example expect(5).toBe(5); // Passes expect(5).notToBe(6); // Passes try { expect(5).toBe(6); // Throws an error } catch (error) { console.log(error.message); // Not Equal }
以上がクロージャ - JavaScript の課題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。