《JavaScript高级程序设计》读书笔记 ---函数

函数
函数对任何语言来说都是一个核心的概念。通过函数可以封装任意多条语句,而且可以在任何地方、任何时候调用执行。ECMAScript 中的函数使用function 关键字来声明,后跟一组参数以及函数体。
函数的基本语法如下所示:

function functionName(arg0, arg1,...,argN) {
  statements
}
以下是一个函数示例:
function sayHi(name, message) {
  alert("Hello " + name + "," + message);
}

这个函数可以通过其函数名来调用,后面还要加上一对圆括号和参数(圆括号中的参数如果有多个,可以用逗号隔开)。调用sayHi()函数的代码如下所示:
sayHi("Nicholas", "how are you today?");

这个函数的输出结果是"Hello Nicholas,how are you today?"。函数中定义中的命名参数name和message 被用作了字符串拼接的两个操作数,而结果最终通过警告框显示了出来。
ECMAScript 中的函数在定义时不必指定是否返回值。实际上,任何函数在任何时候都可以通过return 语句后跟要返回的值来实现返回值。请看下面的例子:
function sum(num1, num2) {
  return num1 + num2;
}

这个sum()函数的作用是把两个值加起来返回一个结果。我们注意到,除了return 语句之外,没有任何声明表示该函数会返回一个值。调用这个函数的示例代码如下:
var result = sum(5, 10);
这个函数会在执行完return 语句之后停止并立即退出。因此,位于return 语句之后的任何代码都永远不会执行。例如:
function sum(num1, num2) {
  return num1 + num2;
  alert("Hello world"); // 永远不会执行
}
在这个例子中,由于调用alert()函数的语句位于return 语句之后,因此永远不会显示警告框。
当然,一个函数中也可以包含多个return 语句,如下面这个例子中所示:
function diff(num1, num2) {
  if (num1 < num2) {
    return num2 - num1;
  } else {
    return num1 - num2;
  }
}

这个例子中定义的diff()函数用于计算两个数值的差。如果第一个数比第二个小,则用第二个数减第一个数;否则,用第一个数减第二个数。代码中的两个分支都具有自己的return 语句,分别用于执行正确的计算。
另外,return 语句也可以不带有任何返回值。在这种情况下,函数在停止执行后将返回undefined值。这种用法一般用在需要提前停止函数执行而又不需要返回值的情况下。比如在下面这个例子中,就不会显示警告框:
function sayHi(name, message) {
  return;
  alert("Hello " + name + "," + message); //永远不会调用
}

注:推荐的做法是要么让函数始终都返回一个值,要么永远都不要返回值。否则,如果函数有时候返回值,有时候有不返回值,会给调试代码带来不便。

严格模式对函数有一些限制:
? 不能把函数命名为eval 或arguments;
? 不能把参数命名为eval 或arguments;
? 不能出现两个命名参数同名的情况。
如果发生以上情况,就会导致语法错误,代码无法执行。

理解参数

arguments 对象只是与数组类似(它并不是Array 的实例),因为可以使用方括号语法访问它的每一个元素(即第一个元素是arguments[0],第二个元素是argumetns[1],以此类推),使用length 属性来确定传递进来多少个参数。在前面的例子中,sayHi()函数的第一个参数的名字叫name,而该参数的值也可以通过访问arguments[0]来获取。因此,那个函数也可以像下面这样重写,即不显式地使用命名参数:
function sayHi() {
  alert("Hello " + arguments[0] + "," + arguments[1]);
}

这个重写后的函数中不包含命名的参数。虽然没有使用name 和message 标识符,但函数的功能依旧。这个事实说明了ECMAScript 函数的一个重要特点:命名的参数只提供便利,但不是必需的。另外,在命名参数方面,其他语言可能需要事先创建一个函数签名,而将来的调用必须与该签名一致。但在ECMAScript 中,没有这些条条框框,解析器不会验证命名参数。
通过访问arguments 对象的length 属性可以获知有多少个参数传递给了函数。下面这个函数会在每次被调用时,输出传入其中的参数个数:
function howManyArgs() {
  alert(arguments.length);
}
howManyArgs("string", 45); //2
howManyArgs(); //0
howManyArgs(12); //1

执行以上代码会依次出现3 个警告框,分别显示2、0 和1。由此可见,开发人员可以利用这一点让函数能够接收任意个参数并分别实现适当的功能。请看下面的例子:
function doAdd() {
  if(arguments.length == 1) {
    alert(arguments[0] + 10);
  } else if (arguments.length == 2) {
    alert(arguments[0] + arguments[1]);
  }
}
doAdd(10); //20
doAdd(30, 20); //50

函数doAdd()会在只有一个参数的情况下给该参数加上10;如果是两个参数,则将那个参数简单相加并返回结果。因此,doAdd(10)会返回20,而doAdd(30,20)则返回50。虽然这个特性算不上完美的重载,但也足够弥补ECMAScript 的这一缺憾了。
另一个与参数相关的重要方面,就是arguments 对象可以与命名参数一起使用,如下面的例子所示:
function doAdd(num1, num2) {
  if(arguments.length == 1) {
    alert(num1 + 10);
  } else if (arguments.length == 2) {
    alert(arguments[0] + num2);
  }
}

在重写后的这个doAdd()函数中,两个命名参数都与arguments 对象一起使用。由于num1 的值与arguments[0]的值相同,因此它们可以互换使用(当然,num2 和arguments[1]也是如此)。
关于arguments 的行为,还有一点比较有意思。那就是它的值永远与对应命名参数的值保持同步。
例如:

function doAdd(num1, num2) {
  arguments[1] = 10;
  alert(arguments[0] + num2);
}

每次执行这个doAdd()函数都会重写第二个参数,将第二个参数的值修改为10。因为arguments对象中的值会自动反映到对应的命名参数,所以修改arguments[1],也就修改了num2,结果它们的值都会变成10。不过,这并不是说读取这两个值会访问相同的内存空间;它们的内存空间是独立的,但它们的值会同步。另外还要记住,如果只传入了一个参数,那么为arguments[1]设置的值不会反应到命名参数中。这是因为arguments 对象的长度是由传入的参数个数决定的,不是由定义函数时的命名参数的个数决定的。
关于参数还要记住最后一点:没有传递值的命名参数将自动被赋予undefined 值。这就跟定义了变量但又没有初始化一样。例如,如果只给doAdd()函数传递了一个参数,则num2 中就会保存undefined 值。
严格模式对如何使用arguments 对象做出了一些限制。首先,像前面例子中那样的赋值会变得无效。也就是说,即使把arguments[1]设置为10,num2 的值仍然还是undefined。其次,重写arguments 的值会导致语法错误(代码将不会执行)。

没有重载
ECMAScript 函数不能像传统意义上那样实现重载。而在其他语言(如Java)中,可以为一个函数编写两个定义,只要这两个定义的签名(接受的参数的类型和数量)不同即可。如前所述,ECMAScirpt函数没有签名,因为其参数是由包含零或多个值的数组来表示的。而没有函数签名,真正的重载是不可能做到的。
如果在ECMAScript 中定义了两个名字相同的函数,则该名字只属于后定义的函数。请看下面的例子:
function addSomeNumber(num){
  return num + 100;
}
function addSomeNumber(num) {
  return num + 200;
}
var result = addSomeNumber(100); //300

在此,函数addSomeNumber()被定义了两次。第一个版本给参数加100,而第二个版本给参数加200。由于后定义的函数覆盖了先定义的函数,因此当在最后一行代码中调用这个函数时,返回的结果就是300。

如前所述,通过检查传入函数中参数的类型和数量并作出不同的反应,可以模仿方法的重载。

时间: 2024-11-03 22:12:14

《JavaScript高级程序设计》读书笔记 ---函数的相关文章

Javascript高级程序设计读书笔记(第六章)

第6章  面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新对象. 构造函数的问题:每个方法都要在每个实例上重新创建一遍: 理解原型对象: 无论何时,只要创建了一个新函数,就会根据一组特定的规则为该函数创建一个prototype属性,这个属性指向函数的原型对象.默认情况下,所有原型对象都会自动获得一个constructor属性,这个属性包含一个指向proto

