ES6函数参数默认值的作用域机制详解

ES6函数参数默认值的作用域机制

本文通过具体实例解析ES6中函数作用域的相关特性，供读者参考学习。

当为函数参数设置默认值时，在声明初始化阶段，参数会构建一个独立的作用域（context）。该作用域在初始化完成后即行消失。这种语法行为在未设置默认值时不会出现。

var x = 1;

function f(x, y = x) {
 console.log(y);
}

f(2) // 2

在上述代码中，参数y的默认值被设定为变量x。调用函数f时，参数构成了一个独立的作用域。在此作用域内，默认值变量x指向的是第一个参数x，而非全局变量x，因此输出结果为2。

接着观察以下示例。

let x = 1;

function f(y = x) {
 let x = 2; 
 console.log(y)
}

在上面的代码中，调用函数f时，参数y = x形成了一个独立的作用域。在该作用域内，变量x尚未定义，因此它指向外层的全局变量x。函数调用时，函数体内部的局部变量x无法影响默认值变量x。

如果此时全局变量x不存在，程序将会报错。

function f(y = x) {
 let x = 2;
 console.log(y)
}

f() // ReferenceError: x is not defined

采用如下写法同样会引发错误。

var x = 1;

function foo(x = x) {
 // ...
}

foo() // ReferenceError: x is not defined

在上面的代码中，参数x = x形成了一个独立的作用域，实际执行逻辑等同于let x = x。由于暂时性死区的存在，这行代码会抛出“x未定义”的错误。

若参数的默认值是一个函数，该函数的作用域同样遵循上述规则。请参考以下示例。

let foo = 'outer'

function bar(func = () => foo) {
 let foo = 'inner';
 console.log(func())
}

bar() // outer

在上面的代码中，函数bar的参数func的默认值是一个匿名函数，其返回值是变量foo。在由函数参数形成的独立作用域内，并未定义变量foo，因此foo指向外层的全局变量foo，最终输出outer。

若采用以下写法，则会引发错误。

function bar (func = () => foo) {
 let foo = 'inner'
 console.log(func())
}

bar() // ReferenceError: foo is not defined

在上面的代码中，匿名函数内的foo指向函数外层，但函数外层并未声明变量foo，因此报错。

下面展示一个更为复杂的示例。

var x = 1;
function foo(x, y = function() {x = 2;}) {
 var x = 3;
 y()
 console.log(x)
}

foo() // 3
x // 1

在上面的代码中，函数foo的参数形成了一个独立的作用域。该作用域内首先声明了变量x，随后声明了变量y，y的默认值是一个匿名函数。该匿名函数内部的变量x指向同一作用域中的第一个参数x。函数foo内部又声明了一个内部变量。由于该内部变量与第一个参数x不属于同一作用域，因此它们不是同一个变量。执行y后，内部变量x和外部全局变量x的值均保持不变。

如果去除var x = 3中的var关键字，函数foo的内部变量x将指向第一个参数，与匿名函数内部的x保持一致，因此最终输出为2，而外层的全局变量x依然不受影响。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。