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 防止刷新,后退,关闭
Aug 07 Javascript
基于jquery自定义图片热区效果
Jul 21 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 Javascript
react 中父组件与子组件双向绑定问题
May 20 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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
图书管理程序(一)
2006/10/09 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
简单讲解Python中的闭包
2015/08/11 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
《埃及的金字塔》教学反思
2014/04/07 职场文书
社团活动总结模板
2014/06/30 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
2014年工人工作总结
2014/11/25 职场文书
论文致谢词范文
2015/05/14 职场文书
新郎婚礼致辞
2015/07/27 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript