在 ES6 中，函数作用域的变化是一个非常重要的话题。ES6 引入了一些新的语法和概念，使得函数作用域的变化更加灵活和强大。本文将详细介绍 ES6 中函数作用域的变化，并提供示例代码和指导意义。
let 和 const
ES6 引入了两个新的关键字：let 和 const。它们可以用来声明变量，与 var 不同，let 和 const 声明的变量具有块级作用域。
块级作用域是指一个代码块内部的变量只在该代码块内部可见。例如：
{
let x = 1;
console.log(x); // 1
}
console.log(x); // ReferenceError: x is not defined在上面的代码中，变量 x 只在代码块内部可见。在代码块外部访问变量 x 将会抛出 ReferenceError。
const 与 let 类似，也具有块级作用域。但是，const 声明的变量是常量，不能被再次赋值。例如：
const PI = 3.141592653589793; PI = 3; // TypeError: Assignment to constant variable.
在上面的代码中，常量 PI 被赋值后不能被再次赋值，否则将会抛出 TypeError。
使用 let 和 const 可以避免变量污染和意外赋值，使得代码更加安全和可靠。
箭头函数
ES6 引入了箭头函数，它可以更简洁地定义函数，同时也改变了函数作用域的行为。
箭头函数的语法如下：
(param1, param2, …, paramN) => { statements }例如：
const sum = (a, b) => a + b; console.log(sum(1, 2)); // 3
在上面的代码中，箭头函数 sum 接受两个参数 a 和 b，返回它们的和。箭头函数的语法简洁明了，可以更快地定义函数。
箭头函数与普通函数不同，它没有自己的 this 值，它的 this 值继承自外层作用域。例如：
-- -------------------- ---- -------
----- --- - -
------ --
--------- ---------- -
----- ---- - -----
----- ----- - -- -- -
------------------------
-
--------
-
-
--------------- -- -在上面的代码中，箭头函数 inner 继承了外层作用域的 this 值，因此它可以正确地访问 obj 的 value 属性。
使用箭头函数可以使得代码更加简洁和易读，同时也可以避免 this 值的混淆和错误。
总结
ES6 中函数作用域的变化使得代码更加灵活和强大。使用 let 和 const 可以避免变量污染和意外赋值，使用箭头函数可以使得代码更加简洁和易读，同时也可以避免 this 值的混淆和错误。在编写前端代码时，应该充分利用 ES6 的新特性，使得代码更加优雅和可靠。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d15c83add4f0e0ffa11402