了解JavaScript中的变量阴影？

Question

我创建了一个加密对象，如下所示：

 var crypto = { encrypt: function(s) { } }; crypto.encrypt("cat"); 

我会收到以下错误

未捕获的TypeError： crypto.encrypt不是函数

 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()然后抛出类似的错误，因为第二个测试变量test.testing2()了第一个。 因此，如果变量影子可用于自创建变量，那么为什么不加密加密货币呢？ 是否存在这样的情况，即预定义对象的优先级始终较高，因此任何自行创建的对象都不会遮盖窗口对象。 我对此表示感谢。 谢谢！

Answer 1

通常 ，是的，稍后声明的变量（使用var ）将简单地覆盖之前声明的具有相同名称的var 。 区别在于，在顶层使用var声明的变量分配给window属性，而window.crypto是具有getter但不包含setter的属性：

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

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

考虑使用const或let代替：

 const crypto = { encrypt: function(s) { } }; crypto.encrypt("cat"); 

或将其放入IIFE：

 (() => { var crypto = { encrypt: function(s) { } }; crypto.encrypt("cat"); })(); 

或使用短绒

您也可以使用use strict使错误明确：

 'use strict'; var crypto = { encrypt: function(s) { } }; console.log('successfully defined crypto'); crypto.encrypt("cat");