javascript变量值做函数名(JavaScript中变量提升和函数提升实例详解)
类别:编程学习 浏览量:842
时间:2021-10-14 00:05:47 javascript变量值做函数名
JavaScript中变量提升和函数提升实例详解js 执行
- 词法分析阶段:包括分析形参、分析变量声明、分析函数声明三个部分。通过词法分析将我们写的 js 代码转成可以执行的代码。
- 执行阶段
变量提升
- 只有声明被提升,初始化不会被提升
- 声明会被提升到当前作用域的顶端
🌰 1:
console.log(num) var num num = 6
预编译之后
var num console.log(num) // undefined num = 6
🌰 2:
num = 6 console.log(num) var num
预编译之后
var num num = 6 console.log(num) // 6
🌰 3:
function bar() { if (!foo) { var foo = 5 } console.log(foo) // 5 } bar()
预编译之后
function bar() { var foo // if语句内的声明提升 if (!foo) { foo = 5 } console.log(foo) } bar()
函数提升
- 函数声明和初始化都会被提升
- 函数表达式不会被提升
🌰 1: 函数声明可被提升
console.log(square(5)) // 25 function square(n) { return n * n }
预编译之后
function square(n) { return n * n } console.log(square(5))
🌰 2: 函数表达式不可被提升
console.log(square) // undefined console.log(square(5)) // square is not a function var square = function(n) { return n * n }
预编译之后
var square console.log(square) console.log(square(5)) square = function() { return n * n }
🌰 3:
function bar() { foo() // 2 var foo = function() { console.log(1) } foo() // 1 function foo() { console.log(2) } foo() // 1 } bar()
预编译之后:
function bar() { var foo foo = function foo() { console.log(2) } foo() // 2 foo = function() { console.log(1) } foo() // 1 foo() // 1 }
函数提升在变量提升之前
🌰 1:
console.log(foo) // 会打印出函数 function foo() { console.log('foo') } var foo = 1
🌰 2:
var foo = 'hello' // hello ;(function(foo) { console.log(foo) var foo = foo || 'world' console.log(foo) //hello })(foo) console.log(foo) // hello
预编译之后
var foo = 'hello' ;(function(foo) { var foo foo = 'hello' // 传入参数的foo值 console.log(foo) // hello foo = foo || 'world' // foo有值为hello,所以没有赋值为world console.log(foo) // hello })(foo) console.log(foo) // hello, 打印的事全局作用域下的var foo = 'hello'
JS变量提升和函数提升的顺序
最近笔试时碰到考察变量提升与函数提升顺序的一道题目,之前只知道var定义的变量会有变量提升以及函数声明也会提升,但没有深入研究他们的顺序以及详细过程。事后查阅资料加上自己的验证,得出了自己对于它们顺序的一些理解,话不多说,直接进入正题。
首先给出我的结论:函数提升优先级高于变量提升,且不会被同名变量声明时覆盖,但是会被同名变量赋值后覆盖
大家可以看下面这段代码:
console.log(a) // ƒ a(){} 变量a赋值前打印的都会是函数a var a=1; function a(){} console.log(a) // 1 变量a赋值后打印的都会是变量a的值
首先变量和函数声明都提升,但函数提升优先级高于变量,都提升后变量只是定义没有赋值,所以输出的是函数a。详细过程如下:
function a(){} // 函数声明提升 a-> f a (){} var a; // 变量提升 console.log(a) // 此时变量a只是声明没有赋值所以不会覆盖函数a --> 输出函数a f a (){} a=1; //变量赋值 console.log(a) // 此时变量a赋值了 --> 输出变量a的值 1
总结:由于函数声明和变量都会提升,如果函数与变量同名,那么只要在变量赋值前打印的都会是函数,在变量赋值之后打印都是变量的值。
现在让我们再看一段代码:
a(); // 2 var a = function(){ // 看成是一个函数赋值给变量a console.log(1) } a(); // 1 function a(){ console.log(2) } a(); // 1
其实只是想告诉大家只有函数声明才会提升函数表达式不会提升,所以在函数表达式后面的代码会输出1,因为变量a赋值后把提升的函数a覆盖了。详细过程如下:
function a(){ // 函数提升 console.log(2) } var a; // 变量提升 a(); // 2 a = function(){ // 变量a赋值后覆盖上面的函数a console.log(1) } a(); // 1 a(); // 1
再看一段代码:
a(); function a(){ console.log(1) } function a(){ console.log(2) }
打印的是2,道理很简单先声明的会被后声明的覆盖。
总结
到此这篇关于JavaScript中变量提升和函数提升的文章就介绍到这了,更多相关js变量提升和函数提升内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- lazyload延迟加载有什么影响(利用原生JS实现懒加载lazyLoad的三种方法总结)
- nginx安全配置提示(wdcp Linux面板nginx启用gzip后js未压缩解决方案)
- extjs 日期控件
- js使用canvas(JavaScript canvas实现七彩时钟效果)
- nodejs八种命令(详细谈谈NodeJS进程是如何退出的)
- ExtJs中怎么上传文件
- html5和css3最新特性(html5中使用hotcss.js实现手机端自适配的方法)
- react实现js控制样式(React + Threejs + Swiper 实现全景图效果的完整代码)
- js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)
- js分号的使用
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- js脚本语言原理(实例说明js脚本语言和php脚本语言的区别)
- nodejs 内部模块代码(详解Node.js如何处理ES6模块)
- nodejs格式化教程(nodejs利用readline提示输入内容实例代码)
- jscanvas画折线图(js+canvas实现代码雨效果)
- js定时器几分钟执行(利用JS定时器实现元素移动)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 数字藏品市场有多乱 周杰伦丢了 一只猴 ,损失超300万(数字藏品市场有多乱)
- 这里输入关键词(怎么输入关键词搜索)
- 得这个 难治病 的人太多了,300个人赶到杭州商量怎么办(得这个难治病的人太多了)
- 经度,世界时间腕表的灵魂(世界时间腕表的灵魂)
- 阿里最新财报公布 三季度营收增长3 ,将增加150亿美元回购额度 在美股价小涨(阿里最新财报公布)
热门推荐
- 宝塔面板扩展安装(宝塔面板一键安装配置sg11组件教程)
- docker查看容器教程(如何使用docker对容器资源进行限制)
- opencv人脸识别效果好吗(通过opencv制作人脸识别的窗口)
- .NET中低版本程序调用高版本DLL
- linux切换python版本(linux安装python修改默认python版本方法)
- zabbix 容器(zabbix监控docker应用配置)
- pythonflask编写接口(Python Flask框架模板操作实例分析)
- css动画的性能(你所不知道的 CSS 动画技巧与细节)
- dedecms标签解析(解决DEDECMS采集文章待审核后仍列表显示)
- dedecms注册会员界面如何打开(dedecms后台登录成功后返回到登录界面的解决方法)