《JavaScript高级程序设计》读书笔记（五） - 引用类型之Function类型

引用类型之Function类型

Function类型

函数实际上是对象。每个函数都是Function类型的实例，而且与其他引用类型一样具有属性和方法。函数名实际上是一个指向函数对象的指针，不会与某个函数绑定。

函数通常使用函数声明语句定义：function funcName(value1, value2, ...){} ，也可以使用函数表达式定义函数： var funcName = function(value1, value2, ...){}; 。当然，定义函数可以使用 Funciton 构造函数。

上面说到，函数名仅仅是指向函数对象的指针，因此函数名与包含对象指针的其他变量并没有什么区别，即是函数可以拥有多个名字。

function sum(num1, num2){
    return num1+num2;
}
alert(sum(10, 20)); // 30
var anotherSum = sum;
alert(anotherSum(10, 20)); // 30
sum = null;
alert(anotherSum(10, 20)); // 30

也正是因为函数名仅仅是指针，所以JavaScript中函数没有重载：若两个函数同名，后面定义的函数会直接覆盖前面定义的函数，无法实现重载。

函数声明与函数表达式

实际上，解析器在向执行环境加载数据时，这两种函数定义方式并不相同：解析器会率先读取函数声明，并使其在任何代码之前可访问；而函数表达式则必须等到解析器执行到它所在的代码行，才会被解释执行。

// EX1
alert(sum(10, 20));  // 30
function sum(num1, num2){
    return num1+num2;
}
// EX2
alert(sum(10, 20));  // Error! Unexpected Identifier!
var sum = function (num1, num2){
    return num1+num2;
}

这样理解，解析器在代码真正执行之前会进行一次“预解析”，这个过程会把全局环境中所有使用 var 声明的变量和函数声明全局提前到全局顶部。

作为值的函数

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

function callSomeFunction(someFunction, someArgument){
    return someFunction(someArgument);
}

这个函数接收两个参数，第一个参数是一个函数，第二个参数是要传递给该函数的一个值；这个函数执行后将返回执行第一个参数后的结果。

函数作为另一个函数的结果被返回，这种场景涉及闭包(点击查看)，此处不再叙述。

函数内部属性

在函数内部，有两个特殊属性 arguments 和 this。

arguments 是一个类数组对象，包含着传入函数的参数，主要用途也是保存函数参数，这个对象拥有一个 callee 属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。详见递归（点击查看）。

this 引用的是函数执行的环境对象。详见作用域（点击查看）

另外，ES5中还规范了另一个函数对象属性：caller，这个属性中保存着调用当前函数的函数的引用，如果是在全局作用域中调用当前函数，它的值为 null。

function outer(){
    inner();
}
function inner(){
    alert(inner.caller); // function outer(){inner();}
    // 为了实现更松散的耦合: alert(arguments.callee.caller);
}
outer();

注意：当函数在严格模式下运行时，访问 arguments.callee 和 arguments.caller 会导致错误，在非严格模式下这个属性始终是 undefined。

函数属性和方法

每个函数都包含两个属性：length 和 prototype。

length 属性表示函数希望接收的命名参数的个数。

function sayName(name){
    alert(name);
}
alert(sayName.length); // 1

prototype 属性是保存引用类型的所有实例方法的真正所在。详见面向对象。

每个函数都包含两个非继承而来的方法：apply() 和 call()。
这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。

apply() 方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组（可以是Array实例，也可以是arguments对象）。

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

上面的 callSum1() 和 callSum2() 在执行 sum() 函数时传入 this 作为 this 的值（因为是在全局作用域中调用的，所以传入的就是 window 对象）。
注意：在严格模式下，未指定环境对象而调用函数，则 this 的值不会转型为 window 。除非明确把函数添加到某个对象或者调用 apply() 或 call() ，否则 this 的值将是 undefined。

call() 方法的主要区别是需要将传递给函数的参数逐个列举出来。

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

apply() 和 call() 方法真正强大的地方在于能够扩充函数赖以运行的作用域。

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

sayColor();  // "red"

sayColor.call(this);  // "red"
sayColor.call(window);  // "red"
sayColor.call(o);  // "blue"

使用 apply() 和 call() 扩充作用域的最大好处就是对象不需要与方法有任何耦合关系。

ES5还定义了一个 bind() 方法，这个方法会创建一个函数的实例，其 this 值会被绑定到传给 bind() 函数的值。

window.color = "red";
var o = {color: "blue"};

function sayColor(){
    alert(this.color);
}

var objectSayColor = sayColor.bind(o);
objectSayColoy(); // "blue"