JS可视化，掌握对象提升和声明提升

先睹为快：提升是什么？

提升是JavaScript的解释器解析代码时会做的一件有趣的事情。提升会在代码执行之前，将所有变量声明提升到代码块（函数或脚本）的最顶部。

对象提升和声明提升是两种不同的提升类型。对象提升指的是对象文字提升。声明提升指的是变量和函数声明提升。

对象提升

对象提升是指，在执行代码之前，将所有对象声明提升到代码块（函数或脚本）的最顶部。

// 代码块顶部
var obj = {
  name: "John",
  age: 30
};

// 代码块底部
console.log(obj); // { name: "John", age: 30 }

在上面的代码中，对象声明提升到了代码块的顶部。因此，在执行代码时，obj 对象已经存在了。

声明提升

声明提升指的是，在执行代码之前，将所有变量声明和函数声明提升到代码块（函数或脚本）的最顶部。

// 代码块顶部
var name = "John";
function sayHello() {
  console.log("Hello, " + name + "!");
}

// 代码块底部
sayHello(); // Hello, John!

在上面的代码中，变量声明和函数声明提升到了代码块的顶部。因此，在执行代码时，name 变量和 sayHello 函数已经存在了。

作用域和词法作用域

作用域是指变量和函数可以被访问的范围。词法作用域是指变量和函数的作用域是由它们的词法环境决定的。词法环境是指变量和函数被声明的位置。

在JavaScript中，作用域和词法作用域是相同的。这意味着，变量和函数的作用域是由它们的声明位置决定的。

提升的实际应用

提升在JavaScript中有很多实际应用。例如，提升可以用来创建模块模式和闭包。

模块模式

模块模式是一种将代码组织成独立模块的方法。模块模式可以用来封装数据和行为，并防止它们与其他代码冲突。

// 模块模式
var module = (function() {
  // 私有变量和函数

  return {
    // 公共变量和函数
  };
})();

在上面的代码中，提升将 module 函数提升到了代码块的顶部。因此，在执行代码时，module 函数已经存在了。

闭包

闭包是指可以访问自由变量的函数。自由变量是指函数内部使用的变量，但这些变量不是函数的参数或局部变量。

// 闭包
function createCounter() {
  var count = 0;

  return function() {
    return ++count;
  };
}

var counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

在上面的代码中，提升将 createCounter 函数提升到了代码块的顶部。因此，在执行代码时，createCounter 函数已经存在了。

总结

提升是JavaScript的解释器解析代码时会做的一件有趣的事情。提升会在代码执行之前，将所有变量声明提升到代码块（函数或脚本）的最顶部。

对象提升和声明提升是两种不同的提升类型。对象提升指的是对象文字提升。声明提升指的是变量和函数声明提升。

提升在JavaScript中有很多实际应用。例如，提升可以用来创建模块模式和闭包。