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 相关文章推荐
基于jquery的仿百度的鼠标移入图片抖动效果
Sep 17 Javascript
AngularJS语法详解
Jan 23 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 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
PHP 执行系统外部命令 system() exec() passthru()
2009/08/11 PHP
php 无法载入mysql扩展
2010/03/12 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
浅谈json_encode用法
2015/03/05 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
js实现获取div坐标的方法
2015/11/16 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
详解Bootstrap插件
2016/04/25 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
Python计算字符宽度的方法
2016/06/14 Python
Python 中迭代器与生成器实例详解
2017/03/29 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
python不同版本的_new_不同点总结
2020/12/09 Python
台湾生鲜宅配:大口市集
2017/10/14 全球购物
英国复古服装和球衣购买网站:3Retro Football
2018/07/09 全球购物
Delphi CS笔试题
2014/01/04 面试题
英文版网络工程师求职信
2013/10/28 职场文书
市场营销专业推荐信
2013/11/03 职场文书
高中物理教学反思
2014/02/08 职场文书
档案工作汇报材料
2014/08/21 职场文书
自信主题班会
2015/08/14 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python