Javascript IIFE 与使用 let 或 var 声明的变量相关的奇怪行为

发布于09月10日

我试图理解为什么当用var声明权限时，变量‘Permises’的类型是‘Function’，而当用let声明时，变量的类型是‘Object’(这是例外行为)

With‘var’-权限类型为‘Function’

var Permissions;

(function (Permissions) {
    Permissions[Permissions["ADMIN"] = 0] = "ADMIN";
    Permissions[Permissions["READ_ONLY"] = 1] = "READ_ONLY";
})(Permissions || (Permissions = {}));

console.log(typeof Permissions);

WITH‘let’-权限类型为‘Object’

let Permissions;

(function (Permissions) {
    Permissions[Permissions["ADMIN"] = 0] = "ADMIN";
    Permissions[Permissions["READ_ONLY"] = 1] = "READ_ONLY";
})(Permissions || (Permissions = {}));

console.log(typeof Permissions);

我认为这两种情况都是"对象".为什么使用‘var’权限是‘Function’类型？

推荐答案

在全局作用域中声明具有var的变量将使其成为window的属性. 因为您还没有初始化它，所以它实际上指向现有的window.Permissions属性，这是一个navigator.permissions的构造函数.

let的工作方式不同，它在当前作用域中声明了一个单独的变量:

console.log(Permissions);
console.log(navigator.permissions.__proto__ === Permissions.prototype);

var test = 'test';
console.log(window.test);

如果您将您的var放入一个函数作用域，它的工作方式将类似于let:

(function(){

  var Permissions;

  (function (Permissions) {
      Permissions[Permissions["ADMIN"] = 0] = "ADMIN";
      Permissions[Permissions["READ_ONLY"] = 1] = "READ_ONLY";
  })(Permissions || (Permissions = {}));

  console.log(typeof Permissions);

})();

在模块作用域中也用作let:

<script type="module">

var Permissions;

(function (Permissions) {
    Permissions[Permissions["ADMIN"] = 0] = "ADMIN";
    Permissions[Permissions["READ_ONLY"] = 1] = "READ_ONLY";
})(Permissions || (Permissions = {}));

console.log(typeof Permissions);

</script>

有了这个和其他许多问题继承到var，我认为var是遗留的和危险的，并禁止它与ESLint.