《AngularJS高级程序设计》——5.4 定义并使用函数

5.4 定义并使用函数

当浏览器处理HTML文档时,它会一个挨一个地往下读。当其遇到script元素,就立刻按其定义顺序执行所包含的JavaScript语句。

这就是前面的例子中发生的,向控制台写了两条消息。你也可以将多条语句包成函数,在浏览器遇到调用该函数的语句前它不会执行,如清单5-4所示。

清单5-4 在文件jsdemo.html中定义JavaScript函数

定义函数很简单:使用function关键字,后面跟着你想的函数名,然后是一对括号(“(”和“)”)。把你想包含的语句用花括号括起来(“{”和“}”)。

在清单中我使用了名称myFunc,函数包含单个语句,向JavaScript控制台写入消息。函数中的语句不会执行,直到浏览器到达另一条调用myFunc函数的语句,像这样:

执行函数中的语句会产生以下输出:

除了演示函数如何定义,本例并没什么用,因为函数在其定义之后立即就被执行了。当函数为响应一些类型的改变或事件时被调用,它们才有用得多,比如用户界面(UI)。

5.4.1 定义带参函数
JavaScript让你可以定义函数的参数,如清单5-5所示。

清单5-5 在文件jsdemo.html中定义带参函数

我为函数myFunc添加了两个参数,叫name和weather。JavaScript是动态类型语言,这意味着你无需在定义函数时声明参数的数据类型。在本章后面讲到JavaScript变量时我会再谈动态类型。调用带参函数,在你调用函数时你得提供一个值作为参数:

其结果如下:

在你调用函数时所提供的参数的数量不一定要和函数的参数数量一致。如果调用函数时比它拥有的参数少些,那么任何你未提供的参数的值都是undefined,这是一个JavaScript的特殊值。如果你调用函数的参数比它有的多了,那么多出来的会被忽略。

所以结果就是你不能创建两个同名却不同参数的函数,然后又按照你在调用时提供的参数来执行不同的JavaScript。这叫多态(polymorphism),虽然它在一些语言中被支持,比如Java和C#,但它在JavaScript中不适用。反而,如果你定义两个同名函数,那第二个会取代第一个。

提示:
在JavaScript中你最能接近于多态的就是定义一个函数,根据参数的类型和数量来做不同的行为。这样做的时候需要仔细测试,会导致尴尬的API,一般最好避免这样。
5.4.2 定义返回结果的函数
使用return关键字你可以从函数中返回结果。清单5-6显示了返回结果的函数。

清单5-6 在文件jsdemo.html中从函数中返回结果

该函数定义一个参数,并使用其产生结果。我调用函数并传入作为参数的结果给console.log函数,像这样:

注意你无需声明函数会返回结果或者表明结果的数据类型。清单的结果如下:

5.4.3 检查函数
在JavaScript中可以传递对象,所以让你知道对象是否为函数十分有用。为此AngularJS提供了angular.isFunction方法,如清单5-7所演示的。

注意:
所有AngularJS工具方法都可以通过全局的angular对象访问,比如angular.isFunction,它是本例的主题。当你在HTML文件中使用script元素添加angular.js时angular对象就自动被创建了。
清单5-7 在文件jsdemo.html中检查函数

该示例更复杂一些,因为它没有实际项目的上下文。我定义了printMessage函数,它期望收到不同类型的参数。我使用angular.isFunction方法检查我处理的对象是否为函数,并且(若是)我就调用函数,像这样:

如果isFunction方法拿到对象作为参数,参数是函数就返回true,否则返回false。对于不是函数的对象,我将它传给console.log方法。

我创建了两个变量以演示printMessage函数:variable1是函数,而variable2是字符串。我分别传给printMessage函数,variable1被识别出是函数,被调用了,variable2则被写入控制台。当variable1被调用时,它用任意方式写入了控制台,产生了以下结果:

时间: 2024-11-02 21:59:54

《AngularJS高级程序设计》——5.4 定义并使用函数的相关文章

《AngularJS高级程序设计》——导读

前言 AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中,并且得到众多前端工程师的青睐. 本书是AngularJS程序设计的高级指南.全书共25章,分为3个部分,每部分覆盖一组相关话题.第1部分为第1章到第8章,包括AngularJS简介,以及HTML.CSS和JavaScript的基础知识.第2部分为第9章到第17章,引导读者熟悉AngularJS库的各种特性,从对一个AngularJS应用程序中各种不同组件的概览开始,依次深入介绍每种类型的组件.第3部分为第18

《AngularJS高级程序设计》——2.3 基本功能之外

