[Effective JavaScript 笔记] 第14条:当心命名函数表达式笨拙的作用域

js函数会根据上下文改变其含义。

function double(x){return x*2;}

这是一个函数声明,也可以是一个命名函数表达式(named function expression),取决于它出现的地方。

声明一个函数,并绑定一个当前作用域的变量。

同一段函数代码也可以作为一个表达式。

var f=function double(x){return x*2;}

根据ECMAScript规范,该函数绑定到变量f,而不是变量double。这里给函数表达式命名并不是必要的的,可以直接使用匿名的函数表达式。

var f=function(x){return x*2;}

匿名和命名函数表达式的官方区别在于后者会绑定到与其函数名相同的变量上,该变量将作为函数内的一个局部变量。

可以用来写递归函数表达式

var f=function find(tree,key){

if(!tree){

return null;

}

if(tree.key === key){

return tree.value;

}

return find(tree.left,key)||find(tree.right,value);

}

注意:变量find的作用域只在其自身函数中。不像函数声明,命名函数表达式不能通过其内部的函数名在外部被引用。

find(myTree,”foo”);//error:find is not defined

使用命名函数表达式来进行递归似乎没有必要,因为使用外部作用域的函数名也可以达到同样的效果

var f=function(tree,key){

if(!tree){

return null;

}

if(tree.key === key){

return tree.value;

}

return f(tree.left,key)||f(tree.right,value);

}

function find(tree,key){

if(!tree){

return null;

}

if(tree.key === key){

return tree.value;

}

return find(tree.left,key)||find(tree.right,value);

}

var f=find;

命名函数的真正的用处是进行调试

大多数现代的JS环境都提供对Error对旬的栈跟踪功能。在栈跟踪中,函数表达式的名称通常作为其入口作用。用于检查栈的设备调试器对命名函数表达式有类似的使用。

命名函数表达式是作用域和兼容性问题的来源。ES规范的错误,在ES3中就已经存在,JS引擎被要求将命名函数表达式的作用域表示为一个对象,像有问题的with结构。该作用域对象只含有单个属性,该属性将函数名和函数自身绑定起来。该作用域对象也继承了Object.prototype的属性。这意味着仅仅是给函数表达式命名也会将Object.prototype中的所有属性引用到作用域中。结果出问题如:

var constructor=function(){return null;};

var f=function f(){

return constructor();

};

f();//{}(in ES3 environments)

ES5修正了这个问题。运行如下:

但有些JS环境仍然使用过时的对象作用域,有些环境更不符合标准,对匿名函数表达式使用对象作为作用域。

在系统中避免对象污染函数表达式作用域的最好方式是避免任何时候在Object.prototype中添加属性,以及避免使用任何与标准Object.prototype属性同名的局部变量

在流行的JS引擎中的另一个缺陷是对命名函数表达式的声明进行提升。

var f=function g(){return 17;}

g();//17(在不标准的环境中)

注意这是不符合标准的行为。

有一些JS环境甚至把f和g这两个函数作为不同的对象,从而导致不必要的内存分配。这种行为的一个合理的解决办法是创建一个与函数表达式同名的局部变量并赋值为null。

var f=function g(){return 17;}

var g=null;

即使在没有错误地提升函数表达式声明的环境中,使用var重声明变量能确保仍然会绑定变量g。设置变量g为null能确保重复的函数被垃圾回收。

合理的结论

  • 命名函数表达式由于会导致很多问题,所以并不值得使用。
  • 一个不太严肃的回应是开发阶段使用命名函数表达式用作调试,在发布前通过构建工具去把所有函数表达式转化为匿名的。
  • 要明确自己要发布的平台的JS环境。

提示

  • 在Error对象和调试器中使用命名函数表达式改进栈跟踪
  • 在ES3和有问题的JS环境中,函数表达式作用域会被Object.prototype污染
  • 错误百出的JS环境中会提升命名函数表达式声明,并导致命名函数表达式的重复存储
  • 考虑避免使用命名函数表达式或在发布前删除函数命名
  • 确保JS代码到正确实现ES5环境中,就不用再担心这些问题了
