游戏开发之旅-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函数详解,更多示例请参见网站示例。跟着张员外讲编程,学习更轻松,不花钱还能学习真本领。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200716A0E07O00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券