secrets of the javascript Ninja( with(){} 的用法)(javascript忍者的秘密)

      with语句也是一个功能强大的特性，但是它常常不能被正确的理解。它允许你把一个对象的所有属性放到with语句所指定的作用域中，这样这些属性就可以想平常的JavaScript变量被使用。理解with语句是如何工作的，在你开发中会带来很大的好处。

 

JavaScript中with(){}语句是如何工作的

让我们首先通过一个小例子来看看with(){}语句的基本用法：

var use = "other"; var katana = { isSharp: true, use: function(){ this.isSharp = !!this.isSharp; } }; with ( katana ) { //assert( true, "You can still call outside methods." ); isSharp = false; use(); alert(use!='other');//true alert(this);//window Object //assert( use != "other", "Use is a function, from the katana object." ); //assert( this != katana, "this isn't changed - it keeps its original value" ); } alert(typeof isSharp);//undefined alert(katana.isSharp);//false 

从这个例子我们来总结一下with的基本用法：

 

1.在with(){}语句中，你可以直接使用with指定的对象的变量和方法。

2.如果外部存在和with指定的对象的变量同名的属性，那么with指定对象中的属性会覆盖其他同名的属性。

3.this指定的是katana的外部作用域。

 

那么我们能否在with(){}语句中添加一些属性和方法呢？来看一段代码：

var katana = { isSharp: true, use: function(){ this.isSharp = !!this.isSharp; } }; with ( katana ) { isSharp = false; cut = function(){ isSharp = false; }; } alert(katana.cut);//undefined alert(cut); } 

从上面的代码我们可以发现：

 

1.在with语句中只能使用和更改对象已有属性，不能为对象添加新的属性

2.如果为对象添加新的属性，新添加的属性会作为全局对象的属性，而不是with指定对象的属性。

JavaScript中如何使用with(){}语句

我们主要通过一些著名的JavaScript库的示例代码来看看with(){}如何使用：

 

1. Prototype库中使用with(){}的情况。

2. Object.extend(String.prototype.escapeHTML, { div: document.createElement('div'), text: document.createTextNode('') }); with (String.prototype.escapeHTML) div.appendChild(text); 

   下面是base2库中使用with的情况：

   with (document.body.style) { backgroundRepeat = "no-repeat"; backgroundImage = "url(http://ie7-js.googlecode.com/svn/trunk/lib/blank.gif)"; backgroundAttachment = "fixed"; }

   base2中另外的一中情况：

   with (document.body.style) { backgroundRepeat = "no-repeat"; backgroundImage = "url(http://ie7-js.googlecode.com/svn/trunk/lib/blank.gif)"; backgroundAttachment = "fixed"; } base2中另外的一中情况： var Rect = Base.extend({ constructor: function(left, top, width, height) { this.left = left; this.top = top; this.width = width; this.height = height; this.right = left + width; this.bottom = top + height; }, contains: function(x, y) { with (this) return x >= left && x <= right && y >= top && y <= bottom; }, toString: function() { with (this) return [left, top, width, height].join(","); } }); 

    

    

   Firebug firefox extension中使用with(){}的情况

   const evalScriptPre = "with (.vars) { with (.api) { with (.userVars) { with (window) { const evalScriptPost = "}}}}"; with ( obj ) { with ( window ) { ... } } 

3. 导入命名空间的时候使用如下

4. YAHOO.util.Event.on( [YAHOO.util.Dom.get('item'), YAHOO.util.Dom.get('otheritem')], 'click', function(){ YAHOO.util.Dom.setStyle(this,'color','#c00'); } ); with ( YAHOO.util.Dom ) { YAHOO.util.Event.on([get('item'), get('otheritem')], 'click', function(){ setStyle(this,'color','#c00'); });

   第二个代码是不是简单了很多。

5. 净化面向对象的代码，使用如下方式编写面向对象的代码。

6. function Ninja(){with(this){ // Private Information var cloaked = false; // Public property this.swings = 0; // Private Method function addSwing(){ return ++swings; } // Public Methods this.swingSword = function(){ cloak( false ); return addSwing(); }; this.cloak = function(value){ return value != null ? cloaked = value : cloaked; }; }} 

    

   从上面的代码我们可以发现一下三点：

   1.私有数据和共有数据是的定义是不一样的

   2.由于使用with(this){}使得访问共有数据和私有数据是一样的

   3.方法的的定义和变量的定义相似，共有方法必须使用this前缀，但是访问共有方法的时候和私有方法是一样的，由于使用with(this){}

    

    

7. 测试

8. 下面是Scriptaculous test suite.中的一个示例

    

    

   new Test.Unit.Runner({ testSliderBasics: function(){with(this){ var slider = new Control.Slider('handle1', 'track1'); assertInstanceOf(Control.Slider, slider); assertEqual('horizontal', slider.axis); assertEqual(false, slider.disabled); assertEqual(0, slider.value); slider.dispose(); }}, // ... }); 

    

    

9. 模板

10. 下面来看看John Resig写的一个模板系统：

     

     

    (function(){ var cache = {}; this.tmpl = function tmpl(str, data){ // Figure out if we're getting a template, or if we need to // load the template - and be sure to cache the result. var fn = !//W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : // Generate a reusable function that will serve as a template // generator (and which will be cached). new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" + // Introduce the data as local variables using with(){} "with(obj){p.push('" + // Convert the template into pure JavaScript str .replace(/[/r/t/n]/g, "") .split("<%").join("/t") .replace(/((^|%>)[^/t]*)'/g, "$1/r") .replace(//t=(.*?)%>/g, "',$1,'") .split("/t").join("');") .split("%>").join("p.push('") .split("/r").join("//'") + "');}return p.join('');"); // Provide some basic currying to the user return data ? fn( data ) : fn; }; })(); assert( tmpl("Hello, <%= name =>!", {name: "world"}) == "Hello, world!", "Do simple variable inclusion." ); var hello = tmpl("Hello, <%= name =>!"); assert( hello({name: "world"}) == "Hello, world!", "Use a pre-compiled template." ); 

    具体解释在此：http://ejohn.org/blog/javascript-micro-templating/