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

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

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被调用时，它用任意方式写入了控制台，产生了以下结果：