详解javascript 变量提升(Hoisting)


Posted in Javascript onMarch 12, 2019

简介

“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。

实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

声明变量的方法

var、let、const

不用以上关键字直接赋值的变量会挂载与windows环境下;

let a=9
const a=1
var a=6
c=5

声明函数的方法

javascript中声明函数的方法有两种:函数声明式和函数表达式。

//函数声明
function say(){
  console.log('hello') 
}

//函数表达式
var say=function (){
  console.log('hello') 
}

提升的好处

JavaScript 在执行任何代码段之前,将函数声明放入内存中的优点之一是,这允许你可以在在声明该函数之前使用一个函数。

/*** 正确的方式:先声明函数,再调用函数 (最佳实践)*/
function catName(name) {
  console.log("我的猫名叫 " + name);
}
catName("Tigger");
/*以上代码的执行结果是: "我的猫名叫 Tigger"*/


/*** 不推荐的方式:先调用函数,再声明函数 */
catName("Chloe");
function catName(name) {
  console.log("我的猫名叫 " + name);
}
/*代码执行的结果是: "我的猫名叫 Chloe"*/

提升规则

  • var 声明的变量,提升时只声明,不赋值,默认为undefined;不用关键字直接赋值的变量不存在提升(demo1)
  • 函数提升会连带函数体一起提升,不执行;(deom2)
  • 预解析的顺序是从上到下;(demo4)
  • 函数的优先级高于变量,函数声明提前到当前作用域最顶端;(deom3)
  • 变量重名,提升时不会重复定义;在执行阶段后面赋值的会覆盖上面的赋值;(demo4)
  • 函数重名,提升时后面的会覆盖前面;(demo5)
  • 函数和变量重名,提升函数,不会重复定义,变量不会覆盖函数;在执行阶段后面赋值的会覆盖上面的赋值;(demo8)
  • 用函数表达式声明函数,会按照声明变量规则进行提升;(deom6)
  • 函数执行时,函数内部的变量声明和函数声明也按照以上规则进行提升;(deom7)
  • let、const不存在提升;(demo9、demo10)
/**demo1**/
console.log('a=',a) //a=undefined
console.log('b=',b) // Uncaught ReferenceError: b is not defined
var a=1
b=6


/**deom2**/
console.log('a=',a) // a=function a() {console.log("func a()")}
function a() {
console.log("func a()")
}

/**deom3**/
console.log('a=',a) // a=function a() {console.log("fun a")}
var a=3
var a=4

function a(){
console.log("fun a")
}
var a=5
var a=6
console.log("a=",a) // a=6

 

/**deom4**/
console.log('a=',a) // a=undefined
var a =2
console.log('a=',a) //
var a =3
var a =4
console.log('a=',a) // a=4
console.log('b=',b) //b= undefined
var b='b1'


/**deom5**/
console.log('a=',a) // a=function a() {console.log("a2")}
function a(){
console.log("a1")
}
function a(){
console.log("a2")
}
console.log('a=',a) // a=function a() {console.log("a2")}


/**deom6**/
console.log('a=',a) // a=undefined
var a=function(){console.log('a1')}
var a=3
var a=4
var a=5
console.log(a)
var a=function(){console.log('a2')}
console.log('a=',a) // a= ƒ (){console.log('a2')}


/**deom7**/
console.log('b=',b)
var a=3
function b(i){
  console.log('a=',a)
  var a=4
  function a(){
    console.log('fun a')
  }
  console.log('a=',a)
}
b()


/**demo8**/
console.log('a=',a) //a= function a(){ console.log('fun a')}
var a=2
function a(){
  console.log('fun a')
}
console.log('a=',a) // a=2
var a=3
var a=4
var a=5
console.log('a=',a) // a=5


/**demo9**/
console.log('a=',a) //Uncaught ReferenceError: a is not defined
let a=4


/****/
<!--demo10-->
console.log('b=',b) // Uncaught ReferenceError: b is not defined
const b=5

参考资料

MDN

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript获取GridView选择的行内容
Apr 14 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JS定时器实例详细分析
Oct 11 Javascript
js购物车实现思路及代码(个人感觉不错)
Dec 23 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
Jan 11 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
NestJs 静态目录配置详解
Mar 12 #Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 #Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
Mar 11 #Javascript
记录一次完整的react hooks实践
Mar 11 #Javascript
es6数值的扩展方法
Mar 11 #Javascript
Vue实现一个图片懒加载插件
Mar 11 #Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
Javascript Math ceil()、floor()、round()三个函数的区别
2010/03/09 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python入门篇之数字
2014/10/20 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
.net笔试题
2014/03/03 面试题
STP的判定过程
2012/10/01 面试题
linux面试题参考答案(11)
2012/05/01 面试题
艺术爱好者的自我评价分享
2013/10/08 职场文书
应用数学自荐书范文
2013/11/24 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
奠基仪式主持词
2014/03/20 职场文书
商铺租赁意向书
2014/04/01 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
竞选大学学委演讲稿
2014/09/13 职场文书
毕业证明书
2015/06/19 职场文书
请病假条范文
2015/08/17 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python