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电信网通双线自动选择技巧
Nov 18 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
详解js中==与===的区别
Jan 08 Javascript
基于JavaScript实现购物车功能
Feb 07 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
Vue.js实现可编辑的表格
Dec 11 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
ThinkPHP的URL重写问题
2014/06/22 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
JS小功能(button选择颜色)简单实例
2013/11/29 Javascript
JS(JQuery)操作Array的相关方法介绍
2014/02/11 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
checkbox 选中一个另一个checkbox也会选中的实现代码
2016/07/09 Javascript
微信小程序开发之map地图实现教程
2017/06/08 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
Vue组件开发技巧总结
2018/03/04 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
python zip文件 压缩
2008/12/24 Python
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python交互环境下实现输入代码
2018/06/22 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
关于Python错误重试方法总结
2021/01/03 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
Uber Eats台湾:寻找附近提供送餐服务的餐厅
2018/05/07 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
优秀士兵先进事迹
2014/02/06 职场文书
小学清明节活动方案
2014/03/08 职场文书
运动会方队口号
2014/06/07 职场文书
党员志愿者活动总结
2014/06/26 职场文书
大学生毕业个人总结
2015/02/15 职场文书
装修公司工程部经理岗位职责
2015/04/09 职场文书
2015年城管个人工作总结
2015/05/15 职场文书