基于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 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
js模拟类继承小例子
Jul 17 Javascript
js写一个字符串转成驼峰的实例
Jun 21 Javascript
document.getElementBy(&quot;id&quot;)与$(&quot;#id&quot;)有什么区别
Sep 22 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
JavaScript的继承实现小结
May 07 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
利用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
业余方法DIY电子管FM收音机
2021/03/02 无线电
关于php mvc开发模式的感想
2011/06/28 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
Function eregi is deprecated (解决方法)
2013/06/21 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
php抽象类和接口知识点整理总结
2019/08/02 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
2016/04/18 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python实现括号匹配的思路详解
2018/08/23 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
pandas处理csv文件的方法步骤
2020/10/16 Python
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
技术经理的自我评价范文
2013/12/03 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
大学生英语演讲稿
2014/04/24 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
创业计划书之书店
2019/09/10 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
导游词之凤凰古城
2019/10/22 职场文书
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript