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

Answer 1

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

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

因此，当您使用window.crypto分配给var crypto时，没有设置器，因此什么也没发生。许多其他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");