何米酥`s Blog

js高程读书笔记 第七章 函数表达式

August 08, 2017

本章内容

  • 函数表达式的特征
  • 使用函数实现递归
  • 使用闭包定义私有变量

函数表达式是JavaScript种一个强大又令人困惑的特性。 定义函数的方式有两种:函数声明和函数表达式

function functionName(arg0, arg1, arg2){
    //函数体
}
//只在Firefox、safari、chrome和opera中有效
console.log(functionNmae.name);//"functionNmae"

函数声明:重要特性——函数声明提升,在执行代码之前会先读取函数声明。

sayHi();
function sayHi(){
    console.log("Hi!");
}

第二种创建函数的方式是使用函数表达式。

var functionName = function(arg0, arg1, arg2){
    //函数体
};//这里有分号

这种情况下创建的函数叫做匿名函数(anonymous function),因为function关键字后面没有标识符(又可以叫lambda函数),所以匿名函数的name属性是空字符串。 函数表达式在使用前必须先赋值。

sayHi();
var sayHi = function(){
    console.log("Hi!");
}

由于存在函数提升,所以不能在if……else语句中使用函数声明,但是可以使用函数表达式。

在把函数当成值来使用的情况下,都可以使用匿名函数。

递归

递归函数是一个函数通过名字调用自身的情况下构成的。

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

但是在下面这段代码后上面这个函数可能就会出错

var anotherFactorial = factorial;
factorial = null;
console.log(anotherFactorial(4));//error

原因是factorial变量已经设置为null,不再指向原始函数的引用。这时候,使用arguments.callee可以解决这个问题

arguments.callee是一个指向正在执行的函数的指针,因此可以用它来实现对函数的递归调用,例如:

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

但在严格模式下,不能通过脚本访问arguments.callee,访问这个属性会导致错误。不过,可以使用命名函数来达成相同的结果。

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

闭包

匿名函数与闭包不是相同的概念。闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另一个函数。

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;
        }
    };
}

在两行value1,value2访问了外部函数中的变量propertyName,之所以能够访问这个变量,是因为内部函数的作用域链中包含createComaprisonFunction()的作用域。

当某个函数被调用时,会创建一个执行环境(excution context)及相应的作用域链。然后,使用arguments和其他命名参数的值来初始化函数的活动对象(activation object)。但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象处于第三位,……直到作为作用域链终点的全局执行环境。

function compare(value1, value2){
    if(value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
}

先定义了compare()函数,然后又在全局作用域中调用了它。当第一次调用compare()时,会创建一个包含this、arguments、value1和value2的活动对象。全局执行环境的变量对象(包含this、result和compare)在compare()执行环境的作用域链接中则处于第二位。

后台的每个执行环境都有一个表示变量的对象——变量对象。全局环境的变量对象始终存在,而像compare()函数这样的局部环境的变量对象,则只在函数执行的过程中存在。在创建compare()函数时,会创建一个预先包含全局变量对象的作用域链,这个作用域链被保存在内部的[[scope]]属性中。当调用compare()函数时,会为函数创建一个执行环境,然后通过复制函数的[[scope]]属性中的对象构建起执行环境的作用域链。

作用域链本质上是一个指向环境变量对象的指针列表,它只引用但不实际包含变量对象。

var compare = createComparisonFunction("name");
var result = compare({name: "Nicholas"}, {name: "Greg"});

在匿名函数createComparisonFunction()中被返回后,它的作用域链被初始化为包含createComparisonFunction()函数的活动对象和全局变量。这样,匿名函数就可以访问在createComparisonFunction()中定义的所有变量。当createComparisonFunction()函数返回后,其执行环境的作用域链会被销毁,但它的活动对象仍会留在内存中;直到匿名函数被销毁后,createComparisonFunction()的活动对象才会被销毁。 例如:

//创建函数
var compareNames = createComparisonFunction("name");

//调用函数
var result = compareNames({ name: "Nicholas"}, {name: "Greg"});

//解除对匿名函数的引用
compareNames = null;

闭包与变量

闭包只能取得包含函数中任何变量的最后一个值,因为闭包所保存的是整个变量对象,而不是某个特殊的变量。

function createFunctions(){
    var result = new Array();
    
    for(var i = 0; i < 10 ; i++){
        result[i] = function(){
            return i;
        };
    }
    return result;
}

实际上,每个函数都返回10。因为每个函数的作用域链中都保存着createFunctions()函数的活动对象,所以它们引用的都是同一个变量i。当createFunctions()函数返回后,变量i的值是10,此时每个函数都引用着保持变量i的同一个变量对象,所以在每个函数内部i的值都是10.

function createFunctions(){
    var result = new Array();
    
    for(var i = 0; i < 10 ; i++){
        result[i] = function (num){
            return function(){
                return num;
            }
        }(i);
    }
    return result;
}

这里通过创建另一个匿名函数强制让闭包的行为符合预期。

在这个版本中,并没有直接把闭包赋值给数组,而是定义了一个匿名函数,并立即执行该匿名函数的结果赋值给数组。这里的匿名函数有一个参数num,也就是最终的函数要返回的值。调用每个匿名函数时,我们都传入了变量i。由于函数参数是按值传递的,所以就会将变量i的当前值复制给参数num。而在匿名函数内部,又创建并返回了一个访问num的闭包,这样一来,result数组中的每个函数都有自己num变量的一个副本,就可以返回各自不同的数值了。

关于this对象

在闭包种使用this对象会导致一些问题,this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象。匿名函数的执行环境具有全局性,因此其this对象通常指向window。

var name = "The Window";

var object = {
    name : "My Object",
    
    getNameFunc : function() {
        return function(){
            return this.name;
        };
    }
}

alert(object.getNameFunc()());//The Window

以上代码先创建了一个全局变量name,又创建了一个包含name属性的对象。这个对象还包含一个方法——getNameFunc(),它返回一个匿名函数,而匿名函数又返回this.name。这个例子中返回的字符串是”The Window”。

前面提到过,每个函数在被调用时都会自动取得两个特殊变量:this和arguments。内部函数在搜索这两个变量时,只会搜索到其活动对象为止,因此永远不可能直接访问外部函数中的这两个变量。

不过可以通过把外部作用域中的this对象保存在闭包能够访问到的变量里,就可以让闭包返回该对象了。

var name = "The Window";

var object = {
    name : "My Object",
    
    getNameFunc : function(){
        var that = this;
        return function(){
            return that.name;
        };
    }
}
alert(object.getNameFunc()());//The Window

在几中特殊情况下,this的值也可能会改变。

var name = "The Window";

var object = {
    name : "My Object",
    
    getName : function() {
        return this.name;
    }
}

console.log(object.getName());//My Object
console.log((object.getName)());//My Object
console.log((object.getName = object.getName)());//The Window

第三句等于是把getName里的属性由之前的匿名函数赋值成了this.name

内存泄露

IE9之前的版本对JScript对象和COM对象使用不同的垃圾收集例程。

function assignHandle(){
    var element = document.getElementById("someElement");
    element.onclick = function(){
        alert(element.id);
    };
}

以上创建了一个作为element元素事件处理程序的闭包,而这个闭包又创建了一个循环引用(onclick)。

匿名函数保存了一个对assignHandler()的活动对象的引用,因此就会导致无法减少element的引用数。

function assignHandle(){
    var element = document.getElementById("someElement");
    var id = element.id;
    element.onclick = function(){
        alert(id);
    };
    element = null;
}

即使闭包不引用element,包含函数的活动对象中也任然会保存一个引用。

模仿块级作用域

function outputNumbers(count){
    for(var i = 0; i < count ; i++){
        console.log(i);
    }
    console.log(i);
}
outputNumbers(2);//0,1,2

在JavaScript中,变量i是定义在outputNumbers()活动对象中的,因此与java、c++等语言中i只会在for循环的语句块中有定义不同。

匿名函数可以用来模仿块级作用域并避免这个问题。

(function(){
    //这里是块级作用域
})();

以上代码定义并立即调用了一个匿名函数。

然而下面的代码会出错

function(){
    //这里是块级作用域
}();//error

出错是因为JavaScript将function关键字当作一个函数声明的开始,而函数声明后面不能跟圆括号。然而函数表达式后面可以跟圆括号。要将函数声明转换为函数表达式,只要给它加上一对圆括号即可。

function outputNumbers(count){
    (function(){
        for(var i = 0; i < count ; i++){
            console.log(i);
        }
    })();
    console.log(i);//error
}
outputNumbers(2);//0,1,error

原理是,在匿名函数中定义的任何变量,都会在执行结束时被销毁。 而私有作用域中能够访问变量count,是因为这个匿名函数是一个闭包,它能够访问包含作用域中的所有变量。

这种技术经常在全局作用域中被用在函数外部,从而限制向全局作用域种添加过多的变量和函数。 例如在laravel-admin中标黄的这段github地址就使用了这一方法。

私有变量

严格来讲,javascript中没有私有成员的概念,所有对象属性都是公有的,不过有一个私有属性的概念。任何定义在函数中的变量,都可以认为是私有变量。不能在函数的外部访问这些变量包括函数的参数,局部变量和在函数内部定义的其他函数。

如果在函数内部创建一个闭包,那么闭包通过自己的作用域链可以访问这些变量。利用这一点,可以创建用于访问私有变量的公有方法。

我们把有权访问私有变量和私有函数的公有方法称为特权方法。个人觉得这有点像操作系统中的特权指令。

有两种在对象上创建特权方法的方式。

function MyObject(){
    //私有变量和私有函数
    var privateVariable = 10;
    
    function privateFunction(){
        return false;
    }
    
    //特权方法
    this.publicMethod = function(){
        privateVariable++;
        return privateFunction();
    };
}

对于这个例子而言,变量privateVariable和函数privateFunction()只能通过特权方法publicMethod()来访问。 利用私有和特权成员,可以隐藏那些不应该被直接修改的数据。

function Person(name){
    this.getName : function(){
        return name;
    };
    this.setName : function(){
        name = value;
    };
}

var person = new Person("Nicholas");
console.log(person.getName());//Nicholas
person.setName("Greg");
console.log(person.getName());//Greg

这两个方法getName()和setName()在构造函数中定义,有权访问私有变量name。

静态私有变量

(function(){
    //私有变量和私有函数
    var privateVariable = 10;
    
    function privateFunction(){
        return false;
    }
    
    //构造函数
    MyObject = function(){
        
    };
    //公有/特权方法
    MyObject.prototype.publicMethod = function(){
        privateVariable++;
        return privateFunction();
    };
})();

这里使用函数表达式,不会有函数声明提前。在声明MyObject方法时没有使用var关键字,创建了一个全局变量。

(function(){
    var name = "";
    
    Person = function(value){
        name = value;
    };
    
    Person.prototype.getName = function(){
        return name;
    };
    
    Person.prototype.setName = function(value){
        name = value;
    };
    
})();

var person1 = new Person("Nicholas");
console.log(person1.getName());//"Nicholas"
person1.setName("Greg");
console.log(person1.getName());//"Greg"

var person2 = new Person("Michael");
console.log(person1.getName());//"Michael"
console.log(person2.getName());//"Michael"

在这个例子中,Person的原型中设定了setName和getName两种方法,都有权访问私有变量name。变量name就变成了一个静态的、由所有实例共享的属性。

模块模式

模块模式是为单例创建私有变量和特权方法。

单例(singleton),指的就是只有一个实例的对象。 按照惯例,javascript是以对象字面量的方式来创建单例对象的。

var singleton = {
    name : value,
    method : function(){
        //这里是方法的代码
    }
};

模块模式通过为单例添加私有变量和特权方法增强单例。

var singleton = function(){
    //私有变量和私有函数
    var privateVariable = 10;
    
    function privateFunction(){
        return false;
    }
    //特权/公有方法和属性
    return {
        publicProperty : true,
        
        publicMethod : function(){
            privateVariable++;
            return privateFunction();
        }
    };
}();

这个模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部,首先定义了私有变量和函数。然后,将一个对象字面量作为函数的值返回。

增强的模块模式

在返回对象之前加入对其增强的代码。这种增强的模块模式适合那些单例必须是某种类型的实例,同时还必须添加某些属性和方法对其加以增强的情况。

var singleton = function(){
    //私有变量和私有函数
    var privateVariable = 10;
    
    function privateFunction(){
        return false;
    }
    
    //创建对象
    var object = new CustomType();
    //添加特权/公有属性和方法
    object.publicProperty = true;
    
    object.pulicMethod = function(){
        privateVariable++;
        return privateFunction();
    };
    
    //返回这个对象
    return object;
}();

如果前面演示模块模式的例子中的application对象必须是BaseComponent的实例。

var application = function(){
    //私有变量和函数
    var components = new Array();
    
    //初始化
    components.push(new BaseComponent());
    
    //创建application的一个局部副本
    var app = new BaseComponent();
    
    //公共接口
    app.getComponentCount = function(){
        retrun components.length;
    };
    
    app.rigisterComponent = function(component){
        if(typeof component == "object"){
            components.push(component);
        }
    };
    //返回这个副本
    return app;
}();

小结

函数表达式的特点

  • 函数表达式不同于函数声明。函数声明要求有名字,但函数表达式不需要。没有名字的函数表达式也叫做匿名函数。
  • 无法确定如何引用函数的情况下,递归函数就会变得比较复杂
  • 递归函数应该始终使用arguments.callee来递归地调用自身,不要使用函数名

当在函数内部定义了其他函数时,就创建了闭包。闭包有权访问包含函数内部的所有变量。

  • 后台执行环境中,闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域。
  • 通常,函数的作用域以及所有变量都会在函数执行结束后被销毁。
  • 但是,当函数返回了一个闭包时,这个函数的作用域将会一直在内存中保存到闭包不存在为止。

使用闭包可以模拟块级作用域。

  • 创建并立即调用一个函数
  • 以上的结果会因为函数被调用过后,内部的所有变量会被立即销毁——除非某些变量赋值给了包含作用域中的变量

闭包还可以作用在对象中创建私有变量。

  • 可以使用闭包来实现公有方法,而通过公有方法可以访问在包含作用域中定义的变量。
  • 有权访问私有变量的公有方法叫做特权方法
  • 可以使用构造函数模式、原型模式来实现自定义类型的特权方法,也可以使用模块模式、增强的模块模式来实现单例的特权方法。

Profile picture

Written by 何坤舆 EFE