JavaScript高级程序设计（二）

引用类型

在ECMAScript中，引用类型是一种数据结构，用于将数据和功能组织在一起。它也常被称为类，但这种称呼并不妥当。尽管 ECMAScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构。引用类型有时候也被称为对象定义，因为它们描述的是一类对象所具有的属性和方法。
虽然引用类型与类看起来相似，但它们并不是相同的概念。为避免混淆，本书将不使用类这个概念。

ECMAScript 5 新增了Array.isArray()方法。这个方法的目的是最终确定某
个值到底是不是数组，而不管它是在哪个全局执行环境中创建的。

Function类型

说起来 ECMAScript 中什么最有意思，我想那莫过于函数了——而有意思的根源，则在于函数实际
上是对象。每个函数都是 Function 类型的实例，而且都与其他引用类型一样具有属性和方法。由于函
数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。函数通常是使用函数声明语法定义的。

function sum(num1, num2) {    return num1 + num2;}var sum = function (num1, num2) {    return num1 + num2;}var sum = new Function("num1", "num2", "return num1+num2");//不推荐function sum(num1, num2) {    return num1 + num2;}console.log(sum(10, 10));//20var anotherSum = sum;console.log(anotherSum(10, 10));//20sum = null;console.log(anotherSum(10, 10));//20// console.log(sum(10, 10));//报错

没有重载

function addSomeNumber(num) {    return num + 100;}function addSomeNumber(num) {    return num + 200;}var result = addSomeNumber(100);console.log(result);//300

在创建第二个函数时，实际上覆盖了引用第一个函数的变量 addSomeNumber 。

//以上代码和下面代码没有什么区别var addSomeNumber = function(num){    return num + 100;};var addSomeNumber = function(num){    return num + 100;}console.log(result);//300

函数声明与函数表达式

console.log(sum(10, 10));//可以运行function sum(num1, num2) {    return num1 + num2;}

以上代码完全可以正常运行。因为在代码开始执行之前，解析器就已经通过一个名为函数声明提升
（function declaration hoisting）的过程，读取并将函数声明添加到执行环境中。对代码求值时，JavaScript引擎在第一遍会声明函数并将它们放到源代码树的顶部。所以，即使声明函数的代码在调用它的代码后面，JavaScript 引擎也能把函数声明提升到顶部。

console.log(sum1(10,10));//不可以运行var sum1=function(num1,num2){    return num1+num2;};

把上面的函数声明改为等价的函数表达式，就会在执行期间导致错误。
以上代码之所以会在运行期间产生错误，原因在于函数位于一个初始化语句中，而不是一个函数声
明。换句话说，在执行到函数所在的语句之前，变量 sum 中不会保存有对函数的引用；而且，由于第一行代码就会导致“unexpected identifier”（意外标识符）错误，实际上也不会执行到下一行。
除了什么时候可以通过变量访问函数这一点区别之外，函数声明与函数表达式的语法其实是等价的。

函数名本身就是变量，函数也可以作为值来使用。不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回

function callSomeFunction(someFunction, someArgument) {    return someFunction(someArgument);}function add10(num) {    return num + 10;}var result1 = callSomeFunction(add10, 10);console.log(result1);function getGreeting(name) {    return "Hello, " + name;}var result = callSomeFunction(getGreeting,"Nicholas");console.log(result);

可以从一个函数中返回另一个函数。

某个对象属性对数组进行排序。而传递给数组 sort() 方法的比较函数要接收两个参数，即要比较的值。可是，我们需要一种方式来指明按照哪个属性来排序。要解决这个问题，可以定义一个函数，它接收一个属性名，然后根据这个属性名来创建一个比较函数，

function createComparisonFunction(propertyName){    return function(object1,object2){        var value1 = object1[propertyName];        var value2 = object2[propertyName];        if(value1 < value2){            return -1;        }else if(value1 > value2){            return 1;        }else{            return 0;        }    };}var data = [{name:"Zachanry",age:20},{name:"NIcholas",age:29}];for (var idx in data) {    console.log(data[idx]);}data.sort(createComparisonFunction("name"));for (var idx in data) {    console.log(data[idx]);}// result:// { name: 'Zachanry', age: 20 }// { name: 'NIcholas', age: 29 }// { name: 'NIcholas', age: 29 }// { name: 'Zachanry', age: 20 }

函数内部属性

在函数内部，有两个特殊的对象： arguments 和 this 。其中， arguments 是一个类数组对象，包含着传入函数中的所有参数。arguments 的主要用途是保存函数参数，同时这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。

function factorinal(num) {    if (num <= 1) {        return 1;    } else {        return num * factorinal(num - 1);    }}var trueFactorinal = factorinal;factorinal = function(){    return 0;};console.log(trueFactorinal(5));//0console.log(factorinal(5)); //0

定义阶乘函数一般都要用到递归算法；如上面的代码所示，在函数有名字，而且名字以后也不会变
的情况下，这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为
了消除这种紧密耦合的现象，可以像下面这样使用 arguments.callee 。在这个重写后的 factorial() 函数的函数体内，没有再引用函数名 factorial 。这样，无论引用函数时使用的是什么名字，都可以保证正常完成递归调用。

function factorinal(num) {    if (num <= 1) {        return 1;    } else {        return num * arguments.callee(num - 1);    }}var trueFactorinal = factorinal;factorinal = function () {    return 0;};console.log(trueFactorinal(5));//120console.log(factorinal(5)); //0

