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中奇葩的假值示例应用
Mar 11 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
在Google 地图上实现做的标记相连接
Jan 05 Javascript
探究Javascript模板引擎mustache.js使用方法
Jan 26 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
使用Node.js实现简易MVC框架的方法
Aug 07 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
swiper实现导航滚动效果
Dec 13 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
PHP提取中文首字母
2008/04/09 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
js判断运行jsp页面的浏览器类型以及版本示例
2013/10/30 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
学习Vue组件实例
2018/04/28 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
wxpython绘制音频效果
2019/11/18 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python的链表基础知识点
2020/09/13 Python
Django自带的用户验证系统实现
2020/12/18 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
社区国庆节活动方案
2014/02/05 职场文书
三严三实学习心得体会
2014/10/13 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
销售人员管理制度
2015/08/06 职场文书
PyTorch的Debug指南
2021/05/07 Python
SQL写法--行行比较
2021/08/23 SQL Server