Javascript避免全局变量 - 无法得到它的工作原理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript避免全局变量 - 无法得到它的工作原理相关的知识,希望对你有一定的参考价值。

所以我们在this page上找到了这个代码,我用它来试图理解变量范围,IIFE,等等:

// Because this function returns another function that has access to the
// "private" var i, the returned function is, effectively, "privileged."

function makeCounter() {
  // `i` is only accessible inside `makeCounter`.
  var i = 0;

  return function() {
    console.log( ++i );
  };
}

// Note that `counter` and `counter2` each have their own scoped `i`.

var counter = makeCounter();
counter(); // logs: 1
counter(); // logs: 2

var counter2 = makeCounter();
counter2(); // logs: 1
counter2(); // logs: 2

i; // ReferenceError: i is not defined (it only exists inside makeCounter)

这种方式产生了与使用全局变量并在每个函数调用上使用它的结果类似的结果,以更安全,更优雅的方式,不是吗?

2个问题

1 - 我无法看到i变量范围如何工作以维持计数器值,而不是每次再次调用函数时都将其重置为0。我知道这用于避免全局变量,但我不知道如何在不同的调用之间维护计数器值

counter();

2 - 为什么只有在将函数分配给另一个变量时,返回的函数才显示console.log(value)?

var counter2 = makeCounter();
    counter2(); // logs: 1

makeCounter(); //logs nothing

我不知道为什么。好的,我想

makeCounter(); 

你只是声明了返回的功能,而不是称之为......但是我不知道为什么我这样做会有所不同

var counter2 = makeCounter();
    counter2();
答案

一旦将它们与使用全局变量的等效单例进行比较,就很容易理解闭包:

(full disclosure, this example is bad practice)

var i = 0;

function counter() {
  console.log(++i);
}

counter();
counter();
另一答案

在函数makeCounter中会发生什么:

function makeCounter() {
  var i = 0;
  return function() {
    console.log( ++i );
  };
}

您正在返回一个函数,然后使用它是以下内容:

const counter = makeCounter(); // execute function and return other function
counter(); // This executes the function that you returned

例如,如果您没有返回函数,它将按预期工作:

function makeCounter() {
    var i = 0;
    console.log( ++i );
}
makeCounter(); // this execute logs
另一答案

问题“为什么返回的函数只有在你将函数分配给另一个变量时才显示console.log(value)?”

var counter2 = makeCounter();
    counter2(); // logs: 1

makeCounter(); //logs nothing

正如您将注意到“makeCounter”函数中的代码返回另一个函数。只执行“makeCounter()”实际上是返回一个新函数而不是执行它。

当我们写“var counter2 = makeCounter();”实际上我们将返回的函数分配给变量并进一步执行“counter2()”。为了更清晰,我们可以尝试“makeCounter()()”这将执行返回的函数。

参考其他问题,javascript中的每个函数都是"Function Object",因此两个对象不能相同,因此具有不同的范围。考虑以下情况:

var a = {"name":"Joe"}
var b = {"name":"Joe"}
console.log(a === b) // return false

以上是关于Javascript避免全局变量 - 无法得到它的工作原理的主要内容,如果未能解决你的问题,请参考以下文章

javascript如何列出全局对象的非原生属性。

javascript如何列出全局对象的非原生属性。

javascript如何列出全局对象的非原生属性。

JavaScript 闭包(Closure)

javascript闭包

无法访问全局变量(Javascript)