ES6/ES11知识点 - 技术栈

ES

全称ECMAScript ，是脚本语言的规范，javascript是ES的一种实现。

作用域链

在 JavaScript 中，作用域链是一个非常重要的概念，它决定了变量和函数的访问顺序。掌握作用域链有助于深入理解执行上下文、闭包和变量查找等概念。

🧑‍💻 作用域链的定义

作用域链是 JavaScript 中查找变量和函数的机制。它由当前执行环境的作用域以及所有外部作用域组成。当你访问一个变量或函数时，JavaScript 会从当前作用域开始查找。如果找不到，就会沿着作用域链逐级向外查找，直到找到为止。如果整个链条都查找不到，JavaScript 会抛出一个 ReferenceError 错误。

🔗 作用域链的结构

每当执行一个函数时，都会创建一个执行上下文，每个执行上下文会有一个关联的作用域链。作用域链的顺序是从当前执行上下文的作用域开始，然后是上一级的作用域，依此类推，直到全局作用域。

🌐 作用域链的层次结构：

• 全局作用域：作用域链的最底层，包含全局范围内声明的变量和函数。

• 函数作用域：每个函数调用时，JavaScript 会创建一个新的执行上下文，包含该函数的局部变量。

• 嵌套作用域：如果一个函数在另一个函数内部定义，那么内函数可以访问外部函数的局部变量。

🔍 作用域链的工作原理

作用域链的核心是查找变量和函数的顺序。当代码执行时，JavaScript 会根据作用域链来查找变量。具体来说，它的查找顺序如下：

• 当前作用域：首先查找当前执行上下文中的变量。

• 外部作用域：如果在当前作用域中没有找到，就会在外层作用域中查找。

• 全局作用域：最后，查找全局作用域中的变量。

👨‍💻 示例：作用域链的工作原理

javascript 复制代码

let globalVar = 'I am a global variable';

function outerFunction() {
  let outerVar = 'I am an outer variable';
  
  function innerFunction() {
    let innerVar = 'I am an inner variable';
    console.log(innerVar); // 访问自身的作用域
    console.log(outerVar); // 访问外层作用域的变量
    console.log(globalVar); // 访问全局作用域的变量
  }
  
  innerFunction();
}

outerFunction();

📄 解释：

innerVar 是 innerFunction 内部声明的变量，直接访问。
outerVar 是 outerFunction 内部声明的变量，innerFunction 可以访问。
globalVar 是全局作用域中的变量，innerFunction 也可以访问。

在这个例子中，innerFunction 访问了它自己的作用域、外部作用域（outerFunction），以及全局作用域。

🔒 作用域链与闭包

闭包是 JavaScript 中的一个特殊现象。当函数内部返回另一个函数时，返回的函数会"记住"它创建时的作用域链。这就形成了一个闭包，即使外部函数已经执行完毕，内部函数仍然可以访问外部函数的变量。

📜 示例：闭包的工作原理

javascript 复制代码

function outerFunction() {
  let outerVar = 'I am an outer variable';

  return function innerFunction() {
    console.log(outerVar); // 访问外部作用域
  }
}

const closure = outerFunction();
closure(); // 输出: 'I am an outer variable'

💡 解释：

• innerFunction 成为一个闭包，它保留了 outerFunction 的作用域链，允许访问 outerVar 变量，即使 outerFunction 已经执行完毕。

🔑 总结

作用域链是 JavaScript 中查找变量和函数的机制，它通过当前执行上下文和所有外部执行上下文构成的链条来逐层查找。当你理解了作用域链，你就能更好地理解变量查找、闭包和执行上下文等高级概念。

声明变量

let

javascript 复制代码

// 声明变量的方式
let a；
let a,c,d;
let e=300;
let f=521,g='a',h=[];

变量不能重复声明
不存在变量提升
即不能在声明前去使用变量
不影响作用域链

块级作用域

变量只在代码块内有效，代码块是用{}包括在其中的代码

javascript 复制代码

{
	let i=10;
	
}
// if..else 
if(i<100){

}else{

}
//while
while(true){

}
//for 
for(let i=10;i<100;i++){

}

不影响作用域链的例子

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Switcher</title>
  <style>
    #colorBox {
      width: 200px;
      height: 200px;
      background-color: blue;
      cursor: pointer;
    }
  </style>
</head>
<body>

<div id="colorBox"></div>

<script>
  // 获取元素
  const colorBox = document.getElementById('colorBox');

  // 颜色切换的函数
  function toggleColor() {
    // 获取当前背景颜色
    const currentColor = colorBox.style.backgroundColor;
    
    // 切换颜色
    if (currentColor === 'blue') {
      colorBox.style.backgroundColor = 'red';
    } else {
      colorBox.style.backgroundColor = 'blue';
    }
  }

  // 给元素绑定点击事件
  colorBox.addEventListener('click', toggleColor);
</script>

</body>
</html>

const

声明常量

常量即值不能修改的

一定是需要赋初始值
常量命名一般使用全大写字母
属于块作用域

常量修改的时候，要注意一点：对于数组和对象的元素修改，不算作对常量的修改。不会报错

js 复制代码

const a= ['A','b'];
a[0]='aa';//这个是允许的
a=['a'] //这个是不允许的

var

使用var关键字声明变量会在所有的代码执行之前被声明，但不会赋值。要怎么理解呢，看下面的代码

html 复制代码

var i=1;
if(i>0){
}

var j=10;

在代码执行前，代码会变成如下：

html 复制代码

var i,j;
i=1;
if(i>0){
}

 j=10;

对变量解构赋值

允许安装一定模式从数组和对象中提取制，对变量进行赋值

javascript 复制代码

	const a= ['A','b'];
	let [x,y]=a;
	
	const people={
		name:'xxx',
		age :4
	}
	
	let {name,age}=people;
	console.log(name)