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 学习笔记(八)javascript对象
Apr 12 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
jQuery循环遍历子节点并获取值的方法
Apr 14 Javascript
jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
Aug 20 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
Oct 10 Javascript
jquery popupDialog 使用 加载jsp页面的方法
Oct 25 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php的4种常见运行方式
2015/03/20 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
PHP自定义函数获取汉字首字母的方法
2016/12/01 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
Thinkphp5框架实现获取数据库数据到视图的方法
2019/08/14 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
有关JavaScript的10个怪癖和秘密分享
2011/08/28 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
2015/09/14 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
2019/11/20 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
python实现自动清理文件夹旧文件
2021/05/10 Python
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
Mysql中mvcc各场景理解应用
2022/08/05 MySQL