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 相关文章推荐
用js重建星际争霸
Dec 22 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
mint-ui的search组件在键盘显示搜索按钮的实现方法
Oct 27 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 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使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JavaScript中的集合及效率
2010/01/08 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
JavaScript条件判断_动力节点Java学院整理
2017/06/26 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
浅析Vue实例以及生命周期
2018/08/14 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
Smallable意大利家庭概念店:设计师童装及家居装饰
2018/01/08 全球购物
降消项目实施方案
2014/03/30 职场文书
面试必备的求职信
2014/05/25 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
逃课打麻将检讨书
2014/10/05 职场文书
群众路线个人整改方案
2014/10/25 职场文书
新党章的学习心得体会
2014/11/07 职场文书
小学班级管理心得体会
2016/01/07 职场文书
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL