JS的变量提升与函数提升怎样实现?顺序是什么?
Admin 2021-10-26 群英技术资�
今天我们来学习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'
最近笔试时碰到考察变量提升与函数提升顺序的一道题目,之前只知道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,道理很简单先声明的会被后声明的覆盖�
现在大家对于JS的变量提升与函数提升及顺序应该都有所了解了吧,上述示例能帮助大家理解很有用,有需要的朋友可以参考了解看看,希望大家阅读完这篇文章能有所收获,想要了解更多大家可以关注群英网络其它相关文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了uniapp和vue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章主要为大家详细介绍了原生js实现无缝轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
axios怎样实现请求封装及使�?通常,如果我们是做大型的项目,那么就需要使用到很多接口,而为了使用的方便,将接口封装起来很一个不错的方法,因此下面小编就能给大家分享axios的简单封装,需要的朋友可以参考�
用JS怎样做拖动div交换位置的效果?也就是在多个div中,我们可以拖动任意一个div,实现位置交换的效果,那么这一效果是如何实现的呢?接下来我们就一起来了解一下实现原理,下面还有实现代码及效果,感兴趣的朋友可以参考�
这篇文章主要为大家介绍了uni-app中的样式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078