2.3 基本功能之外 我定义了基本的MVC构件,这样,就创建了一个本章开始时的静态模拟程序的动态版本.现在我们已经有了一个较为坚固的基础了,就可以使用一些更高级的技术来增添功能并创建一个更为完整的应用.在下面各节中,我将对这个待办事项应用使用不同的AngularJS特性,并解释将在本书中的何处更详细地介绍这些特性. 2.3.1 使用双向模型绑定 在前一节中所使用的绑定被称为单向绑定,其值是从模型中取得的,并用于操作模板中的元素.在Web应用开发中这是相当标准的做法和广泛应用的技术.例如,在使用j

《AngularJS高级程序设计》——5.5 使用变量及类型

5.5 使用变量及类型 在前面的例子中你看到了如何定义变量:你用var关键字,然后可选地在语句中为变量赋值.在函数中定义的变量是本地变量,适合仅在函数内使用.直接定义在script元素中的变量是全局变量,可在任意位置访问,包括同一HTML文档中的其他脚本.清单5-8演示了本地和全局变量的使用. 清单5-8 在文件jsdemo.html中使用本地和全局变量 JavaScript是动态类型语言.这并不说明JavaScript没有类型.它只是说你并非一定要显式声明变量类型,你可以轻而易举地为同一变量赋

《AngularJS高级程序设计》——5.8 比较undefined和null值

5.8 比较undefined和null值 JavaScript定义了两个特别的值,当你比较它们时你得小心:undefined和null.当你读取没有赋值的变量或试图取不存在的对象属性时会返回undefined.清单5-38展示了JavaScript中undefined是如何使用的. 清单5-38 在文件jsdemo.html中的特殊值undefined 该清单输出如下: JavaScript还定义了另一个特殊值null,这很少见.Null值与undefined稍有不同.当值没有被定义时返回un

《AngularJS高级程序设计》——1.5 如何搭建你的开发环境

1.5 如何搭建你的开发环境 从一个浏览器.一个文本编辑器和一个Web服务器就可以开始你的AngularJS开发之旅.客户端Web应用开发的好处之一就是你可以挑选并组合一系列开发工具,以创建一个适合你工作风格和编程实践的环境.在下面的各节中,我将描述我所使用的环境,以便你可以在自己的工作站上重新创建它.1.5.1 选择Web浏览器 AngularJS在任何现代浏览器上都可以工作,你应该在你的用户有可能使用到的所有浏览器上测试你的应用.不管怎样,你需要一个为开发而用的浏览器,以便于搭建出开发环境,

《AngularJS高级程序设计》——5.9 使用承诺

5.9 使用承诺 承诺是一种表述方式,它表明某项工作会以异步方式执行并在未来某个点被完成.最常遇到的方式是产生Ajax请求,当请求被完成时,浏览器会暗地里发出HTTP请求通知你的应用程序.在清单5-42中,我创建了产生Ajax请求的袖珍AngularJS应用程序. 注意:该示例依赖于我在章节伊始创建的todo.json文件.清单5-42 在文件jsdemo.html中创建袖珍AngularJS应用程序 我在该清单中所使用的AngularJS特性是在第2章中所熟知的.我创建了AngularJS模块

《AngularJS高级程序设计》——5.10 使用JSON

5.10 使用JSON JavaScript对象符号(JSON)已经成了名副其实的Web应用数据格式.在JavaScript代码中使用JSON是简单且容易的,这就是为什么它已经变得如此流行.JSON支持一些基本的数据类型,与JavaScript巧妙地结合在了一起:Number.String.Boolean.Array.Object和特殊类型null. 在此提醒,这是todo.json文件的内容,它包括简单的JSON字符串: JSON数据看起来和JavaScript用来声明数组和对象的字面量类似.

《AngularJS高级程序设计》——5.6 使用JavaScript运算符

5.6 使用JavaScript运算符 JavaScript定义了大量标准的运算符集.我在表5-3中概括了最有用的. 表5-3 有用的JavaScript运算符5.6.1 使用条件语句许多JavaScript运算符是和条件语句一起使用的.在本书中,我倾向使用if/else和switch语句.清单5-24展示了两者的使用(如果你使用过几乎所有编程语言,那你会很熟悉). 清单5-24 在文件jsdemo.html中使用if/else和switch条件语句 清单结果如下: 5.6.2 对比等于运算符和

《AngularJS高级程序设计》——2.2 使用AngularJS

2.2 使用AngularJS 对于要创建的基本功能来说,todo.html文件中的静态HTML目前仅作为占位符使用.用户应该能看到待办事项的列表,勾选掉已完成的事项,并创建新事项.在下面各节中,我打算将AngularJS加进来,并应用一些基本特性来为我的待办事项应用赋予生命.简单起见,假定只有一个用户,并且不用考虑保留应用程序中的数据状态.2.2.1 将AngularJS应用到HTML文件将AngularJS加入到HTML文件中是挺简单的,只需简单增加一个script元素来引入angular.