with(){} 的用法(javascript忍者的秘密) 【转】

qianwenjie

2012-10-28

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(){}的情况。

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(",");
   }
});

Firebugfirefoxextension中使用with(){}的情况

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

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

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

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

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

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){}

原文地址：

http://blog.csdn.net/slalx/article/details/4025007

javascript