了解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");