JavaScript 函数

函数概述


什么是函数?

函数是一组可以随时随地运行的语句。

函数是 ECMAScript 的核心。

函数是由这样的方式进行声明的:关键字 function、函数名、一组参数,以及置于括号中的待执行代码。

语法:

function functionName(arg0, arg1, ... argN) {
  statements
}

例如:

function sayHi(sName, sMessage) {
  alert("Hello " + sName + sMessage);
}

注意:JavaScript对大小写敏感。关键字function必须是小写的,并且必须与函数名称相同的大小写来调用函数。

如何调用函数?

函数可以通过其名字加上括号中的参数进行调用,如果有多个参数。

例如:

sayHi("David", " Nice to meet you!");

注意:变量是两个或两个以上,要以逗号(,)分开,并且变量和参数必须以一致的顺序出现。

函数如何返回值?

函数 sayHi() 未返回值,不过不必专门声明它(像在 Java 中使用 void 那样)。
即使函数确实有值,也不必明确地声明它。该函数只需要使用 return 运算符后跟要返回的值即可。

例如:

function sum(iNum1, iNum2) {
  return iNum1 + iNum2;
}
var iResult = sum(1,1);
alert(iResult);                     //输出 "2"

值得注意的是:函数在执行过return语句后立即停止代码,return语句后的代码都不会被执行。
例如:

function sum(iNum1, iNum2) {
  return iNum1 + iNum2;
  alert(iNum1 + iNum2);             //该语句不会被执行
}

另外:如果函数无返回值,那么可以调用没有参数的 return 运算符,随时退出函数。

function sayHi(sMessage) {
  if (sMessage == "bye") {
    return;
  }
  alert(sMessage);
}

注意:如果函数无明确的返回值,或调用了没有参数的return语句,那么它真正返回的值是undefined。

arguments 对象


arguments 对象

在函数代码中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们。

例如:

function sayHi() {
  if (arguments[1] == "bye") {
    return;
  }

  alert(arguments[0] + arguments[1]);       //David Nice to meet you!
}

sayHi("David", " Nice to meet you!");       //调用函数

注意:arguments[0]表示第一个参数的值,即”David”。arguments[1]表示第二参数的值,即” Nice to meet you!”。

检测参数个数

可以用 arguments 对象检测函数的参数个数,引用属性 arguments.length 即可。

例如:

function howManyArgs() {
  alert(arguments.length);
}

howManyArgs("string", 45);          //2
howManyArgs();                      //0
howManyArgs(12);                    //1

注释:与其他程序设计语言不同,ECMAScript 不会验证传递给函数的参数个数是否等于函数定义的参数个数。开发者定义的函数都可以接受任意个数的参数(根据 Netscape 的文档,最多可接受 255 个),而不会引发任何错误。任何遗漏的参数都会以 undefined 传递给函数,多余的函数将忽略。

模拟函数重载

用 arguments 对象判断传递给函数的参数个数,即可模拟函数重载。

例如:

function doAdd() {
  if(arguments.length == 1) {
    alert(arguments[0] + 5);
  } else if(arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
  }
}

doAdd(10);                          //输出 "15"
doAdd(40, 20);                      //输出 "60"

Function 对象(类)



ECMAScript 的函数实际上是功能完整的对象。

Function 对象(类)

Function 类可以表示开发者定义的任何函数。

语法:

var function_name = new function(arg1, arg2, ..., argN, function_body)

例如:
可以使用function关键字定义函数:

function sayHi(sName, sMessage) {
  alert("Hello " + sName + sMessage);
}

也可以使用Function对象定义相同的函数:

var sayHi 
= 
new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");

从上面这个例子,可以帮助我们理解函数只不过是一种引用类型,它们的行为与用Function类明确创建的函数行为是相同的。

下面这个例子更清晰的为我们展现这一点:
用function关键字定义两个同名函数如下:

function doAdd(iNum) {
  alert(iNum + 20);
}

function doAdd(iNum) {
  alert(iNum + 10);
}

doAdd(10);                     //输出 "20"

由上,我们可以看到,第二个函数重载了第一个函数。

下面,我们用new Function的方式重写上一个代码:

var doAdd = new Function("iNum", "alert(iNum + 20)");
var doAdd = new Function("iNum", "alert(iNum + 10)");
doAdd(10);                       //输出 "20"

很显然,doAdd 的值被改成了指向不同对象的指针。函数名只是指向函数对象的引用值,行为就像其他对象一样。

我们还可以使用两个变量指向同一个函数:

var doAdd = new Function("iNum", "alert(iNum + 10)");
var alsodoAdd = doAdd;
doAdd(10);                        //输出 "20"
alsodoAdd(10);                    //输出 "20"

由上,可以得出函数名只是指向函数的变量,因此,我们可以把函数作为参数传递给另一个函数。
例如:

function callAnotherFunc(fnFunction, vArgument) {
  fnFunction(vArgument);
}

var doAdd = new Function("iNum", "alert(iNum + 10)");

callAnotherFunc(doAdd, 10);        //输出 "20"

注意:尽管可以使用 Function 构造函数创建函数,但最好不要使用它,因为用它定义函数比用传统方式要慢得多。不过,所有函数都应看作 Function 类的实例。

Function 对象的 length 属性

因为函数属于引用类型,所以它们也有属性和方法。
ECMAScript 定义的属性 length 声明了函数期望的参数个数。
例如:

function doAdd(iNum) {
  alert(iNum + 10);
}

function sayHi() {
  alert("Hi");
}

alert(doAdd.length);              //输出 "1"
alert(sayHi.length);              //输出 "0"

需要注意的是: 无论定义了几个参数,ECMAScript 可以接受任意多个参数(最多 255 个)。属性 length 只是为查看默认情况下预期的参数个数提供了一种简便方式。

Function 对象的方法

Function 对象也有与所有对象共享的 valueOf()方法和 toString() 方法。
这两个方法返回的都是函数的源代码,在调试时尤其有用。
例如:

function doAdd(iNum) {
  alert(iNum + 10);
}

document.write(doAdd.toString());

闭包(closure)

闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。


简单的闭包实例

在 ECMAScript 中使用全局变量是一个简单的闭包实例。

例如:

ar sMessage = "hello world";

function sayHelloWorld() {
  alert(sMessage);
}

sayHelloWorld();                    //输出"hello world"
复杂的闭包实例

在一个函数中定义另一个会使闭包变得更加复杂。

例如:

var iBaseNum = 10;

function addNum(iNum1, iNum2) {
  function doAdd() {
    return iNum1 + iNum2 + iBaseNum;
  }
  return doAdd();
}

这里,函数 addNum() 包括函数 doAdd() (闭包)。内部函数是一个闭包,因为它将获取外部函数的参数 iNum1 和 iNum2 以及全局变量 iBaseNum 的值。 addNum() 的最后一步调用了 doAdd(),把两个参数和全局变量相加,并返回它们的和。
这里要掌握的重要概念是,doAdd() 函数根本不接受参数,它使用的值是从执行环境中获取的。
可以看到,闭包是 ECMAScript 中非常强大多用的一部分,可用于执行复杂的计算。

本文章主要参考并总结W3School以及W3Cschool
W3School

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值