JavaScript的代码中就只有function一种形式,function就是函数的类型。在其他的编程语言中可能还存在Procedure或者是method等代码概念,在JavaScript中只有function这一种形式。当我们写下一个函数的时候,只不过是建立了一个function类型的实体而已。

 <script type="text/javascript">
function myFunc(){
alert("hello");
} alert(typeof(myFunc)); //结果是输出function
</script>

这个代码运行之后可以看到typeof(myFunc)返回的是function。以上的函数写法我们称之为"定义式"的,将其改写成"变量式"的,就更容易理解了。

 <script type="text/javascript">
var myFunc = function(){
alert("hello");
} alert(typeof(myFunc)); //结果是输出function
</script>

这里就明确定义了一个变量myFunc,它的初始值被赋予了一个function的实体,因此,typeof(myFunc)返回的也是function。其实,这两种函数的写法是等价的,除了一点细微差别,其内部实现完全相同。也就是说,我们写的这些JavaScript函数只是一个命了名的变量而已,其变量类型就是function,变量的值是我们编写的函数体。

函数既然只是变量,那么变量可以被随意赋值并用到任意地方?

 <script type="text/javascript">
var myFunc = function(){
alert("hello");
} myFunc(); //输出hello myFunc = function(){
alert("yeah");
} myFunc(); //输出yeah
</script>

是的,没错。这段代码首先定义了一个变量myFunc,并赋值了一个函数给他。当第一次调用myFunc()函数的时候,输出了hello。然后myFunc变量又被赋值了一个新的函数,在第二次调用myFunc()函数的时候,函数的输出发生了变化,输出了yeah。

好了,我们再看一段代码

 <script type="text/javascript">
function myFunc(){
alert("hello");
} myFunc(); //输出yeah,这里居然输出的是yeah,而不是hello奇怪吗? function myFunc(){
alert("yeah");
} myFunc(); //当然是输出yeah
</script>

这里奇怪的事情发生了,为什么我们第一次调用myFunc的时候也是输出yeah,而不是输出hello呢?还有,按理说,两个签名相同的函数,在编程语言中应该是非法的,这里怎么可以这样?

在JavaScript中,这样的写法是没有错误的。不过,在程序运行的时候就出现了一个奇怪的现象,就是,在两次调用函数时输出的值都是一样的,显然是第一个函数没有起到任何的作用。

原来,JavaScript执行引擎并非是一行一行地分析和执行代码的,而是一段一段地分析执行的。而且,在同一个程序的分析执行中,定义式的函数语句会被提取出来优先执行。函数定义执行完之后,才会按顺序执行其他语句代码。也就是说第一次调用myFunc之前,第一个函数语句定义的代码逻辑,已经被第二个函数定义语句覆盖了。所以,两次调用的其实都是执行了最后一个函数逻辑了。

我们再看看下面的代码,把这个JavaScript代码分成两段,将他们用<script>标签各自包含起来。

 <script type="text/javascript">
function myFunc(){
alert("hello");
} myFunc(); //输出hello
</script>
<script type="text/javascript">
function myFunc(){
alert("yeah");
} myFunc(); //输出yeah
</script>

这时,才是各自按顺序输出的,也证明了JavaScript的确是一段段地执行代码的。

一段代码中的定义式函数语句会优先执行,似乎有点像静态语言的编译概念。所以,这一特征也被有些人称为JavaScript的预编译。事实上JavaScript执行引擎的预编译还包括对所有var变量的创建(初始值为undefined),以提高代码的执行效率。

JavaScript函数的魔力就在于可以动态改变函数的逻辑,其灵活性远比静态语言的函数指针和虚函数来强大的多。灵活施展JavaScript函数的魔力,可以编写出强大而简洁的代码。

文章声明:本文部分内容参考自《悟透JavaScript》,这是一本学习JavaScript非常好的书。

