基于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实现限制上传文件大小
Feb 06 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
JavaScript禁止用户多次提交的两种方法
Jul 24 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
three.js快速入门【推荐】
Jan 21 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
vue实现商城购物车功能
Nov 27 Javascript
Vue拖拽组件开发实例详解
May 11 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
node事件循环和process模块实例分析
Feb 14 Javascript
js实现弹窗猜数字游戏
Nov 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
php代码优化及php相关问题总结
2006/10/09 PHP
PHP 基本语法格式
2009/12/15 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
PHP中的empty、isset、isnull的区别与使用实例
2019/03/22 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
js null,undefined,字符串小结
2010/08/21 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
基于jquery自定义图片热区效果
2012/07/21 Javascript
Js控制弹窗实现在任意分辨率下居中显示
2013/08/01 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
javascript中错误使用var造成undefined
2016/03/31 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
nodejs实现简单的gulp打包
2017/12/21 NodeJs
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Python实现搜索算法的实例代码
2020/01/02 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
东方电视购物:东方CJ
2016/10/12 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
银行实习自我鉴定
2013/10/12 职场文书
新品发布会策划方案
2014/06/08 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
个人房屋租赁合同(标准范本)
2019/09/16 职场文书