with特性,提供的任何“便利”都更让其变得不可靠和低效率。

with语句的用法,可以很方便地避免对对象的重复引用。上面的代码整理成下面的形式

function status(info){

      var widget=new Widget();

      with(widget){

             setBackground(‘blue’);

             setForeground(‘white’);

             setText(‘Status:’+info);

            show()

       }

}

使用with语句从模块对象中导入变量也很有诱惑力。

function f(x,y){

      with(Math){

            return min(round(x),sqrt(y));

       }

}

在上面的这两种情况,使用with使得提取对象的属性,并将这些属性绑定到块的局部变量中变得非常诱人且容易。

很有吸引力,但没做它们应该做的事。

这两个例子里有两种不同类型的变量。

  • 一种是希望引用with对象的属性的变量,如setBackground,round。
  • 另一种是希望引用外部变量绑定的变量,如info,x,y。
  • 语法上并没有区分这两种类型的变量,都只是看起来像变量。

js中所有变量都是相同的

js从最内层的作用域开始向外查找变量。with语句对待一个对象犹如该对象代表一个变量作用域,因此在with代码块的内部,变量查找从搜索给定的变量名的属性开始。如果在这个对象中没有找到该属性,则继续在外部作用域中搜索。

在ES5规范中这称为词法环境(在旧版本标准中称为作用域链)。

该词法环境的最内层作用域由widget对象提供。接下来的作用域用来绑定该函数的局部变量info和widget。接下来一层绑定到status函数。注意在一个正常的作用域中,会有与局部作用域中的变量同样多的作用域绑定存储在与之对应的环境层级中。但是对于with作用域,绑定集合依赖于碰巧在给定时间点时的对象。

with块中的每个外部变量的引用都隐式地假设在with对象(以及它的任何原型对象)中没有同名的属性。而在程序的其他地方创建或修改with对象或其原型对象不一定会遵循这样的假设。js引擎当然也不会读取局部代码来获取你使用了哪些局部变量。

变量作用域和对象命名空间之间的冲突使得with代码块异常脆弱。如:with对象获得了一个名为info的属性,那么status函数的行为就会被立即改变。status函数将使用这个属性而不是info参数。在源代码的功能进行扩展时,后面有可能决定所有的widget对象都应该有一个info属性。在原型对象上添加了info属性。这将使status函数变得不可预测。

status(‘connecting’);//Status:connecting

Widget.prototype.info=”[widget info]”;

status(‘connected’);//Status:[widget info]

同样的,如果某人添加名为x或y的属性到Math对象上,那么f函数也悲剧了。

Math.x=0;

Math.y=0;

f(2,9);//0

  

总是很难预测一个特定的对象是否已被修改,或是否可能拥有你不知道的属性。事实证明,人力不可预测的特性对于优化编译器同样不可预测。

通常情况下,js作用域可被表示为高效的内部数据结构,变量查找会非常快速。但with代码块需要搜索对象的原型链来查找with代码块里的所有变量,因此,其运行速度远远低于一般的代码块

在js中没有单个特性能作为一个更好的选择直接替代with语句。在某些情况下,最好的替代方法是简单地将对象绑定到一个简短的变量名上

function status(info){

    var w=new Widget();

    w.setBackground(‘blue’);

    w.setForebacground(‘white’);

    w.addText(‘Status:’+info);

    w.show();

}

  

没有任何变量对于w对象的内容是敏感的。所以即使一些代码修改了Widget的原型对象,status函数的行为依旧是可预期的。

status(‘connecting’);//Status:connecting

Widget.prototype.info=”[widget info]”;

status(‘connected’);//Status:connected

  

在其他情况下,最好的方法是显示地将局部变量显式地绑定到相关的属性上

function f(x,y){

     var min=Math.min,round=Math.round,sqrt=Math.sqrt;

    return min(round(x),sqrt(y));

}

  

再次一旦消除with语句,函数的行为变得可以预测了。

Math.x=0;

Math.y=0;

f(2,9);//2

  

