清晰解释JS的变量和作用域

原始值和引用值

ECMAScript 变量可以包含两种不同类型的数据：原始值和引用值。原始值（primitive value）就是

最简单的数据，引用值（reference value）则是由多个值构成的对象。

原始值有6种 ：Undefined、Null、Boolean、Number、String 和 Symbol。保存原始值的变量是按值访问的，因为我们操作的就是存储在变量中的实际值。

引用值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存位置，因此也就

不能直接操作对象所在的内存空间。 在操作对象时，实际上操作的是对该对象的引用（reference）而非

实际的对象本身。为此，保存引用值的变量是按引用访问的。

注意 ： 在很多语言中（python、Java、C#、Ruby），字符串是使用对象表示的，因此被认为是引用类型。ECMAScript打破了这个惯例。

JavaScript为什么不允许直接访问内存地址？

JavaScript是一种高级的解释型编程语言，设计初衷是为了在浏览器中执行客户端脚本。它的设计目标之一是提供一种安全的执行环境，防止恶意代码访问用户的计算机。

为了实现这一目标，JavaScript采用了一些安全性措施，其中之一是不允许直接访问内存地址。JavaScript的内存管理是由JavaScript引擎自动处理的，开发人员无法直接访问和操纵内存地址。这种约束使得JavaScript在执行过程中更加可控和安全。

此外，JavaScript也被设计为一种具有简单易用的高级语言特性的脚本语言，它更关注于提供灵活性和便利性，而不是底层的内存访问和操作。 JavaScript的设计目标之一是提供一种易于上手和学习的编程语言，无需关注底层的内存管理和操作。

So，不允许直接访问内存地址是为了保证JavaScript的安全性和易用性，并为开发人员提供一个可靠和安全的编程环境。

变量声明

ES6 之后，JavaScript 的变量声明经历了翻天覆地的变化。直到 ECMAScript 5.1，var 都是声明变量

的唯一关键字。ES6 不仅增加了 let 和 const 两个关键字，而且还让这两个关键字压倒性地超越 var

成为首选。

使用 var 的函数作用域声明

在使用 var 声明变量时，变量会被自动添加到最接近的上下文 。在函数中，最接近的上下文就是函数的局部上下文。在 with 语句中，最接近的上下文也是函数上下文。如果变量未经声明就被初始化 了，那么它就会自动被添加到全局上下文，如下面的例子所示：

function add(num1, num2) {
 var sum = num1 + num2;
 return sum;
}
let result = add(10, 20); // 30
console.log(sum); // 报错：sum 在这里不是有效变量

这里，函数 add()定义了一个局部变量 sum，保存加法操作的结果。这个值作为函数的值被返回，

但变量 sum 在函数外部是访问不到的。如果省略上面例子中的关键字 var，那么 sum 在 add()被调用

之后就变成可以访问的了，如下所示：

function add(num1, num2) {
 sum = num1 + num2;
 return sum;
}
let result = add(10, 20); // 30
console.log(sum); // 30 

这一次，变量 sum 被用加法操作的结果初始化时并没有使用 var 声明。在调用 add()之后，sum

被添加到了全局上下文，在函数退出之后依然存在，从而在后面可以访问到。

注意： 未经声明而初始化变量是 JavaScript 编程中一个非常常见的错误，会导致很多问题。为此，读者在初始化变量之前一定要先声明变量。在严格模式下，未经声明就初始化变量会报错。

var 声明会被拿到函数或全局作用域的顶部，位于作用域中所有代码之前。这个现象叫作"提升"（hoisting）。 提升让同一作用域中的代码不必考虑变量是否已经声明就可以直接使用。可是在实践中，提升也会导致合法却奇怪的现象，即在变量声明之前使用变量。下面的例子展示了在全局作用域中两段等价的代码：

var name = "Jake";
// 等价于：
name = 'Jake';
var name;

下面是两个等价的函数：

function fn1() {
 var name = 'Jake';
}
// 等价于：
function fn2() {
 var name;
 name = 'Jake';
}

通过在声明之前打印变量，可以验证变量会被提升。声明的提升意味着会输出 undefined 而不是Reference Error：

console.log(name); // undefined
var name = 'Jake';
function() {
 console.log(name); // undefined
 var name = 'Jake';
} 

使用 let 的块级作用域声明

ES6 新增的 let 关键字跟 var 很相似，但它的作用域是块级 的，这也是 JavaScript 中的新概念 。块级作用域由最近的一对包含花括号{ }界定。换句话说，if 块、while 块、function 块，甚至连单独的块也是 let 声明变量的作用域。

let 与 var 的另一个不同之处是在同一作用域内不能声明两次。重复的 var 声明会被忽略，而重复的 let 声明会抛出 SyntaxError。

var a;
var a;
// 不会报错
{
 let b;
 let b;
}
// SyntaxError: 标识符 b 已经声明过了

let 的行为非常适合在循环中声明迭代变量。使用 var 声明的迭代变量会泄漏到循环外部，这种情况应该避免。来看下面两个例子：

for (var i = 0; i < 10; ++i) {}
console.log(i); // 10
for (let j = 0; j < 10; ++j) {}
console.log(j); // ReferenceError: j 没有定义

使用 const 的常量声明

除了 let，ES6 同时还增加了 const 关键字。使用 const 声明的变量必须同时初始化为某个值。一经声明，在其生命周期的任何时候都不能再重新赋予新值。

const a; // SyntaxError: 常量声明时没有初始化
const b = 3;
console.log(b); // 3
b = 4; // TypeError: 给常量赋值

const 除了要遵循以上规则，其他方面与 let 声明是一样的。

