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调试(不下载任何工具)
Apr 14 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
Oct 15 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
VUE实现日历组件功能
Mar 13 Javascript
详解js跨域请求的两种方式,支持post请求
May 05 Javascript
js正则表达式简单校验方法
Jan 03 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 Coding Tips(php小技巧)[2011/04/02最后更新]
2011/05/02 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
PHP反射机制用法实例
2014/08/28 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JavaScript对象链式操作代码(jquery)
2010/07/04 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
[02:40]2014DOTA2 国际邀请赛中国区预选赛 四大豪门抵达华西村
2014/05/23 DOTA
django 中QuerySet特性功能详解
2019/07/25 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
大学生标准推荐信范文
2013/11/25 职场文书
医院总经理岗位职责
2014/02/04 职场文书
旅游项目合作意向书
2015/05/08 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
培训简讯范文
2015/07/20 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang