基于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 相关文章推荐
ExtJS下grid的一些属性说明
Dec 13 Javascript
Js切换功能的简单方法
Nov 23 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
PHP删除数组中空值的方法介绍
2014/04/14 PHP
Yii核心组件AssetManager原理分析
2014/12/02 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
FormValidate 表单验证功能代码更新并提供下载
2008/08/23 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
使用Sticky组件实现带sticky效果的tab导航和滚动导航的方法
2016/03/22 Javascript
浅谈Vue.js
2017/03/02 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
[02:53]2018年度DOTA2最佳战队-完美盛典
2018/12/17 DOTA
Python实现的tab文件操作类分享
2014/11/20 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
安装Python的教程-Windows
2017/07/22 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
Python基于WordCloud制作词云图
2019/11/29 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
科室工作的个人自我评价
2013/10/30 职场文书
护理专业大学生自我推荐信
2014/01/25 职场文书
开票员岗位职责
2015/02/12 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
作息时间调整通知
2015/04/22 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers