Alan Storm对我关于该with
声明的回答的评论让我思考。我很少找到使用这种特定语言功能的理由,也从未考虑过它会如何造成麻烦。现在,我很好奇如何有效地利用with
,同时避免它的陷阱。
您在哪里发现该with
声明有用?
Alan Storm对我关于该with
声明的回答的评论让我思考。我很少找到使用这种特定语言功能的理由,也从未考虑过它会如何造成麻烦。现在,我很好奇如何有效地利用with
,同时避免它的陷阱。
您在哪里发现该with
声明有用?
今天突然想到了另一个用途,于是兴奋地上网搜了一下,发现了一个现有的提法:Defining Variables inside Block Scope。
JavaScript,尽管表面上与 C 和 C++ 相似,但并不将变量范围限定在定义它们的块中:
var name = "Joe";
if ( true )
{
var name = "Jack";
}
// name now contains "Jack"
在循环中声明闭包是一项常见任务,这可能会导致错误:
for (var i=0; i<3; ++i)
{
var num = i;
setTimeout(function() { alert(num); }, 10);
}
因为 for 循环没有引入新的作用域,所以三个函数都将共享相同num
的值- 值为 。2
let
和with
随着ES6let
中语句的引入,在必要时引入新的作用域变得很容易以避免这些问题:
// variables introduced in this statement
// are scoped to each iteration of the loop
for (let i=0; i<3; ++i)
{
setTimeout(function() { alert(i); }, 10);
}
甚至:
for (var i=0; i<3; ++i)
{
// variables introduced in this statement
// are scoped to the block containing it.
let num = i;
setTimeout(function() { alert(num); }, 10);
}
在 ES6 普遍可用之前,这种用途仍然仅限于愿意使用转译器的最新浏览器和开发人员。但是,我们可以使用以下方法轻松模拟这种行为with
:
for (var i=0; i<3; ++i)
{
// object members introduced in this statement
// are scoped to the block following it.
with ({num: i})
{
setTimeout(function() { alert(num); }, 10);
}
}
循环现在按预期工作,创建三个值从 0 到 2 的单独变量。请注意,在块中声明的变量没有作用域,这与 C++ 中的块的行为不同(在 C 中,变量必须在开始时声明一个块,所以在某种程度上它是相似的)。这种行为实际上与早期版本的 Mozilla 浏览器中引入的let
块语法非常相似,但在其他地方并未广泛采用。
我一直在使用 with 语句作为范围导入的简单形式。假设您有某种标记生成器。而不是写:
markupbuilder.div(
markupbuilder.p('Hi! I am a paragraph!',
markupbuilder.span('I am a span inside a paragraph')
)
)
你可以改为写:
with(markupbuilder){
div(
p('Hi! I am a paragraph!',
span('I am a span inside a paragraph')
)
)
}
对于这个用例,我没有做任何分配,所以我没有与此相关的歧义问题。
with
正如我之前的评论所表明的那样,无论在任何特定情况下多么诱人,我都不认为你可以安全地使用它。由于这里没有直接涉及这个问题,我将重复一遍。考虑以下代码
user = {};
someFunctionThatDoesStuffToUser(user);
someOtherFunction(user);
with(user){
name = 'Bob';
age = 20;
}
如果不仔细研究这些函数调用,就无法判断这段代码运行后程序的状态。如果user.name
已经设置,现在将是Bob
. 如果未设置,则全局name
将被初始化或更改为Bob
,并且user
对象将保持没有name
属性。
错误发生。如果你与你一起使用,最终会这样做并增加你的程序失败的机会。更糟糕的是,您可能会遇到在 with 块中设置全局的工作代码,无论是故意的还是作者不知道构造的这种怪癖。这很像在切换时遇到故障,您不知道作者是否有意这样做,也无法知道“修复”代码是否会引入回归。
现代编程语言充满了功能。有些功能在使用多年后被发现是不好的,应该避免使用。Javascriptwith
就是其中之一。
实际上,我with
最近发现该声明非常有用。直到我开始我当前的项目——一个用 JavaScript 编写的命令行控制台,我才真正想到了这种技术。我试图模拟 Firebug/WebKit 控制台 API,可以在控制台中输入特殊命令,但它们不会覆盖全局范围内的任何变量。当我试图克服我在Shog9 的优秀答案的评论中提到的问题时,我想到了这一点。
为了达到这个效果,我使用了两个 with 语句在全局作用域后面“分层”了一个作用域:
with (consoleCommands) {
with (window) {
eval(expression);
}
}
这种技术的伟大之处在于,除了性能上的劣势之外,它不会遭受通常对with
语句的恐惧,因为无论如何我们都是在全局范围内进行评估 - 不存在我们的伪范围之外的变量存在的危险修改的。
令我惊讶的是,当我设法找到在其他地方使用的相同技术 - Chromium 源代码时,我受到启发来发布这个答案!
InjectedScript._evaluateOn = function(evalFunction, object, expression) {
InjectedScript._ensureCommandLineAPIInstalled();
// Surround the expression in with statements to inject our command line API so that
// the window object properties still take more precedent than our API functions.
expression = "with (window._inspectorCommandLineAPI) { with (window) { " + expression + " } }";
return evalFunction.call(object, expression);
}
编辑:刚刚检查了 Firebug 源,他们将4 与语句链接在一起以获得更多层。疯狂的!
const evalScript = "with (__win__.__scope__.vars) { with (__win__.__scope__.api) { with (__win__.__scope__.userVars) { with (__win__) {" +
"try {" +
"__win__.__scope__.callback(eval(__win__.__scope__.expr));" +
"} catch (exc) {" +
"__win__.__scope__.callback(exc, true);" +
"}" +
"}}}}";
是的,是的,是的。有一个非常合法的用途。手表:
with (document.getElementById("blah").style) {
background = "black";
color = "blue";
border = "1px solid green";
}
基本上任何其他 DOM 或 CSS 钩子都是 with 的绝妙用途。除非您竭尽全力并决定使其成为可能,否则“CloneNode”不会未定义并返回到全局范围。
Crockford 对速度的抱怨是 with 创建了一个新的上下文。上下文通常很昂贵。我同意。但是如果你刚刚创建了一个 div 并且手头没有一些框架来设置你的 css 并且需要手动设置 15 个左右的 CSS 属性,那么创建一个上下文可能会比创建变量和 15 个取消引用更便宜:
var element = document.createElement("div"),
elementStyle = element.style;
elementStyle.fontWeight = "bold";
elementStyle.fontSize = "1.5em";
elementStyle.color = "#55d";
elementStyle.marginLeft = "2px";
ETC...
您可以定义一个小的辅助函数来提供with
没有歧义的好处:
var with_ = function (obj, func) { func (obj); };
with_ (object_name_here, function (_)
{
_.a = "foo";
_.b = "bar";
});
似乎不值得,因为您可以执行以下操作:
var o = incrediblyLongObjectNameThatNoOneWouldUse;
o.name = "Bob";
o.age = "50";
我从不使用,看不到理由,也不推荐它。
问题with
在于它阻止了 ECMAScript 实现可以执行的大量词法优化。鉴于基于 JIT 的快速引擎的兴起,这个问题在不久的将来可能会变得更加重要。
它可能看起来with
允许更简洁的构造(例如,引入一个新的范围而不是一个通用的匿名函数包装器或替换冗长的别名),但它 真的不值得。除了性能下降之外,总是存在分配给错误对象的属性的危险(当在注入范围内的对象上找不到属性时)并且可能错误地引入全局变量。IIRC,后一个问题是促使 Crockford 建议避免的问题with
。
Visual Basic.NET 也有类似的With
声明。我使用它的一种更常见的方法是快速设置一些属性。代替:
someObject.Foo = ''
someObject.Bar = ''
someObject.Baz = ''
,我可以写:
With someObject
.Foo = ''
.Bar = ''
.Baz = ''
End With
这不仅仅是懒惰的问题。它还使代码更具可读性。与 JavaScript 不同的是,它不会有歧义,因为您必须在受语句影响的所有内容前面加上一个.
(点)。因此,以下两个明显不同:
With someObject
.Foo = ''
End With
对比
With someObject
Foo = ''
End With
前者是someObject.Foo
;后者Foo
在范围之外 someObject
。
我发现 JavaScript 缺乏区别使得它远不如 Visual Basic 的变体有用,因为模棱两可的风险太高了。除此之外,with
它仍然是一个强大的想法,可以提高可读性。
您可以使用with
将对象的内容作为局部变量引入块,就像使用这个小型模板引擎所做的那样。
我认为明显的用途是作为捷径。例如,如果您正在初始化一个对象,您只需键入大量“ObjectName”即可。有点像 lisp 的“with-slots”,它可以让你写
(with-slots (foo bar) objectname
"some code that accesses foo and bar"
这和写作一样
"some code that accesses (slot-value objectname 'foo) and (slot-value objectname 'bar)""
当您的语言允许“Objectname.foo”但仍然如此时,为什么这是一个快捷方式更明显。
使用“with”可以让你的代码更加枯燥。
考虑以下代码:
var photo = document.getElementById('photo');
photo.style.position = 'absolute';
photo.style.left = '10px';
photo.style.top = '10px';
您可以将其干燥至以下状态:
with(document.getElementById('photo').style) {
position = 'absolute';
left = '10px';
top = '10px';
}
我想这取决于您是否偏爱易读性或表现力。
第一个示例更清晰易读,可能推荐用于大多数代码。但无论如何,大多数代码都很温和。第二个有点模糊,但使用语言的表达性来减少代码大小和多余的变量。
我想喜欢 Java 或 C# 的人会选择第一种方式(object.member),而喜欢 Ruby 或 Python 的人会选择后者。
有使用 Delphi 的经验,我会说使用with应该是最后的大小优化,可能由某种 javascript 最小化算法执行,可以访问静态代码分析以验证其安全性。
自由使用with语句可能遇到的范围界定问题可能是 a** 中的一大痛苦,我不希望任何人经历调试会话来弄清楚他..在你的代码中发生了什么,只是发现它捕获了一个对象成员或错误的局部变量,而不是您想要的全局或外部范围变量。
VB的 with语句更好,因为它需要点来消除范围的歧义,但 Delphi with语句是一把带有扳机的上膛枪,在我看来,就好像 javascript 足够相似,足以保证相同的警告。
不推荐使用 with,并且在 ECMAScript 5 严格模式下被禁止。推荐的替代方法是将要访问其属性的对象分配给临时变量。
with 语句可用于减少代码大小或用于私有类成员,例如:
// demo class framework
var Class= function(name, o) {
var c=function(){};
if( o.hasOwnProperty("constructor") ) {
c= o.constructor;
}
delete o["constructor"];
delete o["prototype"];
c.prototype= {};
for( var k in o ) c.prototype[k]= o[k];
c.scope= Class.scope;
c.scope.Class= c;
c.Name= name;
return c;
}
Class.newScope= function() {
Class.scope= {};
Class.scope.Scope= Class.scope;
return Class.scope;
}
// create a new class
with( Class.newScope() ) {
window.Foo= Class("Foo",{
test: function() {
alert( Class.Name );
}
});
}
(new Foo()).test();
如果要修改范围,with 语句非常有用,这是拥有自己的全局范围所必需的,您可以在运行时对其进行操作。您可以在其上放置常量或某些常用的辅助函数,例如“toUpper”、“toLower”或“isNumber”、“clipNumber”等。
关于我经常读到的糟糕性能:限定函数不会对性能产生任何影响,事实上,在我的 FF 中,作用域函数比无作用域运行得更快:
var o={x: 5},r, fnRAW= function(a,b){ return a*b; }, fnScoped, s, e, i;
with( o ) {
fnScoped= function(a,b){ return a*b; };
}
s= Date.now();
r= 0;
for( i=0; i < 1000000; i++ ) {
r+= fnRAW(i,i);
}
e= Date.now();
console.log( (e-s)+"ms" );
s= Date.now();
r= 0;
for( i=0; i < 1000000; i++ ) {
r+= fnScoped(i,i);
}
e= Date.now();
console.log( (e-s)+"ms" );
所以在上面提到的方式中使用 with 语句对性能没有负面影响,但是一个很好的,因为它减少了代码大小,什么影响了移动设备上的内存使用。
我认为对象文字的使用很有趣,就像使用闭包的直接替代品
for(var i = nodes.length; i--;)
{
// info is namespaced in a closure the click handler can access!
(function(info)
{
nodes[i].onclick = function(){ showStuff(info) };
})(data[i]);
}
或与闭包等效的 with 语句
for(var i = nodes.length; i--;)
{
// info is namespaced in a closure the click handler can access!
with({info: data[i]})
{
nodes[i].onclick = function(){ showStuff(info) };
}
}
我认为真正的风险是意外地减少了不属于 with 语句的变量,这就是为什么我喜欢将对象字面量传递给 with 的原因,您可以在代码中添加的上下文中准确地看到它将是什么。
使用 with 还会使您的代码在许多实现中变慢,因为现在所有内容都包含在额外的查找范围中。在 JavaScript 中使用 with 没有正当理由。
我创建了一个“合并”函数,它消除了with
语句中的一些歧义:
if (typeof Object.merge !== 'function') {
Object.merge = function (o1, o2) { // Function to merge all of the properties from one object into another
for(var i in o2) { o1[i] = o2[i]; }
return o1;
};
}
我可以像使用它一样使用它with
,但我知道它不会影响我不打算影响的任何范围。
用法:
var eDiv = document.createElement("div");
var eHeader = Object.merge(eDiv.cloneNode(false), {className: "header", onclick: function(){ alert("Click!"); }});
function NewObj() {
Object.merge(this, {size: 4096, initDate: new Date()});
}
对于一些短代码片段,我想在度数模式下使用三角函数等sin
,cos
而不是在辐射模式下。为此,我使用了一个AngularDegree
对象:
AngularDegree = new function() {
this.CONV = Math.PI / 180;
this.sin = function(x) { return Math.sin( x * this.CONV ) };
this.cos = function(x) { return Math.cos( x * this.CONV ) };
this.tan = function(x) { return Math.tan( x * this.CONV ) };
this.asin = function(x) { return Math.asin( x ) / this.CONV };
this.acos = function(x) { return Math.acos( x ) / this.CONV };
this.atan = function(x) { return Math.atan( x ) / this.CONV };
this.atan2 = function(x,y) { return Math.atan2(x,y) / this.CONV };
};
然后我可以在度数模式下使用三角函数,而不会在with
块中产生进一步的语言噪音:
function getAzimut(pol,pos) {
...
var d = pos.lon - pol.lon;
with(AngularDegree) {
var z = atan2( sin(d), cos(pol.lat)*tan(pos.lat) - sin(pol.lat)*cos(d) );
return z;
}
}
这意味着:我使用一个对象作为函数的集合,我在有限的代码区域中启用这些函数以进行直接访问。我觉得这很有用。
将在相对复杂的环境中运行的代码放入容器中很有用:我使用它为“窗口”创建本地绑定,以便运行用于 Web 浏览器的代码。
我真的不明白使用 with 比键入 object.member 更具可读性。我不认为它的可读性降低了,但我也不认为它的可读性更高。
就像 lassevk 所说,我绝对可以看到使用 with 比使用非常明确的“object.member”语法更容易出错。
我认为 的有用性with
可能取决于您的代码编写得如何。例如,如果您正在编写如下所示的代码:
var sHeader = object.data.header.toString();
var sContent = object.data.content.toString();
var sFooter = object.data.footer.toString();
那么你可以争辩说这样with
做会提高代码的可读性:
var sHeader = null, sContent = null, sFooter = null;
with(object.data) {
sHeader = header.toString();
sContent = content.toString();
sFooter = content.toString();
}
相反,可以说你违反了得墨忒耳法则,但话又说回来,也许不是。我离题了=)。
最重要的是,要知道 Douglas Crockford 建议不要使用with
. 我敦促您在此处查看他的博客文章with
及其替代方案。
CoffeeScript 的Coco fork 有一个with
关键字,但它只是将this
(@
在 CoffeeScript/Coco 中也可写)设置为块内的目标对象。这消除了歧义并实现了 ES5 严格模式合规性:
with long.object.reference
@a = 'foo'
bar = @b
您必须在 W3schools http://www.w3schools.com/js/js_form_validation.asp上查看 javascript 表单的验证,其中“扫描”对象表单以查找名称为“电子邮件”的输入
但是我已经修改它以从任何表单中获取所有字段验证为非空,无论表单中字段的名称或数量如何。好吧,我只测试了文本字段。
但是 with() 使事情变得更简单。这是代码:
function validate_required(field)
{
with (field)
{
if (value==null||value=="")
{
alert('All fields are mandtory');return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with (thisform)
{
for(fiie in elements){
if (validate_required(elements[fiie])==false){
elements[fiie].focus();
elements[fiie].style.border='1px solid red';
return false;
} else {elements[fiie].style.border='1px solid #7F9DB9';}
}
}
return false;
}
对代理对象使用“with”语句
我最近想为babel编写一个启用宏的插件。我想有一个单独的变量命名空间来保存我的宏变量,我可以在那个空间中运行我的宏代码。另外,我想检测宏代码中定义的新变量(因为它们是新宏)。
首先,我选择了vm模块,但我发现 vm 模块中的 Array、Object 等全局变量与主程序不同,我无法实现module
并且require
与该全局对象完全兼容(因为我无法重构核心模块)。最后,我找到了“with”语句。
const runInContext = function(code, context) {
context.global = context;
const proxyOfContext = new Proxy(context, { has: () => true });
let run = new Function(
"proxyOfContext",
`
with(proxyOfContext){
with(global){
${code}
}
}
`
);
return run(proxyOfContext);
};
这个代理对象捕获所有变量的搜索并说:“是的,我有那个变量。” 如果代理对象实际上没有该变量,则将其值显示为undefined
.
这样,如果在宏code
中用var
语句定义了任何变量,我可以在上下文对象中找到它(如 vm 模块)。但是在那个时间定义let
或const
仅可用并且不会保存在上下文对象中的变量(vm模块保存它们但不公开它们)。
性能:此方法的性能优于vm.runInContext
。
安全:如果你想在沙箱中运行代码,这无论如何都不安全,你必须使用 vm 模块。它只提供一个新的命名空间。
我的
switch(e.type) {
case gapi.drive.realtime.ErrorType.TOKEN_REFRESH_REQUIRED: blah
case gapi.drive.realtime.ErrorType.CLIENT_ERROR: blah
case gapi.drive.realtime.ErrorType.NOT_FOUND: blah
}
归结为
with(gapi.drive.realtime.ErrorType) {switch(e.type) {
case TOKEN_REFRESH_REQUIRED: blah
case CLIENT_ERROR: blah
case NOT_FOUND: blah
}}
你能相信这么低质量的代码吗?不,我们看到它变得完全不可读。这个例子无可否认地证明,如果我正确地理解了可读性,就不需要 with-statement ;)
正如 Andy E 在 Shog9's answer 的评论中指出的那样,这种潜在的意外行为在with
与对象文字一起使用时会发生:
for (var i = 0; i < 3; i++) {
function toString() {
return 'a';
}
with ({num: i}) {
setTimeout(function() { console.log(num); }, 10);
console.log(toString()); // prints "[object Object]"
}
}
并不是说意外行为还不是with
.
如果你真的还想使用这种技术,至少使用一个带有空原型的对象。
function scope(o) {
var ret = Object.create(null);
if (typeof o !== 'object') return ret;
Object.keys(o).forEach(function (key) {
ret[key] = o[key];
});
return ret;
}
for (var i = 0; i < 3; i++) {
function toString() {
return 'a';
}
with (scope({num: i})) {
setTimeout(function() { console.log(num); }, 10);
console.log(toString()); // prints "a"
}
}
但这仅适用于 ES5+。也不要使用with
.
with
使用 require.js 时,您可以避免显式管理arity:
var modules = requirejs.declare([{
'App' : 'app/app'
}]);
require(modules.paths(), function() { with (modules.resolve(arguments)) {
App.run();
}});
requirejs.declare 的实现:
requirejs.declare = function(dependencyPairs) {
var pair;
var dependencyKeys = [];
var dependencyValues = [];
for (var i=0, n=dependencyPairs.length; i<n; i++) {
pair = dependencyPairs[i];
for (var key in dependencyPairs[i]) {
dependencyKeys.push(key);
dependencyValues.push(pair[key]);
break;
}
};
return {
paths : function() {
return dependencyValues;
},
resolve : function(args) {
var modules = {};
for (var i=0, n=args.length; i<n; i++) {
modules[dependencyKeys[i]] = args[i];
}
return modules;
}
}
}
我正在开发一个允许用户上传代码以修改应用程序部分行为的项目。在这种情况下,我一直在使用一个with
子句来防止他们的代码修改我希望他们搞砸的范围之外的任何内容。我用来执行此操作的代码的(简化)部分是:
// this code is only executed once
var localScope = {
build: undefined,
// this is where all of the values I want to hide go; the list is rather long
window: undefined,
console: undefined,
...
};
with(localScope) {
build = function(userCode) {
eval('var builtFunction = function(options) {' + userCode + '}');
return builtFunction;
}
}
var build = localScope.build;
delete localScope.build;
// this is how I use the build method
var userCode = 'return "Hello, World!";';
var userFunction = build(userCode);
此代码确保(在某种程度上)用户定义的代码既不能访问任何全局范围的对象,例如window
也不能通过闭包访问我的任何局部变量。
就像对聪明人说的那样,我仍然必须对用户提交的代码执行静态代码检查,以确保他们没有使用其他偷偷摸摸的方式来访问全局范围。例如,以下用户定义的代码可以直接访问window
:
test = function() {
return this.window
};
return test();
这是一个很好的用途with
:根据存储在该对象中的值向对象文字添加新元素。这是我今天刚刚使用的一个示例:
我有一组可以使用的可能的牌(开口朝上、下、左或右),我想要一种快速的方法来添加一个总是在游戏开始时放置和锁定的牌列表. 我不想继续types.tbr
为列表中的每种类型输入,所以我只使用了with
.
Tile.types = (function(t,l,b,r) {
function j(a) { return a.join(' '); }
// all possible types
var types = {
br: j( [b,r]),
lbr: j([l,b,r]),
lb: j([l,b] ),
tbr: j([t,b,r]),
tbl: j([t,b,l]),
tlr: j([t,l,r]),
tr: j([t,r] ),
tl: j([t,l] ),
locked: []
};
// store starting (base/locked) tiles in types.locked
with( types ) { locked = [
br, lbr, lbr, lb,
tbr, tbr, lbr, tbl,
tbr, tlr, tbl, tbl,
tr, tlr, tlr, tl
] }
return types;
})("top","left","bottom","right");
只是想补充一下,您可以通过漂亮的语法获得“with()”功能,并且使用您自己的聪明方法没有歧义......
//utility function
function _with(context){
var ctx=context;
this.set=function(obj){
for(x in obj){
//should add hasOwnProperty(x) here
ctx[x]=obj[x];
}
}
return this.set;
}
//how calling it would look in code...
_with(Hemisphere.Continent.Nation.Language.Dialect.Alphabet)({
a:"letter a",
b:"letter b",
c:"letter c",
d:"letter a",
e:"letter b",
f:"letter c",
// continue through whole alphabet...
});//look how readable I am!!!!
..或者如果你真的想使用“with()”,没有歧义并且没有自定义方法,将它包装在一个匿名函数中并使用 .call
//imagine a deeply nested object
//Hemisphere.Continent.Nation.Language.Dialect.Alphabet
(function(){
with(Hemisphere.Continent.Nation.Language.Dialect.Alphabet){
this.a="letter a";
this.b="letter b";
this.c="letter c";
this.d="letter a";
this.e="letter b";
this.f="letter c";
// continue through whole alphabet...
}
}).call(Hemisphere.Continent.Nation.Language.Dialect.Alphabet)
然而,正如其他人所指出的那样,它有点毫无意义,因为你可以这样做......
//imagine a deeply nested object Hemisphere.Continent.Nation.Language.Dialect.Alphabet
var ltr=Hemisphere.Continent.Nation.Language.Dialect.Alphabet
ltr.a="letter a";
ltr.b="letter b";
ltr.c="letter c";
ltr.d="letter a";
ltr.e="letter b";
ltr.f="letter c";
// continue through whole alphabet...