JS声明式函数与赋值式函数实例分析


Posted in Javascript onDecember 13, 2016

本文实例讲述了JS声明式函数与赋值式函数。分享给大家供大家参考,具体如下:

引言

“程序是不会骗人的”我们项目中的一个哥们经常这样说,为什么他会有这样的感叹呢?就是有时候我么程序员会出现的这样的问题,当我们让别人来调试错误的时候,别人什么都没有说,在我们给人家复现错误的时候发现,错误竟然没有了,留下自己在风中凌乱。此处中枪的童鞋们请顶起来。。。。。。下面说说小编给别人调BUG时候遇到的问题如下:

请听题:说出下面几段js脚本的结果是什么?

<script type="text/javascript">
   Fn(); //执行结果:?????
   function Fn(){
    alert("执行了定义式函数");
   }
</script>
<script type="text/javascript">
   Fn(); //执行结果:?????
  var Fun= function(){
    alert("执行了赋值式函数");
   }
</script>
<script type="text/javascript">
   Fn(); //执行结果:?????
   function Fn(){
    alert("执行了函数1");
   }
   function Fn(){
    alert("执行了函数2");
   }
</script>

如果你能很好的得出答案的话,说明你对JS的这两种函数以及他们在执行顺序方面是比较清楚的,所以下面的讲解你就可带着审判的眼光来阅读了,否则的话你就不得不好好看看下面的讲解了,也许下面的讲解会给你一些额外的惊喜。

通过上面的代码中alet中的内容我们就可以分辨出这两种函数,这两种函数在js执行的时候会出现一些区别,在JS的预编译期,声明式函数将会先被提取出来,然后才按顺序执行js代码。

事实上,JS的解析过程分为两个阶段:预编译期(预处理)与执行期。

预编译期JS会对本代码块中的所有声明的变量和函数进行处理(类似与C语言的编译),但需要注意的是此时处理函数的只是声明式函数,而且变量也只是进行了声明但未进行初始化以及赋值。知道了这个原理以后我们就可以很好的分析上面的第一段js代码了,第一个js代码块得出的结果是:执行了alert函数;而第二个js代码块得出的结果是:浏览器保存,提示函数未定义!这就是这两种函数的不同。

第二段js代码就是买一赠一优惠政策,给读者赠送的一些东西了,它执行的结果是:弹出"执行了函数2",这是因为在js中重名的函数,后定义的会覆盖前面定义的函数,这种策略和js的顺序执行也是有关系的。小编在最近就是因为遇到了这种函数给我代码的麻烦所以才查了一些资料来整理了这篇博客。

小结

在开始的时候代码中写是赋值式函数,但是调用的代码写在了函数的前面从而导致程序出错,因为之前对于赋值式函数见到的并不多,这不知道这两种函数的区别,所以相当热的认为将调用函数的代码写在函数定义之前和之后是没有影响的,所以给小编带来很大的困惑。当然也是我们思想上的相当然带来的后果,一些东西我们并没有去验证就认为应该是这样的,从而给我们带来阻碍,在此也给广大程序猿们警告哦。。。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 学习笔记(十六) js事件
Feb 01 Javascript
javascript alert乱码的解决方法
Nov 05 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
bootstrap侧边栏圆点导航
Jan 11 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
Vue封装Swiper实现图片轮播效果
Feb 06 Javascript
用react-redux实现react组件之间数据共享的方法
Jun 08 Javascript
使用gulp构建前端自动化的方法示例
Dec 25 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
Jan 23 Javascript
jQuery内存泄露解决办法
Dec 13 #Javascript
Angular 常用指令实例总结整理
Dec 13 #Javascript
jQuery UI制作选项卡(tabs)
Dec 13 #Javascript
详解Bootstrap各式各样的按钮(推荐)
Dec 13 #Javascript
javascript动画系列之模拟滚动条
Dec 13 #Javascript
js闭包用法实例详解
Dec 13 #Javascript
深入学习Bootstrap表单
Dec 13 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
简单的分页代码js实现
2016/05/17 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
vue实现评价星星功能
2020/06/30 Javascript
pyqt5 lineEdit设置密码隐藏,删除lineEdit已输入的内容等属性方法
2019/06/24 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
2020/07/20 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
C++的几个面试题附答案
2016/08/03 面试题
大学生创业计划书的格式要求
2013/12/29 职场文书
大学运动会通讯稿
2014/01/28 职场文书
道德之星事迹材料
2014/05/03 职场文书
同学聚会策划方案
2014/06/06 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
自考生自我评价
2019/06/21 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
Java elasticsearch安装以及部署教程
2021/06/28 Java/Android
一些让Python代码简洁的实用技巧总结
2021/08/23 Python