JavaScript进阶(一)变量声明提升实例分析


Posted in Javascript onMay 09, 2020

本文实例讲述了JavaScript变量声明提升。分享给大家供大家参考,具体如下:

JavaScript进阶(一)变量声明提升实例分析

如下代码输出的结果是?

var num = 123;
function foo1(){
 console.log( num ); //undefined
 var num = 456;
 console.log( num ); //456
}
foo1();

Javascript代码执行分为两个大步:

预解析的过程
代码的执行过程

1.预解析与变量声明提升

程序在执行过程中,会先将代码读取到内存中检查,会将所有的声明在此进行标记,所谓的标记就是让JS解析器知道有这个名字,后面在使用名字的时候不会出现未定义的错误。这个标记过程就是提升。

声明:

名字的声明,标识符声明(变量名声明)

  • 名字的声明就是让解析器知道有这个名字
  • 名字没有任何数据与之对应

函数的声明

  • 函数声明包含两部分
  • 函数声明与函数表达式有区别,函数声明是单独写在一个结构中,不存在任何语句,逻辑判断等结构中

    function f() {}
    function func() { // 函数声明
    } 
    if ( true ) {
     function func2 () {} //函数表达式
    }
    var f = function func3 () {}; //函数表达式
    this.sayHello = function () {}; //函数表达式
    var i= 1;
    function func4 () {} // 函数声明
     var j = 2;
    }

首先函数声明告诉解析器有这个名字存在,该阶段与名字声明一样
告诉解析器,这个名字对应的函数体是什么

var num = 1;
function num () {
 alert( num );
}
num(); // 报错

分析

  1. 预解析代码,提示名字

    • 首先提升名字num
    • 再提升函数名,但是名字已经存在,因此只做第二部,让名字与函数体对应上
    • 结论就是 代码中已经有一个函数 num 了
  2. 开始执行代码,第一句话从赋值语句开始执行

    • 给num赋值为1
    • 覆盖了函数
  3. 调用num,由于num中存储的是数组1,因此报错

2.代码分析举例

程序1

var num = 123;
function foo1(){
 console.log( num ); //undefined
 var num = 456;
 console.log( num ); //456
}
foo1();
  1. 预解析,提升 num 名字和 foo1 函数
  2. 执行第一句话:num = 123;
  3. 执行函数调用

    • 函数调用进入函数的一瞬间也要进行预解析,此时解析的是变量名 num
    • 在函数内部是一个独立的空间,允许使用外部的数据,但是现在 num 声明同名,即覆盖外面的
    • 执行第一句 打印num,没有数据,undefined
    • 执行第二句 赋值:num = 456;
    • 执行第三句 打印num,结果456

程序2

if ( ! 'a' in window ) {
 var a = 123;
}
console.log( a );

首先,预解析,读取提升 a ,有一个名字 a 存在了

其次,in 运算符:判断某一个字符串描述的属性名是否在对象中

  • var o = { name:'jim' }; 'name' in o,'age' in o
  • 执行第一个判断:! 'a' in window

    • 'a' in window 结果为真
    • !得到假
  • if内部的赋值不进行

最后,打印结果 a 的值为 undefined

程序3

if ( false ) {
 function f1 () {
  console.log( 'true' );
  }
} else {
 function f1 () {
  console.log( 'false' );
  }
}
f1();

预解析:提升 f1 函数,只保留提升后的内容,所以打印是 false

执行代码,第一句话就是一个空的if结构

if ( true ) {
} else {
}

执行函数调用,得到 false

3.问题

function foo () } {}
var foo = function () {};

上面的语法是声明,可以提升,因此在函数上方也可以调用

下面的语法是函数表达式,函数名就是foo ,他会提升,提升的不是函数体

函数表达式也是支持名字语法

var foo = function func1 () {};
func();

函数有一个属性name,表示的是函数名,只有带有名字的函数定义,才会有name属性值,否则是“”

  • 但是,函数表达式的名字,只允许在函数内部使用,IE8可以访问
  • ()可以将数据转化为表达式

新的浏览器中,写在if、while、do..while结构中的函数,都会将函数的声明转换成特殊的函数表达式
将代码

if (...) {
 function foo () { ... }
}

转换成

if (...) {
 var foo = function foo () { .... }
}

完。

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

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

Javascript 相关文章推荐
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 #Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 #Javascript
Node.js API详解之 util模块用法实例分析
May 09 #Javascript
Vue实现PC端靠边悬浮球的代码
May 09 #Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 #Javascript
基于JavaScript实现表格隔行换色
May 08 #Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 #Javascript
You might like
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
永不消失的title提示代码
2007/02/15 Javascript
使用prototype.js 的时候应该特别注意的几个问题.
2007/04/12 Javascript
javascript判断并获取注册表中可信任站点的方法
2015/06/01 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JS实现1000以内被3或5整除的数字之和
2016/02/18 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
javaScript基础详解
2017/01/19 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
2019/08/02 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
详解python的argpare和click模块小结
2019/03/31 Python
关于python多重赋值的小问题
2019/04/17 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
django model object序列化实例
2020/03/13 Python
TensorFlow实现批量归一化操作的示例
2020/04/22 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
美国知名男士服饰品牌:Brooks Brothers(布克兄弟)
2016/08/25 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
道路施工安全责任书
2014/07/24 职场文书
煤矿安全协议书
2014/08/20 职场文书
买房子个人收入证明
2014/10/12 职场文书
见习报告格式范文
2014/11/08 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
返乡农民工证明
2015/06/24 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang