js之函数表达式
函数表达式的特征
函数表达式是js中一种既强大又容易令人困惑的特性。定义函数的方式有两种:一种是函数声明,另一种是函数表达式.
function functionName(arg0,arg1,arg2){ // 函数体 } console.log(functionName.name); // functionName // Firefox,Safari,Chrome和Opera都给函数定义了一个非标准的name属性,通过这个属性可以访问到给函数指定的名字。 // 这个属性的值永远都等于跟在function关键词后面的标识符 关于函数声明,它的一个重要特征就是 函数声明提升 ,意思是在执行代码之前会读取函数声明,这就意味着可以把函数声明放到调用它的语句后面: sayHi(); // Hi sayYes(); // 错误:函数还不存在 function sayHi(){ console.log('Hi'); } var sayYes = function () { console.log('Yes'); } // 这种形式看起来好像是常规的变量赋值语句,即创建一个函数并将它赋值给变量sayYes。 // 这种情况下创建的函数叫做匿名函数。因为function 后面没有标识符,匿名函数的name属性是空字符串 理解函数声明与函数表达式之间的区别: if(true){ function sayHi(){ console.log("Hi"); } }else{ function sayHi(){ console.log("Yo!"); } } // 上述代码在ECMAScript中属于无效语法,js引擎会尝试修复错误,将其转换为合理的状态,但问题是浏览器尝试修正错误的做法并不一致。 // 但是如果使用函数表达式,那就没什么问题了 var sayHi; if(true){ sayHi = function (){ console.log("Hi"); } }else{ sayHi = function(){ console.log("Yo!"); } } sayHi(); // Hi
递归
递归函数是在一个函数通过名字调用自身的情况下构成的。
// 一个经典的递归阶乘函数 function factorial(num){ if(num <= 1){ return 1; }else{ return num * factorial(num - 1); } } console.log(factorial(10)); // 看起来没什么问题,但是下面的代码却导致它出错: var antherFactorial = factorial; factorial = null; console.log(antherFactorial(4)) // 出错! // 在这种情况下,使用arguments.callee可以解决这个问题。我们知道,arguments.callee是一个指向正在执行的函数的指针,因此可以用它来实现对函数的递归调用 -------------隔断------------------ function factorial(num){ if(num <= 1){ return 1; }else{ return num * arguments.callee(num - 1); } } var antherFactorial = factorial; factorial = null; console.log(antherFactorial(4)) // 24 // 因此,在编写递归函数时,通过使用arguments.callee代替函数名,可以确保无论怎样调用函数都不会出现问题 // 但是在严格模式下,不能通过脚本访问arguments.callee,访问这个属性会导致出错。不过,可以通过命名函数表达式来达成相同的效果: var ff = (function f(num){ if(num <= 1){ return 1; }else{ return num * f(num - 1); } }) console.log(ff(100)); //9.33262154439441e+157 // 以上代码创建了一个名为f() 的命名函数表达式,然后将它赋值给变量ff。即便把函数赋值给另一个变量,函数的名字f依然有效,所以递归调用照样 // 能正确完成。这种方式在严格模式和非严格模式下都行得通
闭包
有不少开发人员总是搞不清匿名函数和闭包这两个概念,因此经常混用。闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式
就是在一个函数内部创建另一个函数:
function createCF(propertyName){ return function(obj1,obj2){ var val1 = obj1[propertyName]; var val2 = obj2[propertyName]; // 上面两行代码是内部函数(一个匿名函数)中的代码,这两行代码访问了外部函数中的变量propertyName。即使这个内部函数被返回了,而且是在其他 // 地方被调用了,但它依然可访问变量propertyName。之所以还能访问这个变量,是因为内部函数的作用域链中包含createCF()的作用域 if(val1 < val2){ return -1; }else{ return 0; } } } var o1 = {age : 14}; var o2 = {age : 13}; var CF = createCF('age'); /* 有匿名函数从createCF()被返回后,它的作用域链被初始化为包含createCF()函数的活动对象和全局变量对象。这样,匿名函数 就可以访问在createCF()中定义的所以变量,更为重要的是,createCF()函数在执行完毕时,其活动对象也不会被销毁,因为匿名函数的 作用域链仍然在引用这个活动对象。换句话说,当createCF()函数返回后,其执行环境的作用域链会被销毁,但它的活动对象仍然会留在内存中 。直到匿名含函数被销毁后,createCF()函数的活动对象才会被销毁。 */ var res = CF(o1,o2); CF = null; //解除对匿名函数的引用(以便释放内存 /* 首先,创建的比较函数被保存在变量CF中。通过将CF设置为null解除该函数的引用,就等于通知垃圾回收例程将其清除。 随着匿名函数的作用域链被销毁,其他作用域(除了全局作用域)也都可以安全的销毁了。 */
当函数被调用时,会创建一个执行环境及相应的作用域链。然后使用arguments 和 其他命名参数和初始化函数的活动对象。
但在作用域链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象处于第三位。。。直至作为作用域终点的全局执行环境。
无论什么时候在函数中访问一个变量时,就会从作用域链中搜索具有相应名字的变量。一般来讲,当函数执行完毕后,局部活动对象就会被销毁,内存
中仅保存全局作用域(全局执行环境的变量对象)。但是,闭包的情况又有所不同:
在另一个函数内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域链中。因此,在createCF()函数内部定义的匿名函数的作用域链中
实际上会包含外部函数createCF()的活动对象
注意:由于闭包会携带包含它的函数的作用域,因此会比其他和函数占用更多的内存。过度使用闭包可能会导致内存占用过多,我们建议读者只在必要时再
考虑使用闭包
别忘了闭包所保存的是整个变量对象,而不是某个特殊的变量。 作用链的这种配置机制引出了一个值得注意的副作用,即闭包只能取得包含函数中任何变量的最后一个值。
function createFunctions(){ var result = []; for(var i = 0; i < 10; i++){ result[i] = function () { return i; }; } return result; } var res = createFunctions(); for( var i in res){ console.log(res[i]()); // 每个函数返回的都是10 } //当createFunctions()函数返回后,变量i的值是10,此时每个函数都引用着保存着变量i的同一个变量对象。所以在每个函数内部i的值都是10. // 但是,我们可以创建另一个匿名函数强制让闭包的行为符合预期。 function _createFunctions(){ var result = []; for(var i = 0; i < 10; i++){ result[i] = function (num){ return function () { return num; }; }(i); } return result; } var _res = _createFunctions(); for( var i in _res){ console.log(_res[i]()); // 返回 0 - 9 } // 这个版本,我们没有直接把闭包赋值给数组,而是定义了一个匿名函数,并将立即执行该匿名函数的结果赋值给数组。 // 这里的匿名函数有一个参数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; } } }; console.log(object.getNameFunc()()); // the window // 为什么匿名函数没有取得其包含作用域(或外部作用域)的this对象呢? /* 前面已经提到过,每个函数被调用时,都会自动取得两个特殊变量:this 和 arguments 。内部函数在搜索这两个变量时,只会搜索到其活动对象为止 因此永远不可能直接访问外部函数中的这两个变量。不过,把外部作用域的this对象保存到在一个闭包能够访问到的变量,就可以让闭包访问该对象了。 */ var name = "the window"; var object = { name : "my object", getNameFunc : function () { var that = this; return function () { return that.name; } } }; console.log(object.getNameFunc()()); //my object
注意: 闭包会引用包含函数的整个活动对象,即使闭包不直接引用,包含函数的活动对象也仍然会保存一个引用,设为null可以解决这个问题
模仿块级作用域
(function () { //在这里面的是块级作用域 console.log(123); })()
这种技术经常被用在函数外部,从而限制向全局作用域中添加过多的变量和函数。一般来说在一个由很多开发人员参与的大型运用程序中,过多的全局变量很容易
导致命名冲突。而创建私有作用域,每个开发人员可以使用自己的变量,又不用担心搞乱全局作用域
私有变量
严格来讲,js中没有私有成员的概念;所以对象属性都是公有的,不过,倒是有一个私有变量的概念。任何在函数中定义的变量,都可以认为是私有变量。
因此,不能在函数的外部访问这些变量。私有变量包含函数的参数,局部变量和再函数内部定义的其他函数
function Person(name){ this.getName = function () { return name; } this.setName = function (value) { name = value; } } var person = new Person('tom'); console.log(person.getName()); // tom person.setName('bob'); console.log(person.getName()); // bob /* 以上代码的构造函数中定义了两个特权方法:getName()和 setName()。这两个方法都可以在构造函数外部使用,而且都有权访问私有变量name。 私有变量name在Person中的每个实例中都不相同,因此每次调用构造函数都会重新创建这两个方法。不过在构造函数中定义特权方法也有一个缺点, 那就是你必须使用构造函数模式来达成这个目的。构造函数的缺点就是针对每个实例都会创建同样一组新方法,而使用静态私有变量来实现特权方法 就可以避免这个问题。 */ 静态私有变量 (function () { var name = ''; Person = function (value) { name = value; } Person.prototype.getName = function () { return name; } Person.prototype.setName = function (value) { name = value; } })(); var p1 = new Person('ni'); console.log(p1.getName()); /* 以这种方式创建静态私有变量会因为使用原型而增进代码复用,但每个实例都没有自己的私有变量。 多查找作用域链中的一个层次,就会在一定程度上影响查找速度,而这正是使用闭包和私有变量的一个显明的不足之处 */
模块模式
前面的模式是用于为自定义类型创建私有变量和特权方法的。而道格拉斯所说的模块模式,则是为单例创建私有变量和方法的。所谓单例,指的就是只有一个实例的
对象。按照惯例,js是以对象字面量的方式来创建单例对象的。
var singleton = function () { // 私有变量和函数 var privateVariable = 10; function privateFunction () { return false; } // 特权 / 公有方法和属性 return { publicProperty : true, publicMethod : function () { privateVariable++; return privateFunction(); } } }(); console.log(singleton); // {publicProperty: true, publicMethod: ƒ} /* 这个模块模式使用了一个返回对象的匿名函数。在这个匿名函数内部,首先定义了私有变量和函数。 然后,将一个对象字面量作为函数的值返回。由于这个对象是在匿名函数内部定义的,因此它的公有方法有权访问私有变量和函数。从本质上来讲, 这个对象字面量定义的是单例的公共接口。这种模式在需要对单例进行某些初始化,同时又需要维护其私有变量时非常有用 */ var app = function (){ var data = []; return { joinData : function (val) { data[data.length] = val; }, getData : function(){ // !!这里有闭包,私有变量的原理还是闭包! console.log(data); } } }(); app.joinData('demo'); app.getData(); /* 简言之,如果必须创建一个对象并以某些数据对其进行初始化,同时还要公开一些能够访问这些私有数据的方法,那就可以使用模块模式 */