函数内部的另一个特殊对象是 this ，this引用的是函数据以执行的环境对象——或者也可以说是 this 值（当在网页的全局作用域中调用函数时，this 对象引用的就是 window ）。

window.color = "red";var o = { color: "blue" };function sayColor(){alert(this.color);}sayColor(); //"red"o.sayColor = sayColor;o.sayColor(); //"blue"

函数的名字仅仅是一个包含指针的变量而已。因此，即使是在不同的环境中执行，全局的 sayColor() 函数与 o.sayColor() 指向的仍然是同一个函数。

函数属性和方法

因为ECMAScript 中的函数是对象，因此函数也有属性和方法。每个函数都包含两个属性： length 和 prototype 。其中， length 属性表示函数希望接收的命名参数的个数。在 ECMAScript 核心所定义的全部属性中，最耐人寻味的就要数 prototype 属性了。对于ECMAScript 中的引用类型而言， prototype 是保存它们所有实例方法的真正所在。换句话说，诸如toString() 和 valueOf() 等方法实际上都保存在 prototype 名下，只不过是通过各自对象的实例访问罢了。在创建自定义引用类型以及实现继承时， prototype 属性的作用是极为重要的（第 6 章将详细介绍）。在 ECMAScript 5 中， prototype 属性是不可枚举的，因此使用 for-in 无法发现。每个函数都包含两个非继承而来的方法： apply() 和 call() 。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。首先， apply() 方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是 Array 的实例，也可以是arguments 对象。例如：

function sum(num1, num2){return num1 + num2;}function callSum1(num1, num2){return sum.apply(this, arguments); // 传入 arguments 对象}function callSum2(num1, num2){return sum.apply(this, [num1, num2]); // 传入数组}alert(callSum1(10,10)); //20alert(callSum2(10,10)); //20

在上面这个例子中， callSum1() 在执行 sum() 函数时传入了 this 作为 this 值（因为是在全局作用域中调用的，所以传入的就是 window 对象）和 arguments 对象。而 callSum2 同样也调用了sum() 函数，但它传入的则是 this 和一个参数数组。这两个函数都会正常执行并返回正确的结果。call() 方法与 apply() 方法的作用相同，它们的区别仅在于接收参数的方式不同。对于 call()方法而言，第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用call() 方法时，传递给函数的参数必须逐个列举出来

function sum(num1, num2){return num1 + num2;}function callSum(num1, num2){return sum.call(this, num1, num2);}alert(callSum(10,10)); //20

在使用 call() 方法的情况下， callSum() 必须明确地传入每一个参数。结果与使用 apply() 没有什么不同。至于是使用 apply() 还是 call() ，完全取决于你采取哪种给函数传递参数的方式最方便。如果你打算直接传入 arguments 对象，或者包含函数中先接收到的也是一个数组，那么使用 apply()肯定更方便；否则，选择 call() 可能更合适。（在不给函数传递参数的情况下，使用哪个方法都无所
谓。）
事实上，传递参数并非 apply() 和 call() 真正的用武之地；它们真正强大的地方是能够扩充函数
赖以运行的作用域。

window.color = "red";var o = { color: "blue" };function sayColor(){alert(this.color);}sayColor(); //redsayColor.call(this); //redsayColor.call(window); //redsayColor.call(o); //blue

这个例子是在前面说明 this 对象的示例基础上修改而成的。这一次， sayColor() 也是作为全局函数定义的，而且当在全局作用域中调用它时，它确实会显示 “red” ——因为对 this.color 的求值会转换成对 window.color 的求值。而 sayColor.call(this) 和 sayColor.call(window) ，则是两种显式地在全局作用域中调用函数的方式，结果当然都会显示 “red” 。但是，当运行 sayColor.call(o)时，函数的执行环境就不一样了，因为此时函数体内的 this 对象指向了 o ，于是结果显示的是 “blue” 。使用 call() （或 apply() ）来扩充作用域的最大好处，就是对象不需要与方法有任何耦合关系。
在前面例子的第一个版本中，我们是先将 sayColor() 函数放到了对象 o 中，然后再通过 o 来调用它的；而在这里重写的例子中，就不需要先前那个多余的步骤了。ECMAScript 5 还定义了一个方法： bind() 。这个方法会创建一个函数的实例，其 this 值会被绑定到传给 bind() 函数的值。例如：

window.color = "red";var o = { color: "blue" };function sayColor(){alert(this.color);}var objectSayColor = sayColor.bind(o);objectSayColor(); //blue

在这里， sayColor() 调用 bind() 并传入对象 o ，创建了 o bjectSayColor() 函数。 object-sayColor() 函数的 this 值等于 o ，因此即使是在全局作用域中调用这个函数，也会看到 “blue” 。支持 bind() 方法的浏览器有 IE9+、Firefox 4+、Safari 5.1+、Opera 12+和 Chrome。每个函数继承的 toLocaleString() 和 toString() 方法始终都返回函数的代码。返回代码的格式则因浏览器而异——有的返回的代码与源代码中的函数代码一样，而有的则返回函数代码的内部表示，即由解析器删除了注释并对某些代码作了改动后的代码。由于存在这些差异，我们无法根据这两个方法返回的结果来实现任何重要功能；不过，这些信息在调试代码时倒是很有用。另外一个继承的valueOf() 方法同样也只返回函数代码。