基于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 相关文章推荐
JS截取url中问号后面参数的值信息
Apr 29 Javascript
轻松掌握JavaScript策略模式
Aug 25 Javascript
函数四种调用模式以及其中的this指向
Jan 16 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
详解React native fetch遇到的坑
Aug 30 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
javascript实现京东快递单号的查询效果
Nov 30 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
简单采集了yahoo的一些数据
2007/02/14 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
PHP弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
基于jQuery的图片大小自动适应实现代码
2010/11/17 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
js判断节假日实例代码
2017/12/27 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python插入数据到列表的方法
2015/04/30 Python
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
Python实现的NN神经网络算法完整示例
2018/06/19 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python多线程下信号处理程序示例
2019/05/31 Python
python解析yaml文件过程详解
2019/08/30 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
MAC Cosmetics官方网站:魅可专业艺术彩妆
2019/04/10 全球购物
Pandora德国官网:购买潘多拉手链、戒指、项链和耳环
2020/02/20 全球购物
会计专业推荐信
2013/10/29 职场文书
体育专业个人求职信范文
2013/12/27 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书