博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
详解js变量声明提升
阅读量:5159 次
发布时间:2019-06-13

本文共 1702 字,大约阅读时间需要 5 分钟。

之前一直觉会认为javascript代码执行是由上到下一行行执行的。自从看了《你不知道的JS》后发现这个观点并不完全正确。先来给大家举一个书本上的的例子:

var a='hello world';  var a;  console.log(a);

 

一开始我觉得输出的是undefined。但是真正的结果是hello world。带着疑问再看另外一段代码:

console.log(a);var a='hello world';

 

 

借鉴与上面的例子会认为会输出一个hello world,或者是抛出一个没有声明的异常错误,然而发现这两种想法也是错误。输出的结果是‘undefined’。这书非常人性化的总结出了结论是:

引擎解释javascript代码的之前会对其进行编译。在编译过程中会查找所有声明,并用合适作用域将他们关联起来。换句话说,在代码执行之前,会对作用域链中所有变量和函数声明先处理完先。所以,当遇到var a='hello world'中是 var a是先在编译阶段执行,然后在执行a='hello world'。所以,第一段代码实质上是:

var a;a='hello world';console.log(a);

 

 

所以输出的就就是helloworld。总结一句话就是:只有声明被提升,而赋值或其他运算会留在原地。所以第二段代码实际上就是:

var a;console.log(a);a='hello world';

 

 

介绍完这两个经典例子是时候来看看一下这个例子了:

var name = "world";(function () {if (typeof name == 'undefined') {var name = 'yang';console.log('Hello ' + name)} else {console.log('Hello ' + name)}})()

 

根据javascript的运行机制和javascript没有块作用域这个特点,可以得出,变量name会声明提升移至作用域 scope (全局域或者当前函数作用域) 顶部的。所以上述代码就相当于:

var name = "world";(function () {var name;if (typeof name == 'undefined') {var name = 'yang';console.log('Hello ' + name)} else {console.log('Hello ' + name)}})()

 

 

因此,if判断的时候typeof name == 'undefined'是true。所以会执行条件为true里面的代码。输出就是Hello yang。

那么如果想实现上面的函数,我们该如何实现?答案非常简单那就创建块作用域了。如何最简单的创建块作用域呢?那当然是采用es6的新特性let关键字。let关键字可以将变量绑定到所在的任意区域中通常在{...}中。换句话说。let为其声明变量隐性劫持到所在区域中。下列例子中:let就绑定到if (typeof name == 'undefined') {...}中。所以name不会被提升,所以判断就为假,于是就可以输出我们期待已久的‘helloworld’。

var name = "world";(function () {if (typeof name == 'undefined') {let name = 'yang';console.log('Hello ' + name)} else {console.log('Hello ' + name)}})()

 

注意点:let所在的块级作用域,在声明代码被运行前,是不会像var那样会被查找到,提前声明,而是运行到了该代码才会被声明执行。下面例子很好说明这个问题:

 
(function (){    console.log(b);    let b=2;})()

 

转载于:https://www.cnblogs.com/guanhuachen/p/6038957.html

你可能感兴趣的文章
Django框架(十九)—— drf:序列化组件(serializer)
查看>>
JS一些概念知识及参考链接
查看>>
关于JS中&&和||用法技巧
查看>>
TCP/IP协议原理与应用笔记24:网际协议(IP)之 IP协议的简介
查看>>
SAP HANA开发中常见问题- 基于SAP HANA平台的多团队产品研发
查看>>
内部元素一一相应的集合的算法优化,从list到hashmap
查看>>
游戏中的心理学(一):认知失调有前提条件
查看>>
SpringMVC-处理AJAX
查看>>
WHAT I READ FOR DEEP-LEARNING
查看>>
【Ruby】Ruby在Windows上的安装
查看>>
Objective C 总结(十一):KVC
查看>>
BZOJ 3747 洛谷 3582 [POI2015]Kinoman
查看>>
vue实战(7):完整开发登录页面(一)
查看>>
[转载]mysql的left,right,substr,instr截取字符串,截取
查看>>
Visual Studio自定义模板(二)
查看>>
【Mood-20】滴滤咖啡做法 IT工程师加班必备 更健康的coffee 项目经理加班密鉴
查看>>
摘抄详细的VUE生命周期
查看>>
javascript高级程序设计---js事件思维导图
查看>>
sprint计划会议
查看>>
读《构建之法-软件工程》第四章有感
查看>>