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 相关文章推荐
Javascript 陷阱 window全局对象
Nov 26 Javascript
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JavaScript Array对象详解
Mar 01 Javascript
js获取时间精确到秒(年月日)
Mar 16 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
原生js实现焦点轮播图效果
Jan 12 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue element table中自定义一些input的验证操作
Jul 18 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
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
javascript 写类方式之十
2009/07/05 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
使用JS实现图片轮播的实例(前后首尾相接)
2017/09/21 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
python实现图片批量剪切示例
2014/03/25 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
python实现logistic分类算法代码
2020/02/28 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
应届护士推荐信
2013/11/16 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
六五普法规划实施方案
2014/03/21 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript
Python闭包的定义和使用方法
2022/04/11 Python