详谈js的变量提升以及使用方法


Posted in Javascript onOctober 06, 2018

介绍

变量提升Hoisting是人们对JavaScript执行上下文工作方式的一种认识,并不是官方给出的改变

从字面上理解,变量提升的意思是变量和函数的声明会在物理层移动到作用域的最前面。但是这样理解并不准确,效果是相同的,但是实际的实现方式是JavaScript的变量和函数的声明会在编译阶段放入内存

这意味着使用者在正式声明一个函数或者变量之前就能够使用它

函数的提升

在JavaScript中,在声明一个函数前,我们就能够使用它,大家应该都体验过,像这样:

test();

 

function test() {

  // do something

}

在正常的使用情况下,应该需要先声明函数才能调用,但是这种方法仍然能够运行,这是因为JavaScript自动将函数声明事先存入了内存的原因,看起来就像JavaScript自动把函数声明提升到了最前面

变量的提升

对于变量,JavaScript使用类似的方法,但是要注意一点的是,对于变量的提升,JavaScript只会将变量声明提升,但是不会把初始化提升,如果在变量初始化之前使用,则会得到undefined

// undefined

console.log(a);

// ReferenceError: b is not defined

console.log(b);

var a = 10;
// undefined

console.log(num);

num = 6;

// 6

console.log(num);

num += 7;

// 13

console.log(num);

var num;
// undefined

console.log(num);

num = 1;

// 1

console.log(num);

var num = 2;

// 2

console.log(num);

这里要注意,JavaScript的变量提升是针对var的,而let和const不存在变量提升这一特性

// ReferenceError: a is not defined

console.log(a);

let a = 10;

一个复杂一点的例子

var a = 100;

function fn() {

  // undefined

  console.log(a);

  var a = 200;

  // 200

  console.log(a);

}

fn();

// 100

console.log(a);

var a;

// 100

console.log(a);

// 300

var a = 300;

console.log(a);
Javascript 相关文章推荐
js 程序执行与顺序实现详解
May 13 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
Apr 26 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
Jun 06 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
浅析js中mvvm模式实现的原理
Oct 06 #Javascript
js for终止循环 跳出多层循环
Oct 04 #Javascript
iView-admin 动态路由问题的解决方法
Oct 03 #Javascript
Angular resolve基础用法详解
Oct 03 #Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 #Javascript
angular.js实现列表orderby排序的方法
Oct 02 #Javascript
Angularjs实现数组随机排序的方法
Oct 02 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
JavaScript 反科里化 this [译]
2012/09/20 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
详解Python基础random模块随机数的生成
2019/03/23 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
戴森美国官网:Dyson美国
2016/09/11 全球购物
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
新春联欢会主持词
2014/03/24 职场文书
校车安全责任书
2014/08/25 职场文书
离职感谢信
2015/01/21 职场文书
保密法制宣传月活动总结
2015/05/07 职场文书
迎新生晚会主持词
2015/06/30 职场文书
党员干部学习心得体会
2016/01/23 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
python用tkinter开发的扫雷游戏
2021/06/01 Python
mysql中整数数据类型tinyint详解
2021/12/06 MySQL