浅谈JavaScript 函数作用域当中的“提升”现象
在JavaScript当中,定义变量通过var操作符+变量名。但是不加 var 操作符,直接赋值也是可以的。
例如 : message = "hello JavaScript ! " 即定义了一个全局变量message,并赋值 “Hello JavaScript!”
--《JavaScript高级程序第三版》
如同往日一般,一群人在所谓的技术交流群里面相互斗图着。突然老王莫名的正经起来,在群里发了一道JavaScript的题目,让大家猜一猜这道题的答案。
var foo = 1;function bar() {foo = 10;return;function foo() {}}bar();console.log(foo); //求控制台输出多少?
看到这到题目之后,立刻不加思索回答了“10”。
首先第一步定义一个全局变量foo = 1
,然后函数执行的时候又定义全局变量 foo = 10
覆盖了之前的全局变量,return之后,这个函数就直接结束, function foo {}
来不及定义。因此控制台输出10;
按照在《高三》上面看到知识点推断,毫无问题,简直完美呀!
【给自己32个赞!】
但是,在把答案发出去之后。本能就感觉这道题不可能这么简单,不正经的群突然讨论正经的代码,肯定会有大坑等着人来跳。一种不好感觉涌上心头,感觉自己又要被打脸了。
赶紧打开编辑器测试一下这段代码,手哆嗦的按下F12.只见控制台下,一个耀眼的1赫然闯入眼帘。啪啪啪!!这脸又被打的,好疼呀!!
【为什么被打脸的总是我!!】
果不其然群里老王马上的在群里否决我的答案,啪的一下打了这张老脸。
不行!这个脸打了得把场子找回来,这个老王接下来肯定会揭晓答案并公布解题思路。得在他公布之前,讲答案和原因给测试出来。
经过简单的测试之后,发现原来是后面的foo,函数提升到最顶端了。所以后面foo = 10
中的foo实际上是一个局部变量了。因此后面console.log(foo)
时是拿不到bar函数中的局部变量foo = 10
,因此只能拿到全局变量foo = 1;所以控制台输出1。
上文代码的另外一种形式:
var foo = 1;function bar() {function foo(){}foo = 10;return;// function foo() {} 相当于这行代码提升到最顶部了}bar();console.log(foo);
被抢了风头的老王果断的不服气呀!说我瞎猜扯犊子一厢情愿的,自己随意猜想的。
好的,下面就是开始解释我为什么说函数function foo(){}
提升到最顶端。不改动老王的代码,让我们只是加两个console.log
测试一下相应的输出结果。
var foo = 1;console.log("全局变量:foo = " + window.foo)function bar() {console.log("此时bar函数中foo =" + foo)foo = 10;console.log("bar函数中的变量是" + foo);console.log("全局变量foo还是:"+window.foo);return;function foo() {}}bar();console.log(foo);
浏览器输出结果
通过这里可以证实我的猜想是正确的,function foo(){}
直接被提升到bar()函数最顶端,然后后面foo = 10
就不是再重新定义全局变量了,这里foo是一个局部变量的角色被定义出现的。因此才没有将全局变量给覆盖,而由于函数外面是不能直接拿到bar函数当中的局部变量foo,因此继续向上寻找到全局变量foo = 1.从而输出1.
这里估计联想能力丰富的小伙伴肯定会举手说,那么函数有提升的现象。那么变量也是否会有提升现象?不错!不错!!这位小伙伴联想的非常正确,学习就要多学会举一反三。
【奖励一朵小红花】
变量提升
var foo = 1;function bar() {foo = 10;return;var foo //几乎是相同的代码,只是把 function foo 变成了 var foo。变量也是能够提升了的!}bar();console.log(foo); //还是输出1.
思考:
同样的既然变量能够提升,函数声明能够提升。那么谁升的更高呢?
function test(){console.log(dabang);function dabang(){};var dabang;}test();function test1(){console.log(dabang);var dabang;function dabang(){};}test1();
控制台输出结果:
【大棒声明的函数那必须升的高!!!】
小结:
1、在JavaScript当中,函数作用域当中。变量和声明函数都能够提升。
2、同样提升的情况下,声明函数提升的更加高!
以上就是鄙人对于JavaScript函数作用域中“提升现象”一点简单理解,欢迎各位的大佬们指导学习。
ps:打脸也是可以的,毕竟错了就是错了。(那是打脸可否轻一点,留着日后再打呀!(~ ̄▽ ̄)~)
【吾虽浪迹天涯,却从未迷失本心!吾虽恶搞不断,却不敢胡乱代码!】
转载于:https://www.cnblogs.com/chedabang/p/6061975.html
浅谈JavaScript 函数作用域当中的“提升”现象相关推荐
- 浅谈javascript函数劫持
创建时间:2007-12-02 文章属性:原创 文章提交:hkluoluo (luoluonet_at_hotmail.com) by luoluo on 2007-11-30 luoluonet_a ...
- 浅谈JavaScript作用域,关于Java的学习路线资料
javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它.在前端领域,各种框架层出不穷.在后端领域,nodejs可谓如火如 ...
- 浅谈 JavaScript 编程语言的编码规范--转载
原文:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/ 对于熟悉 C/C++ 或 Java 语言的工程师来说,Jav ...
- JavaScript 中的 require / exports、import / export、浅谈JavaScript、ES5、ES6
Node.js 的基础教学 之 exports 和 module.exports:https://zhuanlan.zhihu.com/p/82057593 浅谈 JavaScript.ES5.ES6 ...
- 浅谈 JavaScript 编程语言的编码规范
转自:http://www.ibm.com/developerworks/cn/web/1008_wangdd_jscodingrule/?ca=drs-tp4608 developerWorks 中 ...
- 浅谈javascript中原型(prototype)、构造函数、对象实例及三者之间的关系
转自:http://www.cnblogs.com/zhangwei412827/archive/2012/12/14/2816263.html 浅谈javascript中原型(prototype). ...
- 浅谈async函数await用法
async和await相信大家应该不陌生,让异步处理变得更友好. 其实这玩意儿就是个Generator的语法糖,想深入学习得去看看Generator,不然你可能只停留在会用的阶段. 用法很简单,看代码 ...
- JavaScript函数作用域
JavaScript函数作用域 JavaScript作用域 作用域: 作用域指一个变量的作用范围 JS中一共两种作用域: (1)全局作用域 (2)函数作用域(局部作用域) 1.全局作用域 直接写在sc ...
- 浅谈云函数的代理IP利用面
浅谈云函数的代理IP利用面 前言 本篇文章介绍如何通过 Serverless(云函数) 实现各种扫描器探测功能,以达到绕过态势感知.WAF等安全设备,增大蓝队研判人员溯源难度,实现封无可封,查无可查的 ...
最新文章
- Mars说光场(4)— 光场显示
- Spring AOP切面的时候参数的传递
- Oracle数据库中dml提交,奇怪,ORACLE的触发器的DML操作,没有COMMIT,居然也能真正的提交掉???...
- matlab中esp=1.0e-3,ESP系列杂谈(一): eFuse 简介
- 【音频处理】使用 Adobe Audition 录制电脑内部声音 ( 启用电脑立体声混音 | Adobe Audition 中设置音频设备 | Adobe Audition 内录 )
- ECSHOP模板修改
- 达梦DM单机部署以及日常运维管理
- 怎么把pdf文件转换成word格式文档
- MySQL中文无法按照拼音首字母排序解决方法convert(name USING gbk)
- 手机软件自动化测试探索
- 26个字母的爱情含义!
- 参考文献格式字号字体_字体字号格式要求
- xmanager连接linux终端,Xmanager连接CentOS 7远程桌面
- 跨文件的 expected initializer before ‘xxx‘
- 陈吉平-阿里巴巴离职DBA在35岁总结的职业生涯
- 给bootstrap-treeview增加点击事件,单击菜单也能展开和折叠
- python神坑系列之深浅拷贝
- 访问网站时浏览器提示“不安全”是什么原因?
- visio2007小技巧
- Eureka注册中心
热门文章
- 计算机专业大二分方向,该选择人工智能还是网络安全
- 计算机视觉:值得一读的五本计算机视觉教科书
- OpenCV提示—“CV_BGR2HSV”: 未声明的标识符—解决
- mybatis缓存机制
- 使用c语言读写netcdf文件,[原][c][netcdf]读取函数
- android studil打断点_Android Studio你不知道的调试技巧
- 里bl2和bl3为什么分开_施工现场乙炔瓶为什么必须直立?乙炔为什么不能用尽?........
- python的面向对象编程学生成绩_python的类_面向对象编程
- 为什么重复值高的字段不能建索引(比如性别字段等)
- no.7_qzhai 开心版_传世霸业超变版下载-传世霸业超变版手机版下载v1.0