var, const, let, window.prop 与 Object.defineProperty之间有什么区别？

Question

求大神解释一下下面示例的原因：

• 变量定义

<script>
  var a = 1
  let b = 2
  const c = 3
  window.d = 4
  Object.defineProperty(window, 'e', {
    value: 5
  })
  console.log(a, b, c, d, e)
  console.log(window.a, window.b, window.c, window.d, window.e)
</script>
输出：
1,2,3,4,5
1 undefined undefined 4 5

• 重复声明

<script>
  Object.defineProperty(window, 'a', {
    value: 1,
    writable: false
  })
  let a = 2
  console.log(a)
  console.log(window.a)
</script>
输出：
2
1

<script>
  Object.defineProperty(window, 'a', {
    value: 1
  })
</script>
<script>
  let a = 2
  console.log(a)
</script>
<script>
  console.log(a)
</script>
输出：
Uncaught SyntaxError: Identifier 'a' has already been declared
1

Answer 1

let 有独立作用域的

const 声明一个只读的常量、一旦声明，常量的值就不能改变。

全局的var会赋值给window、（这可能是你不想要的）

window属性赋值是很常见的做法、只不过赋值对象是window

Object.defineProperty可以设置setter和getter方法、
或者让他不可修改、甚至可以不让他变成对象的枚举

Answer 2

js里面Global这一级别就是window对象。所以a可以在window上访问到，d直接就在window上赋值的也可以访问到。e也是绑到了window上。

let和const这两个呢，属于ES2015，和他们共同诞生的有一个块级作用域，就是说他们定义的只会在当前块级作用域，不会被其他地方访问到。

然后最后一个提示被占用，我觉得可以这样来解释

Answer 3

在es6的规范中，有一个词叫Global Environment Records，它包括Object Environment Record和Declarative Environment Record。

Object Environment Record包含如下内容：

It contains global built-in bindings as well as FunctionDeclaration, GeneratorDeclaration, and VariableDeclaration bindings in global code for the associated Realm.

Declarative Environment Record包含如下内容：

Contains bindings for all declarations in global code for the associated Realm code except for FunctionDeclaration, GeneratorDeclaration, and VariableDeclaration bindings.

VariableDeclaration表示var声明，let和const声明叫LexicalDeclaration。由上面可见var声明和在window对象上声明的变量是在Object Environment Record里面的，而let和const声明的变量是在Declarative Environment Record中的。

再来看声明全局变量的函数，部分截图如下：

所以let和const声明会同时检查Object Environment Record和Declarative Environment Record，而var声明只检查Declarative Environment Record。

声明在全局对象上的属性和通过var声明的变量都会存在于Object Environment Record。并且通过var声明的变量会绑定到全局对象（window）上。

下面，我们来分析

<script>
  var a = 1
  let b = 2
  const c = 3
  window.d = 4
  Object.defineProperty(window, 'e', {
    value: 5
  })
  console.log(a, b, c, d, e)
  console.log(window.a, window.b, window.c, window.d, window.e)
</script>

由上面的理论知，a, d, e在Object Environment Record，b, c在Declarative Environment Record。这几个值都存在于Global Environment Records中，所以都能输出值；var声明的变量会绑定到window上，let和const声明的变量不会，所以window.b和window.c的值是undefined。

<script>
  Object.defineProperty(window, 'a', {
    value: 1,
    writable: false
  })
  let a = 2
  console.log(a)
  console.log(window.a)
</script>

因为存在变量声明提前，所以上面的代码相当于，但不完全等于下面的代码，见下面Update1的解释

<script>
  let a;
  Object.defineProperty(window, 'a', {
    value: 1,
    writable: false
  })
  a = 2;
  console.log(a)
  console.log(window.a)
</script>

当第一句声明a的时候，a不存在于Object Environment Record和Declarative Environment Record，所以可以声明成功，声明后的a在Declarative Environment Record中；然后defineProperty是定义了Object Environment Record中的a，打印a的时候先查找Declarative Environment Record里面的a，所以输出2，然后window.a输出的是Object Environment Record中的1。

<script>
  Object.defineProperty(window, 'a', {
    value: 1
  })
</script>
<script>
  let a = 2
  console.log(a)
</script>
<script>
  console.log(a)
</script>

在第一个script中，在Object Environment Record中声明了一个变量a；在第二个script中声明a的时候，会同时查找Object Environment Record和Declarative Environment Record，因为在Object Environment Record中已经有a了，所以报错，报错信息是a已经声明了。

Update1:
let声明会提升，但是不会被初始化，也就是说在let声明之前引用会报错，所以console.log(hello);let hello = "hello";会报错。var声明会被提升，并且初始化为undefined，所以console.log(hello);var hello = "hello";不会报错。

NOTE Lexically declared names are only instantiated here but not initialized.

我们也可以反证，问题中粘贴的第二段代码和第三段代码的差别其实不在于writable: false这句话，见下面截图：

所以，差别应该就是let声明提前了。