《JavaScript高级程序设计》读书笔记(五)

来源:互联网 发布:怎么看懂行情数据图 编辑:程序博客网 时间:2024/06/05 23:46

引用类型之Function类型

  • 引用类型之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)); // 30var anotherSum = sum;alert(anotherSum(10, 20)); // 30sum = null;alert(anotherSum(10, 20)); // 30

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

函数声明与函数表达式

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

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

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

作为值的函数

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

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

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

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

函数内部属性

在函数内部,有两个特殊属性 argumentsthis

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

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

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

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

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

函数属性和方法

每个函数都包含两个属性:lengthprototype

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)); // 20alert(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"
阅读全文
0 0