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

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

本节书摘来自异步社区《AngularJS高级程序设计》一书中的第5章,第5.4节,作者:【美】Adam Freeman(弗里曼)著,更多章节内容可以访问云栖社区“异步社区”公众号查看

5.4 定义并使用函数

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

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

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

screenshot

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

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

screenshot

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

screenshot

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

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

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

screenshot

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

screenshot

其结果如下:

screenshot

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

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

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

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

screenshot

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

screenshot

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

screenshot

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

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

screenshot

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

screenshot

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

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

screenshot

相关文章
|
JavaScript 前端开发
AngularJs-变量
Angularjs-变量 名字 : Hello {{name}} ...
783 0
|
JavaScript 前端开发 索引
《AngularJS高级程序设计》——5.5 使用变量及类型
循环for...in是标准的JavaScript特性,为myData对象中的每个属性执行代码块中的语句。变量prop被赋值为每个迭代中所处理的属性名称。我使用数组索引风格从对象中取回属性的值。
1934 0
《AngularJS高级程序设计》——1.4 从哪里可以获得实例代码
本节书摘来自异步社区《AngularJS高级程序设计》一书中的第1章,第1.4节,作者:【美】Adam Freeman(弗里曼)著,更多章节内容可以访问云栖社区“异步社区”公众号查看
833 0
|
Web App开发 JavaScript 前端开发
《AngularJS高级程序设计》——5.7 使用数组
本例中有几点需要注意的地方。第一,我不需要在创建它时声明数组中成员的数量。JavaScript数组会调整其大小以放置任何数量的成员。第二点是我无需声明数组中将放入的数据类型。所有的JavaScript数组都可以放置任意混合的数据类型。在本例中,我为数组赋了三个值:数字、字符串和布尔值。
1409 0
|
JavaScript 前端开发
《AngularJS高级程序设计》——5.3 使用语句
基本JavaScript构建块是语句(statement)。每个语句代表一个命令,语句通常以分号(;)结尾。分号是可选的,但使用它们可以让你的代码易于阅读且使多个语句在一行内成为可能。清单5-3显示了使用script元素定义的脚本中的两条语句。
1478 0
|
JavaScript 前端开发 数据格式
《AngularJS高级程序设计》——第5章 JavaScript基础 5.1准备示例项目
在本章中,我提供了JavaScript语言最重要特性的快速指南,它们适用于本书。我没有余力完整地讲解JavaScript,但我会专注其本质,即你需要快速了解情况并随着本书的示例走。除了最重要的JavaScript语言核心特性外,我还会讲述AngularJS提供的工具方法集。
1502 0
《AngularJS高级程序设计》——1.6 小结
在本章中,我描述了本书内容和结构的大致轮廓,以及AngularJS Web开发所需要的软件。就像之前所说的,学习AngularJS开发最好的方式就是通过实例学习,所以在第2章中我将直接开始演示如何创建你的第一个AngularJS应用程序。
1514 0