提示

  • 避免使用with语句
  • 使用简短的变量名代替重复访问的对象
  • 显式地绑定局部变量到对象属性上

[Effective JavaScript 笔记] 第10条:避免使用with的更多相关文章

  1. [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

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

    js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...

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

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

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

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

  5. [Effective JavaScript 笔记]第46条:使用数组而不要使用字典来存储有序集合

    对象属性无序性 js对象是一个无序属性集合. var obj={}; obj.a=10; obj.b=30; 属性a和属性b并没有谁前谁后之说.for...in循环,先输出哪个属性都有可能.获取和设置 ...

  6. [Effective JavaScript 笔记]第45条:使用hasOwnProperty方法以避免原型污染

    之前的43条,44条讨论了属性的枚举,但都没有彻底地解决属性查找中原型污染的问题.看下面关于字典的一些操作 'zhangsan' in dict; dict.zhangsan; dict.zhangs ...

  7. [Effective JavaScript 笔记]第68条:使用promise模式清洁异步逻辑

    构建异步API的一种流行的替代方式是使用promise(有时也被称为deferred或future)模式.已经在本章讨论过的异步API使用回调函数作为参数. downloadAsync('file.t ...

  8. [Effective JavaScript 笔记]第65条:不要在计算时阻塞事件队列

    第61条解释了异步API怎样帮助我们防止一段程序阻塞应用程序的事件队列.使用下面代码,可以很容易使一个应用程序陷入泥潭. while(true){} 而且它并不需要一个无限循环来写一个缓慢的程序.代码 ...

  9. [Effective JavaScript 笔记]第64条:对异步循环使用递归

    假设需要有这样一个函数,接收一个URL的数组并尝试依次下载每个文件直到有一个文件被成功下载.如果API是同步的,使用循环很简单实现. function downloadOneSync(urls){ f ...

随机推荐

  1. EF 基本数据过滤

    没猜错的话, 你们一定会和一大堆查询条件过不去, 重复的写,反复的写, 写到山崩地裂. 今天看了园友的文字:实体框架高级应用之动态过滤 EntityFramework DynamicFilters 我 ...

  2. 整合 Bing translator 到自己的系统中

    整合这个功能, 是因为 aliexpress 的买家来自不同国家, 我的 "小卖家" 同步到买家的留言, 很多西班牙,俄罗斯等小语种的文字, 看不懂. Google 被墙, 基本很 ...

  3. 如何使用bat命令批量删除指定文件名字的符号

    新建一个TXT文本,将下面的内容复制进去 @Echo Off&SetLocal ENABLEDELAYEDEXPANSIONFOR %%a in (*) do (set "name= ...

  4. The web application [/codeMarket] registered the JBDC driver[.........] but failed to unregister it when the web application was stopped. To prevent

    如果你报错了上面的这个严重,那么你的tomcat版本一定是在6.0.25之上的 原因:tomcat 6.025以后在sever.xml中引入了内存泄露侦测,对于垃圾回收不能处理的对像,它就会做日志. ...

  5. 关于Jquery 操作Cookie 取值错误

    使用JQuery操作cookie时 发生取的值不正确的问题: 结果发现cookie有四个不同的属性: 名称,内容,域,路径 $.cookie('the_cookie'); // 读取 cookie $ ...

  6. chrom_input_click

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Canvas识别相似图片

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 【转】pageX、clientX、screenX、offsetX、layerX、x

    参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX—— ...

  9. [原]Golang FileServer

    转载请注明出处 今天我们用go来搭建一个文件服务器FileServer,并且我们简单分析一下,它究竟是如何工作的.知其然,并知其所以然! 首先搭建一个最简单的,资源就挂载在服务器的根目录下,并且路由路 ...

  10. Vijos1459 车展 (treap)

    描述 遥控车是在是太漂亮了,韵韵的好朋友都想来参观,所以游乐园决定举办m次车展.车库里共有n辆车,从左到右依次编号为1,2,…,n,每辆车都有一个展台.刚开始每个展台都有一个唯一的高度h[i].主管已 ...