详谈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 相关文章推荐
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 Javascript
js局部刷新页面时间具体实现
Jul 04 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
js实现根据身份证号自动生成出生日期
Dec 15 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
基于vue.js实现购物车
Jan 15 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
php获取系统变量方法小结
2015/05/29 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
很棒的js Tab选项卡切换效果
2016/08/30 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python网络编程之文件下载实例分析
2015/05/20 Python
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
Python 函数返回值的示例代码
2019/03/11 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
个人收入证明范本
2015/06/12 职场文书
演讲比赛主持词
2015/06/29 职场文书
python中如何对多变量连续赋值
2021/06/03 Python