《JavaScript 核心原理解析》学习笔记 Day 8 函数中的变量与执行

        在JavaScript中，从静态视角来看，函数是由参数、执行体、结果这三个语义组件构成的实体。

        在函数中可用 var 或 let 声明变量，其作用域均在函数内且存在变量提升，但 let 声明的变量不会向 var 声明的变量一样，在声明被提升的同时初始化为 undefined 值（可参考：《JavaScript 核心原理解析》学习笔记 Day 2 未声明变量 变量声明与词法声明_莫得感情学习机1号的博客-CSDN博客）。具体间如下代码：

// 在函数中使用 var 声明变量
function fvar(){
    console.log(x)
    var x=100
    console.log(x)
}
// 调用函数 fvar
// 因为 var 声明的变量在变量提升的同时会进行初始化，绑定值 undefined
// 所以第一次打印值为 undefined，第二次打印值为赋值的 100
fvar()
// undefined
// 100


// 在函数中使用 let 声明变量
function flet(){
    console.log(x)
    let x=100
    console.log(x)
}
// 调用函数 flet
// let 声明的变量也进行了变量提升，但不进行初始化
// 其初始化在代码声明的位置，即第一次打印后
// 所以第一次打印值报错，提示无法在 x 初始化前访问
flet()
// Uncaught ReferenceError: Cannot access 'x' before initialization


// 另外 let 声明变量时若不指定值，则默认也是 undefined
let x
x // undefined

        而当函数内声明的变量的名称与其形参名称重复时，var 声明并不会创建新的变量，仅发生赋值；而 let 声明会在函数声明时就报错，提示标识符已被声明过。具体见如下代码：

// 在函数内使用 var 声明与形参名称相同的变量
function fxvar(x){
    console.log(x)
    var x=100 // 与  效果完全相同
    console.log(x)
}
// x 获取到的是同一个变量，即声明 var x 未起效，仅发生了赋值 x=100
fxvar()
// undefined
// 100
fxvar(1)
// 1
// 100


// 在函数内使用 let 声明与形参名称相同的变量
// 在声明函数时就会报错，提升标识符 x 已被声明
function fxlet(x){
    console.log(x)
    let x=100
    console.log(x)
}
// Identifier 'x' has already been declared

 

      函数不可使用与形参相同名称的变量作为参数缺省时的默认值，虽然函数仍能成功声明，但调用时缺省参数会报错。因为函数内部会以形参名称声明变量，在根据传入值进行初始化前，这些变量是不可访问的。其默认值使用与形参相同名称的变量时，其访问的就是函数内未完成初始化的变量，即会报错。具体见如下代码：

// 以下函数使用与形参 x 相同名称的变量 x 作为参数缺省时的默认值
// 此时未声明变量 x，但函数能被成功声明
function f1(x=x){
    return x
}
// 带参数调用可以成功返回结果
f1(100) // 100
// 缺省参数调用报错，提示无法在 x 初始化前访问
f1() // Uncaught ReferenceError: Cannot access 'x' before initialization
// 声明变量 x
var x=100
// 缺省参数调用依然报错，提示相同
f1() // Uncaught ReferenceError: Cannot access 'x' before initialization


// 以下函数使用与形参 x 不同名称的变量 y 作为参数缺省时的默认值
// 此时未声明变量 y，但函数能被成功声明
function f2(x=y){
    return x
}
// 带参数调用可以成功返回结果
f2(100) // 100
// 缺省参数调用报错，提示 y 未被定义
f2() // Uncaught ReferenceError: y is not defined
// 声明变量 y
var y=100
// 缺省参数调用可以成功返回结果
f2() // 100

----- 极客时间《JavaScript 核心原理解析》学习笔记 Day 8 -----