研磨JavaScript系列(三):函数的魔力的更多相关文章

  1. 研磨JavaScript系列

    JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.同时也是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作.它最初由网景公司 ...

  2. 研磨JavaScript系列(一):回归简单

    想要理解JavaScript,你得首先放下对象和类的概念,回到数据和代码的本原.编程世界只有数据和代码两种基本元素,而这两种元素又有着纠缠不清的关系.JavaScript就是把数据和代码都简化到最原始 ...

  3. Javascript入门(三)函数

    Javascript函数 一.函数定义与执行 <script type="text/javascript"> //define function fun1(){ ale ...

  4. javascript系列-class4.函数

    欢迎加入前端交流群来py: 转载请标明出处!                   在火影的世界中存在忍术,忍术是把强大的能量集中在一起以各种各样不同的形式发射出来.怎样使用各种各样的忍术那?通过结印. ...

  5. Swift系列三 - 函数

    函数在任何语言中都是存在的,Swift中函数更加灵活. 一.函数的定义 1.1. 有返回值(形参默认是let,也只能是let) func pi() -> Double { return 3.14 ...

  6. 研磨JavaScript系列(五):奇妙的对象

    在JavaScript中,只有object和function两种东西有对象化的能力.我们先来说说函数的对象化能力. 任何一个函数都可以为其动态地添加或去除属性,这些属性可以是简单类型,可以是对象,也可 ...

  7. 研磨JavaScript系列(四):代码的时空

    对于过程式编程来说,代码执行的时间与数据标识的空间是密不可分的.我们只有把指令执行的具体时刻与标识映射的具体地址结合起来,才能确定程序在执行瞬间的上下文状态.于是,代码时刻与数据标识的结构,就形成了作 ...

  8. 研磨JavaScript系列(二):没有类

    object就是对象的类型.在JavaScript中不管多么复杂的数据和代码.都可以组织成object形式的对象. 但JavaScript没有"类"概念. 看下面这段JavaScr ...

  9. JavaScript系列:函数 自执行 表达式 声明 定义

    可用方式 (function($) {})(jQuery); !function( $ ){}(jQuery); +function( $ ){}(jQuery); -function( $ ){}( ...

随机推荐

  1. 数据库——mysql如何获取当前时间---https://www.cnblogs.com/Chenshuai7/p/5136469.html

    数据库——mysql如何获取当前时间 1.1 获得当前日期+时间(date + time)函数:now() -------https://www.cnblogs.com/Chenshuai7/p/51 ...

  2. poj 2404 中国邮递员问题 欧拉回路判定+状压dp

    /* 状压dp 邮递员问题:求经过任意点出发经过每一条边一次并回到原点. 解法:1.如果是欧拉回路那么就是所有的边的总和. 2.一般的解法,找出所有的奇度顶点,任意两个顶点匹配,即最小完美匹配,可用状 ...

  3. 理解 LARGE_INTEGER的定义

    http://bbs.csdn.net/topics/310239341 #if defined(MIDL_PASS) typedef struct _LARGE_INTEGER { #else // ...

  4. sharepoint 2013安装--没安装成功--机器配置太低了

    油管上的sharepoint2013安装教程 https://www.youtube.com/watch?v=3lQVMGWJQho 下载脚本的网址 http://gallery.technet.mi ...

  5. vue2源码浏览分析01

    1.构造函数  Vue$3 function Vue$3 (options) { if ("development" !== 'production' && !(t ...

  6. 从打击App刷榜看苹果的底线

    这两天苹果打击App刷榜者的消息刷屏了,从腾讯科技.appying多个媒体渠道看到,<安居客>.<友秘>.<微在>.<秦时明月2>.<悟空与貂蝉& ...

  7. jQuery的立即调用表达式

    立即调用表达式 任何库与框架设计的第一要要点就是解决命名空间与变量污染的问题.jquery就是用javascript函数作用域的特性,采用立即调用表达式包裹了自身的方法来解决这个问题的. jQuery ...

  8. 使用 Pascal 脚本编写网页, PWP 项目

    下载后得到 pwp.rar 文件. 解压到一个文件夹里面, 比方  e:\my_sys 文件夹下. 设计一下的脚本. 測试能否够执行. <%  uses sysutils; begin      ...

  9. MyBatis 中#{}与${}绑定参数的区别

    MyBatis 中#{}与${}绑定参数的区别: #{}将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #{id},如果传入的值是111,那么解析成sql时的值为o ...

  10. Vue相关开源项目库汇总 http://www.opendigg.com/tags/front-vue

    awesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合.我们会定期同步OpenDigg上的项目到这里,也欢迎各位提交项目给我们. 如果收录的项目有错误,可以通过 ...