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 三种不同位置代码的写法
Oct 25 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
JQuery中的事件及动画用法实例
Jan 26 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
js发送短信倒计时的简单实现方法
Sep 08 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
js实现tab栏切换效果
Aug 02 Javascript
JS实现炫酷雪花飘落效果
Aug 19 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 file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
Javascript实现的分页函数
2007/02/07 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
JS下拉缓冲菜单示例代码
2013/08/30 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
js将当前时间格式化为 年-月-日 时:分:秒的实现代码
2018/01/20 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
js+canvas实现刮刮奖功能
2020/09/13 Javascript
Python深入学习之特殊方法与多范式
2014/08/31 Python
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python简单进程锁代码实例
2015/04/27 Python
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python用threading实现多线程详解
2017/02/03 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python字典对象实现原理详解
2019/07/01 Python
使用python画社交网络图实例代码
2019/07/10 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
澳大利亚设计师服装在线:MISHA
2019/10/07 全球购物
天游软件面试
2013/11/23 面试题
师说教学反思
2014/02/07 职场文书
小学生竞选班长演讲稿
2014/04/24 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
大学新生入学感想
2015/08/07 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
8g内存用python读取10文件_面试题-python 如何读取一个大于 10G 的txt文件?
2021/05/28 Python
nginx设置资源请求目录的方式详解
2022/05/30 Servers