JavaScript中变量提升与函数提升经典实例分析


Posted in Javascript onJuly 26, 2018

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

从两个实例说起:

eg1:

var i;
console.log(i); // 2

eg2:

console.log(i); // undefined
var i = 2;

1、提升

变量和函数声明从它们在代码中出现的位置被提升到了最上面。

注意:

只有声明本身会被提升,而赋值操作不会被提升。

变量会提升到其所在函数的最上面,而不是整个程序的最上面。

函数声明会被提升,但函数表达式不会被提升:

func1(); // Uncaught TypeError: func1 is not a function
func2(); // Uncaught ReferenceError: func2 is not defined
var func1 = function func2() { ... };

JavaScript中的ReferenceErrorTypeError

① ReferenceError:引用错误。JavaScript引擎查询变量时,若在作用域里没有找到该变量,JavaScript引擎就会抛出一个ReferenceError。

② TypeError:类型错误。当在作用域中找到了某变量引用,然后让该变量去做力所不能及的事情时,如引用它一个不存在的属性,或将非函数的变量用作函数引用,JavaScript引擎就会抛出一个TypeError。

2、函数优先

函数声明和变量声明都会被提升,但是需要注意的是函数会先被提升,然后才是变量。

func(); // 1
var func;
function func() {
  console.log(1);
}
func = function() {
  console.log(2);
}

运行结果:输出1而不是2

理由:var func;尽管出现在function func()之前,但它是重复的声明,会被忽略,因为函数声明会被提升到普通变量之前。上述代码等价于:

function func() {
  console.log(1);
}
func(); // 1
func = function() {
  console.log(2);
}

尽管重复的声明会被忽略掉,但出现在后面的函数声明还是可以覆盖前面的:

func(); // 3
function func() {
  console.log(1);
}
func = function() {
  console.log(2);
}
function func() {
  console.log(3);
}

一个普通块内部的函数声明通常会被提升到其所在作用域的顶部,提升过程不会被条件判断所控制:

func(); // 2
var flag = true;
if (flag)
  function func() { console.log(1); }
else
  function func() { console.log(2); }

注意:尽量避免在块内声明函数,在JavaScript未来的版本中上述行为可能会发生改变。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
javascript下4个跨浏览器必备的函数
Mar 07 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
js 利用image对象实现图片的预加载提高访问速度
Mar 29 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
Vue如何实现监听组件原生事件
Jul 03 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
js加减乘除精确运算方法实例代码
Jan 17 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 #Javascript
详解ECMAScript typeof用法
Jul 25 #Javascript
微信小程序动态生成二维码的实现代码
Jul 25 #Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 #Javascript
JavaScript实现的文本框placeholder提示文字功能示例
Jul 25 #Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 #Javascript
JavaScript简单实现关键字文本搜索高亮显示功能示例
Jul 25 #Javascript
You might like
用PHP调用数据库的存贮过程!
2006/10/09 PHP
PHP加速 eAccelerator配置和使用指南
2009/06/05 PHP
调整PHP的性能
2013/10/30 PHP
php禁止某ip或ip地址段访问的方法
2015/02/25 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
短信提示使用 特效
2007/01/19 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JavaScript中数据结构与算法(三):链表
2015/06/19 Javascript
模仿password输入框的实现代码
2016/06/07 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
纯JS实现弹性导航条效果
2017/03/06 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue学习笔记之给组件绑定原生事件操作示例
2020/02/27 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
Python实现购物程序思路及代码
2017/07/24 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python图像滤波处理操作示例【基于ImageFilter类】
2019/01/03 Python
python实现从尾到头打印单链表操作示例
2020/02/22 Python
详解Python中namedtuple的使用
2020/04/27 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
物业管理专业个人的自我评价
2013/11/19 职场文书
爱心捐款倡议书
2014/04/14 职场文书
搞笑的获奖感言
2014/08/16 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
三严三实对照检查材料范文
2014/09/23 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
企业承诺书格式范文
2015/04/28 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书