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 相关文章推荐
jquery的live使用注意事项
Feb 18 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
ES6的新特性概览
Mar 10 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
小程序简单两栏瀑布流效果的实现
Dec 18 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
基于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
Zerg剧情介绍
2020/03/14 星际争霸
PHP之短标签开启设置
2013/06/17 PHP
微信营销平台系统?刮刮乐的开发
2014/06/10 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php中使用websocket详解
2016/09/23 PHP
Javascript开发包大全整理
2006/12/22 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
详解vue+css3做交互特效的方法
2017/11/20 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
Python进程间通信Queue实例解析
2018/01/25 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Html5实现单张、多张图片上传功能
2019/04/28 HTML / CSS
伊利莎白雅顿官网:Elizabeth Arden
2016/10/10 全球购物
交通事故被告答辩状
2015/05/22 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
2016年国培研修日志
2015/11/13 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL