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 window.document的属性、方法和事件小结
Oct 24 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
初步了解javascript面向对象
Nov 09 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
原生js实现下拉框功能(支持键盘事件)
Jan 13 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
js oncontextmenu事件使用详解
Mar 25 Javascript
ReactNative实现Toast的示例
Dec 31 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 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
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
Expandable &quot;Detail&quot; Table Rows
2007/08/29 Javascript
brook javascript框架介绍
2011/10/10 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
layui问题之模拟select点击事件的实例讲解
2018/08/15 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
Python中datetime常用时间处理方法
2015/06/15 Python
python实现用户答题功能
2018/01/17 Python
python动态视频下载器的实现方法
2019/09/16 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
英国在线电子和小工具商店:TecoBuy
2018/10/06 全球购物
财务方面个人工作的自我评价
2013/12/28 职场文书
2014银行领导班子群众路线对照检查材料思想汇报
2014/09/17 职场文书
给校长的一封检讨书
2014/09/20 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
出纳岗位职责
2015/01/31 职场文书
销售工作决心书
2015/02/04 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