JavaScript专项算法题（3）：闭包

闭包、作用域和运行上下文

挑战1 createFunction

问题:

构建createFunction函数，用于创建和返回函数。当被创建的函数被调用时，它会打印“hello"。

题解：

// CHALLENGE 1
function createFunction() {
   
	const innerFunction = () => {
   
    console.log("hello");
  }
  return innerFunction;
}

/*** Uncomment these to check your work! ***/
const function1 = createFunction();
function1(); // => should console.log('hello');

挑战2 createFunctionPrinter

问题：

构建接受一个输入值作为参数的createFunctionPrinter函数，用于创建和返回一个特定函数。当特定函数被调用时，其应该打印特定函数被创建时输入createFunctionPrinter中的值。

题解：

// CHALLENGE 2
function createFunctionPrinter(input) {
   
	const innerValue = input;
  const innerFunction = () => {
   
    console.log(innerValue);
  }
  return innerFunction;
}

/*** Uncomment these to check your work! ***/
const printSample = createFunctionPrinter('sample');
printSample(); // => should console.log('sample');
const printHello = createFunctionPrinter('hello');
printHello(); // => should console.log('hello');

挑战3 addByX

问题：

观察下面outer函数的实现代码。注意其会返回一个函数而且那个函数使用了不在其作用域的变量。尝试推断一下运行outer函数得到的输出值，然后构建addByX函数，其会返回一个接受一个输入值作为参数并与x相加的函数。

代码：

// CHALLENGE 3
function outer() {
   
  let counter = 0; // this variable is outside incrementCounter's scope
  function incrementCounter () {
   
    counter ++;
    console.log('counter', counter);
  }
  return incrementCounter;
}

const willCounter = outer();
const jasCounter = outer();

// Uncomment each of these lines one by one.
// Before your do, guess what will be logged from each function call.

/*** Uncomment these to check your work! ***/
willCounter();
willCounter();
willCounter();

jasCounter();
willCounter();


function addByX(x) {
   
	let backpackValue = x ;
  const innerFunction = (el) => {
   
    return backpackValue + el;
  }
  return innerFunction;
}

/*** Uncomment these to check your work! ***/
const addByTwo = addByX(2);
console.log(addByTwo(1)); // => should return 3
console.log(addByTwo(2)); // => should return 4
console.log(addByTwo(3)); // => should return 5

const addByThree = addByX(3);
console.log(addByThree(1)); // => should return 4
console.log(addByThree(2)); // => should return 5

const addByFour = addByX(4);
console.log(addByFour(4)); // => should return 8
console.log(addByFour(5)); // => should return 9

挑战4 once

问题：

构建once函数，接受参数为一个回调函数并返回一个特定函数。当特定函数被第一次调用时，其会调用回调函数并返回输出值。如果其不是被第一次调用，则特定函数仅仅返回第一次调用时得到的回调函数返回值，而不是再次运行回调函数。

题解：

// CHALLENGE 4
function once(func) {
   
	let counter = 0;
  let innerValue = 0; 
  const innerFunction = (el) => {
   
    counter++;
    if(counter == 1) {
   
      innerValue = func(el);
      return innerValue;
    } else {
   
      return innerValue;
    }
  }
  return innerFunction;
}

/*** Uncomment these to check your work! ***/
const onceFunc = once(addByTwo);
console.log(onceFunc(4));  // => should log 6
console.log(onceFunc(10));  // => should log 6
console.log(onceFunc(9001));  // => should log 6

挑战5 after

问题：

构建after函数，接受一个数字n和一个回调函数作为参数。回调函数需要在通过after构建的函数运行第n次时才被运行。

题解：

// CHALLENGE 5
function after(count, func) {
   
	let counter = count;
  const innerFunction = () => {
   
    counter--;
    if(counter == 0){
   
      func();
    }
  }
  return innerFunction;
}

/*** Uncomment these to check your work! ***/
const called = function() {
    console.log('hello') };
const afterCalled = after(3, called);
afterCalled(); // => nothing is printed
afterCalled(); // => nothing is printed
afterCalled(); // => 'hello' is printed

挑战6 delay

问题：

构建delay函数，接受一个回调函数作为第一个参数，一个数值n（单位为毫秒）作为第二个参数。delay函数被调用后，须经n毫秒后才运行回调函数。任何其他赋给特定函数的参数会在n毫秒后被回调函数使用。提示：研究setTimeout();

题解：

// CHALLENGE 6
function delay(func, wait, ...args) {
   
  setTimeout(()<