时间: 2024-10-12 06:37:40

[Effective JavaScript 笔记] 第14条:当心命名函数表达式笨拙的作用域的相关文章

[Effective JavaScript 笔记] 第4条:原始类型优于封闭对象

js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //"number" typeof "s";//"string" typeof null;//"object":ECMAScript把null描述为独特的类型,但返回值却是对象类型,有点困惑. 可以使用Object.prototype.t

[Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法

js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+1}" 反射获取函数源代码的功能很强大,使用函数对象的toString方法有严重的局限性.toString方法的局限性ECMAScript标准对函数对象的toString方法的返回结果(即该字符串)并没有任何要求.这意味着不同的js引擎将产生不同的字符串,甚至产生的字符串与该函数并不相关. 如果函数

[Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码

函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式传递给eval函数以达到同样的功能.程序员面临一个选择:应该将代码表示为函数还是字符串?毫无疑问,应该将代码表示为函数.字符串表示代码不够灵活的一个重要原因是:它们不是闭包. 闭包回顾 看下面这个图 js的函数值包含了比调用它们时执行所需要的代码还要多的信息.而且js函数值还在内部存储它们可能会引用

[Effective JavaScript 笔记]第15条:当心局部块函数声明笨拙的作用域

嵌套函数声明.没有标准的方法在局部块里声明函数,但可以在另一个函数的顶部嵌套函数声明. function f(){return "global"} function test(x){ var result=[]; function f(){return "local";}//block-local if(x){ result.push(f()); } result.push(f()); return result; } test(true);//["loc

[Effective JavaScript 笔记] 第6条:了解分号插入的局限

分号可以省略 js可以在语句结束不强制加分号.(建议还是添加,不添加分号往往会出现不易发现的BUG) function Point(x,y){ this.x=x||0; this.y=y||0; } Point.prototype.isOrigin=function(){ return this.x===0 && this.y===0 } 上面代码可以运行,是由于js可以自动插入分号,它是一种程序解析技术.能推断出某些上下文中省略的分号,然后有效地自动地将分号"插入"到

[Effective JavaScript 笔记] 第13条:使用立即调用的函数表达式创建局部作用域

function wrapElements(a){ var res=[],i,n; for(i=0,n=a.length;i<n;i++){ res[i]=function(){return a[i]}; } return res; } var wrapped=wrapElements([10,20,30,40,50]); var f=wrapped[0]; f();//undefined 这个可以由之前的闭包来讲,res里的每个函数都是一个闭包,它们都可以访问上一个函数的作用域内的变量,所以每

[Effective JavaScript 笔记] 第11条:熟练掌握闭包

理解闭包三个基本的事实 第一个事实:js允许你引用在当前函数以外定义的变量. function makeSandwich(){ var magicIngredient=”peanut butter”; function make(filling){ return magicIngredient+’and ’+filling; } return make(‘jelly’); } makeSandwich();//”peanut butter and jelly” 图上直接指出如下 第二个事实:即使

Effective JavaScript Item 13 使用即时调用的函数表达式(IIFE)来创建局部域

本系列作为Effective JavaScript的读书笔记. 所谓的即时调用的函数表达式,这个翻译也许不太准确,它对应的英文原文是Immediately Invoked Function Expression (IIFE).下文也使用IIFE来表达这一概念. 首先看一个程序: function wrapElements(a) { var result = [], i, n; for (i = 0, n = a.length; i < n; i++) { result[i] = function

[Effective JavaScript 笔记]第62条:在异步序列中使用嵌套或命名的回调函数

异步程序的操作顺序 61条讲述了异步API如何执行潜在的代价高昂的I/O操作,而不阻塞应用程序继续处理其他输入.理解异步程序的操作顺序刚开始有点混乱.例如,下面的代码会在打印"finished"之前打印"starting",即使这两个动作的程序源文件中以相反的顺序呈现. downloadAsync('file.txt',function(file){ console.log('finished'); }); console.log('starting'); down