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版网站风格切换实例代码
Oct 06 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
javascript实现小型区块链功能
Apr 03 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
详解Node.JS模块 process
Aug 31 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 SPL使用方法和他的威力
2013/11/12 PHP
PHP两种快速排序算法实例
2015/02/15 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
利用Fix Rss Feeds插件修复WordPress的Feed显示错误
2015/12/19 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
2014/04/06 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
2019/10/25 Javascript
vue设置全局访问接口API地址操作
2020/08/14 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
简单了解django索引的相关知识
2019/07/17 Python
浅谈python3中input输入的使用
2019/08/02 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
html5用video标签流式加载的实现
2020/05/20 HTML / CSS
茶叶生产计划书
2014/01/10 职场文书
市优秀教师事迹材料
2014/02/05 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
计生个人工作总结
2015/02/28 职场文书
销售口号霸气押韵
2015/12/24 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript