基于js的变量提升和函数提升(详解)


Posted in Javascript onSeptember 17, 2017

一、变量提升

在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。

上个简历的例子如:

console.log(global); // undefined
var global = 'global';
console.log(global); // global

function fn () {
console.log(a); // undefined
var a = 'aaa';
console.log(a); // aaa
}
fn();

之所以会是以上的打印结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:

var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global); // 打印出global

function fn () {
var a; // 变量提升,函数作用域范围内
console.log(a);
a = 'aaa';
console.log(a);
}
fn();

二、函数提升

js中创建函数有两种方式:函数声明式和函数字面量式。只有函数声明才存在函数提升!如:

console.log(f1); // function f1() {}  
console.log(f2); // undefined 
function f1() {}
var f2 = function() {}

只所以会有以上的打印结果,是由于js中的函数提升导致代码实际上是按照以下来执行的:

function f1() {} // 函数提升,整个代码块提升到文件的最开始<br>console.log(f1);  
console.log(f2);  
var f2 = function() {}

结语:基本上就是这样,要熟练掌握的话可以多做些练习,test:

console.log(f1()); 
console.log(f2);  
function f1() {console.log('aa')}
var f2 = function() {}
(function() {
console.log(a);
a = 'aaa';
var a = 'bbb';
console.log(a);
})();

以上这篇基于js的变量提升和函数提升(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript高级程序设计 读书笔记之十一 内置对象Global
Mar 07 Javascript
js运动应用实例解析
Dec 28 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
Jun 07 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
Jqprint实现页面打印
Jan 06 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
Sep 06 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
原生js实现简单轮播图
Oct 26 Javascript
利用express启动一个server服务的方法
Sep 17 #Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 #Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 #Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 #Javascript
JS分页的实现(同步与异步)
Sep 16 #Javascript
AngularJs 延时器、计时器实例代码
Sep 16 #Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 #Javascript
You might like
星际争霸 Starcraft 秘技补丁
2020/03/14 星际争霸
PHP查询快递信息的方法
2015/03/07 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
jQuery 解析xml文件
2009/08/09 Javascript
js 弹出框 替代浏览器的弹出框
2010/10/29 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中for循环和while循环的基本使用方法
2015/08/21 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python中整数的缓存机制讲解
2019/02/16 Python
python如何读取bin文件并下发串口
2019/07/05 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
师范教师毕业鉴定
2014/01/13 职场文书
高一政治教学反思
2014/01/28 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Java Socket实现多人聊天系统
2021/07/15 Java/Android
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers