特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
过去,JavaScript的变量声明机制不像C语言一样,在声明变量的同时也会创建变量(绑定)。在以前的JavaScript中何时创建变量要看怎么声明变量。在以前的变量作用域有全局作用域和局部作用域,但不像其他的程序语言有块作用域一说。在ES6中新引入的块级作用域绑定机制。
var
声明及变量提升
在函数作用域或全局作用域中通过var
声明的变量,不管是在哪声明的,都会被当成在当前作用域顶部声明的变量,这也被称之为变量提升。拿个示例来说:
function getValue (condition) {
console.log(value); // => undefined
if (condition) {
var value = 'w3cplus';
console.log(value); // => w3cplus
return value; // => 如果condition为true,返回w3cplus
} else {
console.log(value); // => undefined
return null; // => 如果condition为false,返回null
}
console.log(value); // => undefined
}
getValue(true); // => w3cplus
getValue(false); // => null
刚接触JavaScript的时候,一直以为condition
为true
时才会创建value
变量。而事实上,不管condition
不管是为true
还是false
都已经创建了value
变量。在预编译阶段,JavaScript引擎会将上面的getValue()
函数修改成:
function getValue(condition) {
var value;
console.log(value);
if (condition) {
var value = 'w3cplus';
console.log(value);
return value;
} else {
console.log(value);
return null;
}
console.log(value);
}
变量value
被提升到函数顶部,而初始化操作依旧留在原处执行,这也就是说else {}
中也可以访问到value
变量,而且此时的value
并未初始化,所以其值为undefined
。
变量提升,简单的理解,就是把变量提升至函数的最顶部地方。需要说明的是:变量提升只是提升变量的声明,并不会把赋值也提升上来,没有赋值的变量初始值是undefined
。所以上面就出现了声明为undefined
的var
,因为赋值在后面声明提升在了前面。
还有一点需要注意的是因为JavaScript是函数级作用域,只有函数才会创建新的作用域,而不像其他语言有块级作用域,比如if
语句块。就上面的示例而言,不管会不会进入if
语句块,函数声明都会提升到当前作用域的顶部,得到执行。在JavaScript并不会创建一个新的作用域。
扩展阅读:
- JavaScript的变量:变量提升
- JavaScript中的作用域
- 变量提升
- 变量作用域
- JavaScript的作用域和提升机制
- 一篇文章弄懂JavaScript中作用域和上下文
- 深入理解javascript中的作用域
- 解释 JavaScript 的作用域和闭包
- 图解Javascript上下文与作用域
块级声明
把上面的示例做一下调整,如下:
console.log(value); // => ReferenceError: value is not defined
function getValue
如需转载,烦请注明出处:https://www.w3cplus.com/javascript/es6-block-scoping.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!