JS声明式函数与赋值式函数实例分析

所属分类: 网络编程 / JavaScript 阅读数: 1875
收藏 0 赞 0 分享

本文实例讲述了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切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结

希望本文所述对大家JavaScript程序设计有所帮助。

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多