javascript - 了解 javascript 中的变量阴影？

Question

我创建了一个加密对象如下:

var crypto = {
  encrypt: function(s) {

  }
};

crypto.encrypt("cat");

我会得到以下错误

Uncaught TypeError: crypto.encrypt is not a function

var crypt = {
  encrypt: function(s) {

  }
};

crypt.encrypt("cat");

这行得通。我意识到已经有一个内置的 crypto 对象，所以我定义的加密对象没有被识别。

我的理解是后面声明的变量会影响前面声明的变量。

例如，当我创建如下两个对象时:

var test = {
  testing2: function() {
    return "there";
  }
}

var test = {
  testing: function() {
    return "hey";
  }
}

test.testing2()

然后我调用 test.testing2() 然后抛出类似的错误，因为第二个测试变量已经覆盖了第一个。因此，如果变量阴影适用于自创建的变量，那么为什么加密不被阴影？是不是预定义对象的优先级总是更高，所以任何自创建的对象都不会遮挡窗口对象。我很欣赏对此的任何见解。谢谢!

Answer 1

通常，是的，稍后声明的变量(使用var)将简单地覆盖先前声明的具有相同名称的var。不同的是在顶层用var声明的变量赋值给window属性，而window.crypto是一个带getter的属性，但是没有二传手:

console.log(
  Object.getOwnPropertyDescriptor(window, 'crypto')
);

因此，当您使用 var crypto 分配给 window.crypto 时，没有 setter，因此什么也不会发生。许多其他 window 属性的行为方式相同。

考虑使用 const 或 let 代替:

const crypto = {

  encrypt: function(s) {

  }
};

crypto.encrypt("cat");

或者将其放入 IIFE 中:

(() => {
  var crypto = {

    encrypt: function(s) {

    }
  };

  crypto.encrypt("cat");
})();

或use a linter

你也可以使用use strict来明确错误:

'use strict';
var crypto = {

  encrypt: function(s) {

  }
};

console.log('successfully defined crypto');
crypto.encrypt("cat");