游戏开发之旅-JavaScript函数详解

本节是第四讲的第十小节，上一节我们为大家介绍了循环语句，本节将为大家介绍JavaScript函数的基本概念。

函数（Funciton）

在JavaScript中另一个基本概念是函数, 它允许你在一个代码块中存储一段用于处理单任务的代码，然后在任何你需要的时候用一个简短的命令来调用，而不是把相同的代码写很多次。

浏览器内置函数

JavaScript有许多内置的函数，可以让您做很多有用的事情，而无需自己编写所有的代码。事实上, 许多你调用（运行或者执行的专业词语）浏览器内置函数时调用的代码并不是使用JavaScript来编写——大多数调用浏览器后台的函数的代码。

函数与方法

严格说来，内置浏览器函数并不是函数——它们是方法。这听起来有点可怕和令人困惑，但不要担心 ——函数和方法在很大程度上是可互换的，至少在我们的学习阶段是这样的。

二者区别在于方法是在对象内定义的函数。浏览器内置函数（方法）和变量（称为属性）存储在结构化对象内，以使代码更加高效，易于处理。

自定义函数

function  function-name([arguments]) {

// code to run

}

以上是函数体的结构，下面是一个简单的函数示例，

function  myFunction() {

alert('hello');

}

调用函数

通过将函数名包含在代码的某个地方，后跟圆括号来完成的。例如：

function myFunction() {

alert('hello');

}

myFunction();// calls the function once

匿名函数(Anonymous function)

也可以创建一个没有名称的函数,这个函数叫做匿名函数 — 它没有函数名! 它也不会自己做任何事情。你通常使用匿名函数以及事件处理程序。例如，如果单击相关按钮，以下操作将在函数内运行代码：

var myButton = document.querySelector('button');

myButton.onclick = function() {

alert('hello');

}

你还可以将匿名函数分配为变量的值，例如：var myGreeting = function() {  alert('hello');}。可以使用以下方式调用此函数：myGreeting();但这只会令人费解，所以不要这样做！创建方法时，最好坚持下列形式：function myGreeting()您将主要使用匿名函数来运行负载的代码以响应事件触发（如点击按钮） - 使用事件处理程序。注意：匿名函数也称为函数表达式。函数表达式与函数声明有一些区别。函数声明会进行声明提升（declaration hoisting），而函数表达式不会。这里的声明提升是指函数的声明可以放在代码中任何位置，实际调用函数的时候都会把函数声明放在代码最前面，这跟变量或表达式有明显区别，变量如果不事先声明的话，就会报undefined错误。

函数参数(Function parameters)

一些函数需要在调用它们时指定参数 ——这些参数值需要放在函数括号内，才能正确地完成其工作。

Note: 参数有时称为参数（arguments），属性（properties）或甚至属性（attributes）

Note:当您需要指定多个参数时，它们以逗号分隔。

Note:有时参数不是必须的 —— 您不必指定它们。如果没有，该功能一般会采用某种默认行为。例如：数组 join（）函数的参数是可选的

函数作用域(scope)和冲突

当你创建一个函数时，函数内定义的变量和其他东西都在它们自己的单独的范围内, 意味着它们被锁在自己独立的隔间中, 不能被函数外的代码访问。所有函数的最外层被称为全局作用域。在全局作用域内定义的值可以在任意地方访问。

JavaScript由于各种原因而建立，但主要是由于安全性和组织性。有时您不希望变量可以在代码中的任何地方访问 - 您从其他地方调用的外部脚本可能会开始搞乱您的代码并导致问题，因为它们恰好与代码的其他部分使用了相同的变量名称，造成冲突。

greeting();

// first.js

var name = 'Chris';

function greeting() {

alert('Hello ' + name + ': welcome to our company.');

}

// second.js

var name = 'Zaptec';

function greeting() {

alert('Our company is called ' + name + '.');

}

将代码锁定在函数中的部分避免了这样的问题，并被认为是最佳实践。

这有点像一个动物园。狮子，斑马，老虎和企鹅都保留在自己的园子中，只能拿到到它们园子中的东西 —— 与其函数作用域相同。如果他们能进入其他园子，就会出现问题。不同的动物会在不熟悉的栖息地内感到真的不舒服 - 一只狮子或老虎会在企鹅的水多的，冰冷的的领域中感到可怕。最糟糕的是，狮子和老虎可能会尝试吃企鹅！

动物园管理员就像全局作用域 - 他或她有钥匙访问每个园子，重新投喂食物，照顾生病的动物等。

函数内部的函数

请记住，您可以从任何地方调用函数，甚至可以在另一个函数中调用函数。

function myBigFunction() {

var myValue;

subFunction1();

subFunction2();

}

function subFunction1() {

console.log(myValue);

}

function subFunction2() {

console.log(myValue);

}

要确保函数调取的数值处在有效的作用域内。上面的例子中会产生一个错误提示，ReferenceError：myValue is not define，因为尽管myValue变量与函数调用指令处在同一个作用域中, 但它却没有在函数内被定义 —— 实际代码在调用函数时就开始运行了。以下是正确代码：

function myBigFunction() {

var myValue = 1;

subFunction1(myValue);

subFunction2(myValue);

}

function subFunction1(value) {

console.log(value);

}

function subFunction2(value) {

console.log(value);

}

函数返回值（return values）

返回值意如其名，是指函数执行完毕后返回的值。通常，返回值是用在函数在计算某种中间步骤。你想得到最终结果，其中包含一些值。那些值需要通过一个函数计算得到，然后返回结果可用于计算的下一个阶段。

一些函数没有返回值就像(返回值在这种情况下被列出为空值 void 或未定义值 undefined )。

要从自定义函数返回值，需要使用return 关键字。以下函数是产生一个0至当前数字之间的一个随机数：

function randomNumber(number) {

var result = Math.floor(Math.random()*number);

return result;

}

以上内容部分摘自视频课程04网页游戏编程JavaScript-10函数详解，更多示例请参见网站示例。跟着张员外讲编程，学习更轻松，不花钱还能学习真本领。