(三)

作者: xpwei | 来源:发表于2018-03-27 17:39 被阅读18次

    Function类型
    函数实际上是对象。每个函数都是Function类型的实例,而且都与其他引用类型一样具有属性和方法。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。
    函数通常是使用函数声明语法定义的:

    function sum (num1, num2) {
         return num1 + num2;
    }
    

    这与下面使用函数表达式定义函数的方式几乎相差无几:

    var sum = function(num1, num2){
        return num1 + num2;
    };
    

    最后一种定义函数的方式是使用Function构造函数。Function构造函数可以接收任意数量的参数,但最后一个参数始终都被看成是函数体,而前面的参数则枚举出了新函数的参数:

    var sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐
    

    从技术角度讲,这是一个函数表达式。但是,我们不推荐读者使用这种方法定义函数,因为这种语法会导致解析两次代码(第一次是解析常规ECMAScript代码,第二次是解析传入构造函数中的字符串),从而影响性能。

    没有重载

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

    显然,这个例子中声明了两个不同名函数,而结果则是后面的函数覆盖了前面的函数。以上代码实际上与下面的代码没有什么区别:

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

    函数声明与函数表达式
    解析器在向执行环境中加载数据时,对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行:

    alert(sum(10,10));
    function sum(num1, num2){
      return num1 + num2;
    }
    

    把上面的函数声明改为等价的函数表达式,就会在执行期间导致错误:

    alert(sum(10,10));
    var sum = function(num1, num2){
      return num1 + num2;
    };
    

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

    作为值的函数
    可以从一个函数中返回另一个函数,而且这也是极为有用的一种技术。例如,假设有一个对象数组,我们想要根据某个对象属性对数组进行排序。而传递给数组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;
            }
        };
    }
    

    这个函数定义看起来有点复杂,但实际上无非就是在一个函数中嵌套了另一个函数,而且内部函数前面加了一个return操作符。在内部函数接受到propertyName参数后,它会使用方括号表示法来取得给定属性的值。取得了想要的属性值之后,定义比较函数就非常简单了。上面这个函数可以像在下面例子中这样使用:

    var data = [{ name: "Zachary", age: 28 }, { name: "Nicholas", age: 29 },{ name: "Nicholas2", age: 24 }];
    data.sort(createComparisonFunction("name"));
    alert(data[0].name); //Nicholas
    data.sort(createComparisonFunction("age"));
    alert(data[0].name); //Zachary
    

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

    function factorial(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * factorial(num - 1)
        }
    }
    

    定义阶乘函数一般都要用到递归算法;如上面的代码所示,在函数有名字,而且名字以后也不会变的情况下,这样定义没有问题。但问题是这个函数的执行与函数名factorial紧紧耦合在了一起。为了消除这种紧密耦合的现象,可以像下面这样使用arguments.callee:

    function factorial(num) {
        if (num <= 1) {
            return 1;
        } else {
            return num * arguments.callee(num - 1)
        }
    }
    

    函数内部的另一个特殊对象是this,其行为与Java和C#中的this大致类似。换句话说,this引用的是函数据以执行的环境对象——或者也可以说是this值(当在网页的全局作用域中调用函数时,this对象引用的就是window):
    ECMAScript5也规范化了另一个函数对象的属性:caller。除了Opera的早期版本不支持,其他浏览器都支持这个ECMAScript3并没有定义的属性。这个属性中保存着调用当前函数的函数引用,如果是在全局作用域中调用当前函数,它的值为null:

    function outer() {
        inner();
    }
    function inner() {
        alert(inner.caller);
    }
    outer();
    

    以上代码会导致警告框中显示outer()函数的源代码。因为outer()调用了inner(),所以inner.caller就指向outer()。为了实现更松散的耦合,也可以通过arguments.callee.caller来访问相同的信息:

    function outer() {
        inner();
    }
    function inner() {
        alert(arguments.callee.caller);
    }
    outer();
    

    IE、Firefox、Chrome和Safari的所有版本以及Opera9.6都支持caller属性。
    当函数在严格模式下运行时,访问arguments.callee会导致错误。ECMAScript5还定义了arguments.caller属性,但在严格模式下访问它也会导致错误,而在非严格模式下这个属性始终是undefined。定义这个属性是为了分清arguments.caller和函数的caller属性。以上变化都是为了加强这门语言的安全性,这样第三方代码就不能在相同的环境里窥视其他代码了。
    严格模式还有一个限制:不能为函数的caller属性赋值,否则会导致错误。

    函数属性和方法
    前面曾经提到过,ECMAScript中的函数是对象,因此函数也有属性和方法。每个函数都包含两个属性:length和prototype。其中,length属性表示函数希望接收的命名参数的个数:

    function sayName(name) {
        alert(name);
    }
    function sum(num1, num2) {
        return num1 + num2;
    }
    function sayHi() {
        alert("hi");
    }
    alert(sayName.length); //1
    alert(sum.length); //2
    alert(sayHi.length); //0
    

    在ECMAScript核心所定义的全部属性中,最耐人寻味的就要数prototype属性了。对于ECMAScript中的引用类型而言,prototype是保存它们所有实例方法的真正所在。换句话说,诸如toSting()和valueOf等方法实际上都保存在prototype名下,只不过是通过各自对象的实例访问罢了。在创建自定义引用类型以及实现继承时,prototype属性的作用是极为重要的。在ECMAScript5中,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)); //20
    alert(callSum2(10, 10)); //20
    

    在上面这个例子中,callSum1()在执行sum()函数时传入了this作为this值(因为是在全局作用域中调用的,所以传入的就是window对象)和arguments对象。而callSum2同样也调用了sum()函数,但它传入的则是this和一个参数数组。这两个函数都会正常执行并返回正确的结果。

    在严格模式下,未指定环境对象而调用函数,则this值不会转型为window。除非明确把函数添加到某个对象或者调用apply()或call(),否则this值将是undefined。
    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
    

    事实上,传递参数并非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
    

    使用call()(或apply())来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系。在前面例子的第一个版本中,我们是先将sayColor()函数放到了对象o中,然后再通过o来调用它的;而在这里重写的例子中,就不需要先前那个多余的步骤了。
    ES5还定义了一个方法:bind()。这个方法会创建一个函数的实例,其this值会被绑定到传给bind()函数的值:

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

    基本包装类型
    为了便于操作基本类型值,ES还提供了3个特殊的引用类型:Boolean、Number和String。这些类型与本章介绍的其他引用类型相似,但同时也具有与各自的基本类型响应的特殊行为。实际上,每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象,从而让我们能够调用一些方法来操作这些数据:

    var s1 = "some text";
    var s2 = s1.substring(2);
    

    这个例子中的变量s1包含一个字符串,字符串当然是基本类型值。而下一行调用了s1的substring()方法,并将返回的结果保存在了s2中。我们知道,基本类型值不是对象,因而从逻辑上讲它们不应该有方法(尽管如我们所愿,它们确实有方法)。其实,为了我们实现这种直观的操作,后台已经自动完成了一系列的处理。但第二行代码访问s1时,访问过程处于一种读取模式,也就是要从内存中读取这个字符串的值。而在读取模式中访问字符串时,后台都会自动完成下列处理:
    (1)创建String类型的一个实例;
    (2)在实例上调用指定的方法;
    (3)销毁这个实例。
    可以将以上三个步骤想想成是执行了下列ES代码:

    var s1 = new String("some text");
    var s2 = s1.substring(2);
    s1 = null;
    

    引用类型与基本包装类型的主要区别就是对象的生存期。使用new操作符创建的引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法。
    对基本包装类型的实例调用typeof会返回“object”,而且所有基本包装类型的对象都会被转换为布尔值true。
    Object构造函数也会像工厂方法一样,根据传入值的类型返回响应基本包装类型的实例:

    var obj = new Object("some text");
    alert(obj instanceof String); //true
    

    Boolean类型
    Boolean类型的实例重写了valueOf()方法,返回基本类型值true或false;重写了toString()方法,返回字符串“true”或“false”。可是,Boolean对象在ES中的用处不大,因为它经常会造成人们的误解。其中最常见的问题就是在布尔表达式中使用Boolean对象:

    var falseObject = new Boolean(false);
    var result = falseObject && true;
    alert(result); //true
    var falseValue = false;
    result = falseValue && true;
    alert(result); //false
    

    布尔表达式中的所有对象都会被转换为true,因此falseObject对象在布尔表达式中代表的是true。
    基本类型与引用类型的布尔值还有两个区别。首先,typeof操作符对基本类型返回“boolean”,而对引用类型返回“object”。其次,由于Boolean对象是Boolean类型的实例,所以使用instanceof操作符测试Boolean对象会返回true,而测试基本类型的布尔值则返回false:

    alert(typeof falseObject); //object
    alert(typeof falseValue); //boolean
    alert(falseObject instanceof Boolean); //true
    alert(falseValue instanceof Boolean); //false
    

    相关文章

      网友评论

          本文标题:(三)

          本文链接:https://www.haomeiwen.com/subject/hmnaqftx.html