JavaScript高级程序设计-读书笔记(6)

第20章 JSON JSON是一个轻量级的数据格式,可以简化表示复杂数据结构的工作量 JSON的语法可以表示一下三种类型的值 l        简单值:使用与JavaScript相同的语法,可以在JSON中表示字符串.数值.布尔值和null.但JSON不支持JavaScript中的特殊数值undefined. “Hello world!” l        对象(属性的值可以是简单值,也可以是复杂类型值,如下这样在对象嵌入对象) { “name” : ”Nicholas”, “age” : 29

JavaScript高级程序设计-读书笔记(2)

第6章 面向对象的程序设计 创建对象 1.最简单方式创建Object的实例,如 var person = new Object(); person.name = “Greg”; person.age = 27; person.job = ”Doctor”; person.sayName = function() { alert(this.name); }; person. sayName(): 缺点:会产生大量重复代码 2.工厂模式:用函数来封装以特定接口创建对象的细节,如 function c

JavaScript高级程序设计读书笔记之OOP

关于JavaScript创建对象的方式: 1.工厂模式 1 function createPerson(name, age, job){ 2 var o = new Object(); 3 o.name = name; 4 o.age = age; 5 o.job = job; 6 o.sayName = function(){ 7 alert(this.name); 8 }; 9 return o; 10 } 11 var person1 = createPerson("Nicholas&qu

JavaScript高级程序设计-读书笔记(4)

第11章 DOM扩展 1.选择符API Selector API Level 1 的核心是两个方法:querySelector()和querySelectorAll().在兼容的浏览器中,可以通过Document及Element类型的实例调用它们.目前完全支持Selector API Level 1的浏览器有IE 8+. Firefox 3.5+. Safari 3.1+. Chrome和Opera 10+. querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,

JavaScript高级程序设计-读书笔记(3)

第8章 BOM 1.window对象 (1)全局作用域 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象. 所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法. (2)窗口关系及框架 如果界面中包含框架,这每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值的索引(从0开始,从左至右,从上到下)或者框架名称来访问相

javascript高级程序设计读书笔记2

<!DOCTYPE HTML>//这个网页的文档类型,这个是html5的写法Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 doctype.因此这一文档类型必须出现在项目的每个页面的开始部分 <html lang="en">//这里的lang="en"可以删除,如果不删除的,用谷歌之类打开,它会认为是英文的,会自动给翻译(如果设置了自动翻译的话) 有两个版本的 jQuery 可供下载:Production ver

javascript高级程序设计 读书笔记2

第五章 引用类型 对象是引用类型的实例,引用类型是一种数据结构,将数据和功能组织在一起.描述的是一类对象所具有的属性和方法.对象是某个特定引用类型的实例,新对象是使用new操作符后跟一个构造函数俩创建的,构造函数本身就是一个函数,只不过该函数试处于创建新对象的目的而定义的.  eg:    var person = new Object(); 1.创建Object实例的方式有两种   一:new+Object 二:对象字面量 var person = new Object(); var pers

JavaScript 高级程序设计读书笔记(1)

第6章 面向对象的程序设计 属性的类型 JS 中对象的属性有两种,数据属性和访问器属性(accessor property ),属性有其自身的特性(arrribute),可以理解为关于属性的属性. 数据属性包含4个特性,分别是[[Configurable]], [[Enumerable]], [[Writable]], [[Value]]. 使用 Object.defineProperty 修改属性描述符时,若该属性之前不存在,除了代码里指定的特性值,其他特性值默认将是 false, 举例如下:

javascript高级程序设计 读书笔记1

第二章  在HTML中使用JS 加载JS有三种:行内,head头部和外部链接JS   最好使用外部链接<script src="example.js" ></script>(推荐),在script标签中不需要放任何代码,放了也会被忽略.也可以使用<script src="example.js" /> 但是语法不符合HTML规范  所以不要这样写. 在传统做法中,script放在head中,但是会等到加载完JS再执行DOM,页面会延