赋值为对象的 const 变量不能再被重新赋值为其他引用值，但对象的键则不受限制。

const o1 = {};
o1 = {}; // TypeError: 给常量赋值
const o2 = {};
o2.name = 'Jake';
console.log(o2.name); // 'Jake'

局部变量和外部变量

• 在JavaScript (ES5之前)中没有块级作用域的概念，但是函数可以定义自己的作用域。

• • 作用域(scope)，表示一些标识符作用的有效范围。
  • 函数的作用域表示在函数内部定义的变量，只有在函数内部可以被访问到。

• 外部变量和局部变量的概念:

• • 定义在函数内部的变量，被称之为局部变量 (Local Variables)。
  • 定义在函数外部的变量，被称之为外部变量 (Outer Variables)。

• 什么是全局变量?

• • 在函数之外声明的变量(在script中声明的)，称之为全局变量。
  • 全局变量在任何函数中都是可见的。
  • 通过var声明的全局变量会在window对象上添加一个属性 (了解) 。

• 在函数中，访问变量的顺序是什么呢?

• • 优先访问自己函数中的变量，没有找到时，在外部中访问。

函数声明/函数表达式

在开发中，函数的声明和函数表达式有什么区别，以及如何选择呢?

首先，语法不同：

• 函数声明:在主代码流中声明为单独的语句的函数
• 函数表达式：在一个表达式中或另一个语法结构中创建的函数其次，

JavaScript创建函数的时机是不同的：

• 函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用
• 在函数声明被定义之前，它就可以被调用。这是内部算法的原故. 当JavaScript 准备 运行脚本时，首先会在脚本中寻找全局函数声明，并创建这些函数

开发中如何选择呢?

当我们需要声明一个函数时，首先考虑函数声明语法.

它能够为组织代码提供更多的灵活性，因为我们可以在声明这些函数之前调用这些函数。

代码示例：

//函数的声明(声明语句)
foo()
// 在函数声明被定义之前，它就可以被调用。
function foo() (
console.log("foo函数被执行了~")
  
// 函数的表达式
console.Log(message) 
// 输出undefined，因为函数表达式是在代码执行到达时被创建，并且仅从那一刻起可用。
var message ="why"
console.Log(bar)
bar()
var bar = function() {
console.log("bar函数被执行了~")

执行上下文与作用域

执行上下文（context，执行环境） 的概念在 JavaScript 中是颇为重要的。变量或函数的上下文决定了它们可以访问哪些数据，以及它们的行为。每个上下文都有一个关联的变量对象），而这个上下文中定义的所有变量和函数都存在于这个对象上。虽然无法通过代码访问变量对象，但后台处理数据会用到它。

全局上下文是最外层的上下文。根据 ECMAScript 实现的宿主环境 （Web浏览器、服务器、移动端、嵌入式），表示全局上下文的对象可能不一样 。在浏览器中，全局上下文就是我们常说的 window 对象，因此所有通过 var 定义的全局变量和函数都会成为 window 对象的属性和方法。使用 let 和 const 的顶级声明不会定义在全局上下文中，但在作用域链解析上效果是一样的。

上下文在其所有代码都执行完毕后会被销毁，包括定义在它上面的所有变量和函数（全局上下文在应用程序退出前才会被销毁，比如关闭网页或退出浏览器）。每个函数调用都有自己的上下文。当代码执行流进入函数时，函数的上下文被推到一个上下文栈上。在函数执行完之后，上下文栈会弹出该函数上下文，将控制权返还给之前的执行上下文。ECMAScript程序的执行流就是通过这个上下文栈进行控制的。

上下文中的代码在执行的时候，会创建变量对象的一个作用域链（scope chain） 。这个作用域链决定了各级上下文中的代码在访问变量和函数时的顺序。代码正在执行的上下文的变量对象始终位于作用域链的最前端 。全局上下文的变量对象始终是作用域链的最后一个变量对象。

---

代码执行时的标识符解析是通过沿作用域链逐级搜索标识符名称完成的。搜索过程始终从作用域链的最前端开始，然后逐级往后，直到找到标识符。（如果没有找到标识符，那么通常会报错。）

看一看下面这个例子：

var color = "blue";

function changeColor() {
  let anotherColor = "red";

  function swapColors() {
    let tempColor = anotherColor;
    anotherColor = color;
    color = tempColor;

    // 这里可以访问 color、anotherColor 和 tempColor
  }

  // 这里可以访问 color 和 anotherColor，但访问不到 tempColor
  swapColors();
}

// 这里只能访问 color
changeColor();

以上代码涉及 3 个上下文：全局上下文、changeColor()的局部上下文和 swapColors()的局部上下文。全局上下文中有一个变量 color 和一个函数 changeColor()。changeColor()的局部上下文中有一个变量 anotherColor 和一个函数 swapColors()，但在这里可以访问全局上下文中的变量 color。swapColors()的局部上下文中有一个变量 tempColor，只能在这个上下文中访问到。全局上下文和changeColor()的局部上下文都无法访问到 tempColor。而在 swapColors()中则可以访问另外两个上下文中的变量，因为它们都是父上下文。下图展示了前面这个例子的作用域链。

图中的矩形表示不同的上下文。内部上下文可以通过作用域链访问外部上下文中的一切，但外部上下文无法访问内部上下文中的任何东西。

补充：头等函数

头等函数(first-class function;第一级函数)是指在程序设计语言中，函数被当作头等公民。

这意味着，函数可以作为别的函数的参数、函数的返回值，赋值给变量或存储在数据结构中。

通常我们对作为头等公民的编程方式，称之为函数式编程。

JavaScript就是支持函数式编程的语言，这个也是JavaScript的一大特点；