JavaScript'in “with” ifadesinin meşru kullanımları var mı?

Alan Storm'un withifadeyle ilgili cevabımın cevabı hakkındaki yorumları beni düşündürdü. Bu özel dil özelliğini kullanmak için nadiren bir neden buldum ve nasıl sorun yaratabileceği hakkında çok fazla düşünmemiştim. Şimdi, withtuzaklarından kaçarken nasıl etkili bir şekilde kullanabileceğimi merak ediyorum .

İfadeyi nerede withfaydalı buldunuz?

Bugün bana bir başka kullanım daha oldu, bu yüzden web'de heyecanla arama yaptım ve mevcut bir sözünü buldum: Blok Kapsamı içinde Değişkenleri Tanımlama .

Arka fon

JavaScript, C ve C ++ yüzeysel benzerliğine rağmen değişkenleri tanımlandıkları bloğa dahil etmez:

var name = "Joe";
if ( true )
{
   var name = "Jack";
}
// name now contains "Jack"

Döngüde bir kapatma bildirimi, bunun hatalara yol açabileceği yaygın bir görevdir:

for (var i=0; i<3; ++i)
{
   var num = i;
   setTimeout(function() { alert(num); }, 10);
}

For döngüsü yeni bir kapsam sunmadığından, aynı num- değeriyle 2- üç fonksiyon tarafından paylaşılacaktır.

Yeni bir kapsam: letvewith

Tanıtılmasıyla letiçinde açıklamaya ES6 , bu sorunlardan kaçınmak için gerektiğinde yeni kapsamını tanıtmak için kolay hale gelir:

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

Ya da:

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 evrensel olarak kullanılabilir olana kadar, bu kullanım en yeni tarayıcılarla ve transistör kullanmak isteyen geliştiricilerle sınırlı kalmaktadır. Ancak, bu davranışı aşağıdakileri kullanarak kolayca taklit edebiliriz 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);
   }
}

Döngü artık 0 ile 2 arasında değerlere sahip üç ayrı değişken oluşturarak amaçlandığı gibi çalışmaktadır . C ++ 'daki blokların davranışından farklı olarak, blok içinde bildirilen değişkenlerin ona dahil edilmediğini unutmayın (C'de, değişkenler, bir blok, yani bir şekilde benzer). Bu davranış aslında Mozilla tarayıcılarının önceki sürümlerinde sunulan bir letblok sözdizimine oldukça benzer , ancak başka yerlerde yaygın olarak kabul edilmemiştir.

Ben with ifadesi kapsam dahilinde içe aktarmanın basit bir biçimi olarak kullanıyorum. Diyelim ki bir çeşit biçimlendirici var. Yazmak yerine:

markupbuilder.div(
  markupbuilder.p('Hi! I am a paragraph!',
    markupbuilder.span('I am a span inside a paragraph')
  )
)

Bunun yerine şunu yazabilirsiniz:

with(markupbuilder){
  div(
    p('Hi! I am a paragraph!',
      span('I am a span inside a paragraph')
    )
  )
}

Bu kullanım durumunda, herhangi bir ödev yapmıyorum, bu yüzden bununla ilgili belirsizlik problemim yok.

Önceki yorumlarımın da belirttiği withgibi, herhangi bir durumda ne kadar cazip olursa olsun güvenle kullanabileceğinizi düşünmüyorum . Sorun doğrudan burada ele alınmadığından tekrarlayacağım. Aşağıdaki kodu düşünün

user = {};
someFunctionThatDoesStuffToUser(user);
someOtherFunction(user);

with(user){
    name = 'Bob';
    age  = 20;
}

Bu işlev çağrılarını dikkatle incelemeden, bu kod çalıştıktan sonra programınızın durumunun ne olacağını söylemenin bir yolu yoktur. Eğer user.namezaten kuruldu, artık olacak Bob. Ayarlanmadıysa, global namebaşlatılacak veya olarak değiştirilecek Bobve usernesne bir nameözellik olmadan kalacaktır .

Hatalar olur. Eğer kullanırsanız ile size en sonunda bunu ve program başarısız olur şansını artıracaktır. Daha da kötüsü, kasıtlı olarak veya yazar aracılığıyla yapının bu tuhaflığını bilmeden global ile blokta çalışan çalışma koduyla karşılaşabilirsiniz. Bu, bir anahtar üzerinde düşme ile karşılaşmak gibi, yazarın bunu amaçlayıp yapmadığına dair hiçbir fikriniz yok ve kodu "düzeltmenin" bir gerileme getirip getirmeyeceğini bilmenin bir yolu yok.

Modern programlama dilleri özelliklerle doludur. Yıllar süren kullanımdan sonra bazı özelliklerin kötü olduğu keşfedilmiştir ve bunlardan kaçınılmalıdır. Javascriptler withbunlardan biri.

Aslında bu withifadeyi son zamanlarda inanılmaz faydalı buldum . Şu anki projemi başlatana kadar bu teknik hiç aklıma gelmedi - JavaScript ile yazılmış bir komut satırı konsolu. Özel komutların konsola girilebildiği Firebug / WebKit konsol API'lerini taklit etmeye çalışıyordum, ancak global kapsamdaki herhangi bir değişkeni geçersiz kılmıyorlar. Shog9'un mükemmel cevabına yapılan yorumlarda bahsettiğim bir sorunun üstesinden gelmeye çalışırken bunu düşündüm .

Bu etkiyi elde etmek için, küresel kapsamın arkasındaki bir kapsamı "katmanlamak" için ifadeleri olan iki tane kullandım:

with (consoleCommands) {
    with (window) {
        eval(expression); 
    }
}

Bu teknikle ilgili en iyi şey, performans dezavantajlarının yanı sıra, withifadenin olağan korkularından muzdarip olmamasıdır , çünkü yine de küresel kapsamda değerlendiriyoruz - sözde kapsamımızın dışında değişkenlerin olma tehlikesi yok değiştirilmiş.

Sürprizime göre, başka bir yerde kullanılan aynı tekniği - Chromium kaynak kodu !

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

DÜZENLEME: Sadece Firebug kaynağını kontrol ettiler, daha da fazla katman için 4 ifadeleri bir araya getirdiler . Çılgın!

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

Evet, evet ve evet. Çok meşru bir kullanım var. İzlemek:

with (document.getElementById("blah").style) {
    background = "black";
    color = "blue";
    border = "1px solid green";
}

Temelde diğer herhangi bir DOM veya CSS kanca ile fantastik kullanımları vardır. "CloneNode" undefined olacak ve yolumdan çıkıp mümkün kılmaya karar vermedikçe küresel kapsama geri dönecek gibi değil.

Crockford'un hız şikayeti, ile yeni bir bağlamın yaratılmasıdır. Bağlamlar genellikle pahalıdır. Katılıyorum. Ancak yeni bir div oluşturduysanız ve css'inizi ayarlamak için elinizde bir çerçeve yoksa ve 15 veya daha fazla CSS özelliği el ile ayarlamanız gerekiyorsa, bir bağlam oluşturmak muhtemelen değişken oluşturma ve 15 dereferences'dan daha ucuz olacaktır:

var element = document.createElement("div"),
    elementStyle = element.style;

elementStyle.fontWeight = "bold";
elementStyle.fontSize = "1.5em";
elementStyle.color = "#55d";
elementStyle.marginLeft = "2px";

vb...

withBelirsizlik olmadan fayda sağlamak için küçük bir yardımcı işlev tanımlayabilirsiniz :

var with_ = function (obj, func) { func (obj); };

with_ (object_name_here, function (_)
{
    _.a = "foo";
    _.b = "bar";
});

Aşağıdakileri yapabileceğiniz için buna değmez gibi görünüyor:

var o = incrediblyLongObjectNameThatNoOneWouldUse;
o.name = "Bob";
o.age = "50";

Hiç kullanmıyorum, bir neden görmüyorum ve tavsiye etmiyorum.

Sorun withtam o sayısız sözcük optimizasyonlar engelleyen bir ECMAScript uygulaması gerçekleştirebilirsiniz. Hızlı JIT tabanlı motorların yükselişi göz önüne alındığında, bu sorun yakın gelecekte daha da önemli hale gelecektir.

Daha withtemiz yapılara izin verebilir gibi görünebilir (örneğin, ortak bir anonim işlev sarıcı yerine yeni bir kapsam sunarken veya ayrıntılı örtüşme yerine), ancak buna değmez . Azalan performansın yanı sıra, her zaman yanlış bir nesnenin bir özelliğine (enjekte edilen kapsamdaki bir nesnede özellik bulunmadığında) atanma ve belki de küresel değişkenleri yanlış sokma tehlikesi vardır. IIRC, ikinci mesele Crockford'u kaçınmak için motive eden konudur with.

Visual Basic.NET benzer bir Withifadeye sahiptir. Bunu kullanmanın daha yaygın yollarından biri, bir dizi özelliği hızlı bir şekilde ayarlamaktır. Onun yerine:

someObject.Foo = ''
someObject.Bar = ''
someObject.Baz = ''

, Yazabilirim:

With someObject
    .Foo = ''
    .Bar = ''
    .Baz = ''
End With

Bu sadece tembellik meselesi değil. Ayrıca çok daha okunabilir bir kod oluşturur. Ve JavaScript'ten farklı olarak, ifadeden etkilenen her şeyin bir .(nokta) ile ön ekini yapmanız gerektiğinden belirsizliğe maruz kalmaz . Yani, aşağıdaki ikisi açıkça farklıdır:

With someObject
    .Foo = ''
End With

vs.

With someObject
    Foo = ''
End With

Birincisi someObject.Foo; ikincisi dışarıdakiFoo kapsamdadır . someObject

Belirsizlik riski çok yüksek olduğundan, JavaScript'in ayrım eksikliğinin Visual Basic'in varyantından çok daha az kullanışlı olduğunu düşünüyorum. Bunun dışında, withdaha iyi okunabilirlik için hala güçlü bir fikir.

withBir nesnenin içeriğini, bu küçük şablon motoruyla yapıldığı gibi, bir bloğa yerel değişkenler olarak tanıtmak için kullanabilirsiniz .

"İle" kullanmak kodunuzu daha kuru hale getirebilir.

Aşağıdaki kodu göz önünde bulundurun:

var photo = document.getElementById('photo');
photo.style.position = 'absolute';
photo.style.left = '10px';
photo.style.top = '10px';

Aşağıdakilere kurutabilirsiniz:

with(document.getElementById('photo').style) {
  position = 'absolute';
  left = '10px';
  top = '10px';
}

Sanırım bu, okunabilirlik veya ifade etme tercihiniz olup olmadığına bağlıdır.

İlk örnek daha okunaklı ve muhtemelen çoğu kod için önerilir. Ama çoğu kod zaten oldukça uysal. İkincisi biraz daha belirsizdir, ancak kod boyutunu ve gereksiz değişkenleri azaltmak için dilin etkileyici doğasını kullanır.

Java veya C # gibi kişilerin ilk yolu (object.member) seçeceğini ve Ruby veya Python'u tercih edenlerin ikincisini seçeceğini hayal ediyorum.

Bence bariz kullanım bir kısayol. Örneğin, bir nesneyi başlatırsanız, çok sayıda "NesneAdı" yazmanız yeterlidir. Bir çeşit lisp'in "yuvaları" gibi

(with-slots (foo bar) objectname
   "some code that accesses foo and bar"

ki bu yazı ile aynı

"some code that accesses (slot-value objectname 'foo) and (slot-value objectname 'bar)""

Bunun neden bir kısayol olduğu daha açıktır ve diliniz "Objectname.foo" 'ya izin veriyor ancak yine de.

Delphi ile deneyime sahip, bunu kullanarak söyleyebilirim ile muhtemelen güvenliğini doğrulamak için statik kod analizi erişimi olan JavaScript asgarileştirir algoritması çeşit tarafından gerçekleştirilen bir son çare boyutu optimizasyonu, olmalıdır.

Eğer with ifadesinin liberal kullanımı ile karşılaşabilirsiniz kapsam sorunları a ** bir kraliyet ağrısı olabilir ve kimsenin kodunda neler olduğunu anlamak için bir hata ayıklama oturumu yaşamak istemem. , yalnızca hedeflediğiniz genel veya dış kapsam değişkeniniz yerine bir nesne üyesi veya yanlış yerel değişken yakaladığını bulmak için.

VB ile bu kapsam belirleme belirsizliği giderecek noktalar ihtiyacı var, ancak Delphi ki açıklamada, iyidir ile deyimi bir hairtrigger ile dolu bir silah gibi, ve javascript biri aynı uyarıyı gerektirecek yeterli benzerlik sanki bana bakıyor.

İle kullanılması önerilmez ve ECMAScript 5 katı modda yasaktır. Önerilen alternatif, özelliklerini geçici bir değişkene erişmek istediğiniz nesneyi atamaktır.

Kaynak: Mozilla.org

With ifadesi kod boyutunu azaltmak veya özel sınıf üyeleri için kullanılabilir, örnek:

// 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();

Kapsamı değiştirmek isterseniz, çalışma zamanında manipüle edebileceğiniz kendi global kapsamınız için gerekli olan with-ifadesi çok kullanışlıdır. Sabitleri veya genellikle "toUpper", "toLower" veya "isNumber", "clipNumber" gibi bazı yardımcı işlevleri koyabilirsiniz.

Sık sık okuduğum kötü performans hakkında: Bir fonksiyonun kapsamının performans üzerinde herhangi bir etkisi olmayacaktır, aslında FF'mde kapsamlı bir fonksiyon, kapatılmamış olandan daha hızlı çalışır:

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" );

Bu nedenle, yukarıda belirtilen şekilde kullanılan with-ifadesinin performans üzerinde olumsuz bir etkisi yoktur, ancak kod boyutunu azalttığı için iyi bir olanı, mobil cihazlarda bellek kullanımını etkiler.

İle birlikte kullanmak, her şey artık arama için ekstra bir kapsamda sarıldığından, birçok uygulamada kodunuzu yavaşlatır. JavaScript ile birlikte kullanmanın meşru bir nedeni yoktur.

Ben with-deyimi bir şablon dili JavaScript dönüştürürken kullanışlı gelebilir düşünüyorum. Örnek için JST içinde temel2 ama bunu daha sık gördük.

Bunu açıklama olmadan programlayabileceğine katılıyorum. Ancak herhangi bir sorun yaratmadığı için meşru bir kullanımdır.

Göreceli olarak karmaşık bir ortamda çalışan kodu bir kaba koymak için iyidir: Ben "pencere" için yerel bir bağlanma yapmak için kullanın ve böyle bir web tarayıcısı için amaçlanan kod çalıştırmak için kullanın.

Nesne gerçek kullanımı ilginç, bir kapatma kullanmak için bir açılan yerine gibi ilginç olduğunu düşünüyorum

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

veya kapanışa eşdeğer ifade içeren

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

Ben gerçek risk yanlışlıkla with deyiminin bir parçası olmayan değişkenleri minimize olduğunu düşünüyorum, bu yüzden nesne değişmezi ile geçmesini seviyorum, tam olarak kodunda eklenen bağlamda ne olacağını görebilirsiniz.

Bu belirsizliğin bir kısmını şu withifadeyle ortadan kaldıran bir "birleştirme" işlevi oluşturdum :

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

Bunu benzer şekilde kullanabilirim with, ancak etkilemeyi düşünmediğim herhangi bir kapsamı etkilemeyeceğini biliyorum.

Kullanımı:

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

Bazı kısa kod parçaları için, ben gibi trigonometrik fonksiyonlar kullanmak istiyorum sin, cosderece modda yerine radyan modunda vb. Bu amaçla bir AngularDegreenesne kullanıyorum:

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

Sonra trigonometrik fonksiyonları bir withblokta başka bir dil gürültüsü olmadan derece modunda kullanabilirim :

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

Bunun anlamı: Bir nesneyi, doğrudan erişim için sınırlı bir kod bölgesinde etkinleştirdiğim bir işlevler koleksiyonu olarak kullanıyorum. Bunu faydalı buluyorum.

Bence yararlılığı withkodunuzun ne kadar iyi yazılmış olduğuna bağlı olabilir. Örneğin, şöyle görünen bir kod yazıyorsanız:

var sHeader = object.data.header.toString();
var sContent = object.data.content.toString();
var sFooter = object.data.footer.toString();

withbunu yaparak kodun okunabilirliğini artıracağını iddia edebilirsiniz :

var sHeader = null, sContent = null, sFooter = null;
with(object.data) {
    sHeader = header.toString();
    sContent = content.toString();
    sFooter = content.toString();
}

Tersine, Demeter Yasasını ihlal ettiğiniz iddia edilebilir , ancak yine de belki değil. Ben kazıyorum =).

Her şeyden önce, Douglas Crockford önerir biliyoruz değil kullanarak with. Burada ilgili blog yayınına withve alternatiflerine göz atmanızı tavsiye ediyorum .

İle kullanmak sadece object.member yazmaktan daha okunabilir olduğunu gerçekten görmüyorum. Daha az okunabilir olduğunu sanmıyorum, ama daha okunabilir olduğunu da sanmıyorum.

Lassevk'in dediği gibi, kesinlikle çok açık "object.member" sözdizimini kullanmaktan çok daha fazla hataya açık olacağını görebiliyorum.

W3schools http://www.w3schools.com/js/js_js_form_validation.asp adresindeki bir formun doğrulanmasını, 'e-posta' adında bir girdi bulmak için nesne formunun "taranması" gereken yerde görmelisiniz.

Ama ben herhangi bir form alan adı veya adından bağımsız olarak, tüm alanları boş değil doğrulamak HERHANGİ bir form almak için değiştirdim. Sadece metin alanlarını test ettim.

Ancak with () işleri kolaylaştırdı. İşte kod:

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

CoffeeScript'in Coco çatalı bir withanahtar kelimeye sahiptir, ancak yalnızca this( @CoffeeScript / Coco'daki gibi yazılabilir ) blok içindeki hedef nesneye ayarlar . Bu, belirsizliği ortadan kaldırır ve ES5'in katı mod uyumluluğunu sağlar:

with long.object.reference
  @a = 'foo'
  bar = @b

İşte bunun için iyi bir kullanım with: bir Nesne Değişmezine, bu Nesnede depolanan değerlere dayalı yeni öğeler ekleme. İşte bugün kullandığım bir örnek:

Kullanılabilecek bir dizi olası karo vardı (açıklıklar üst, alt, sol veya sağa bakacak şekilde) ve oyunun başında her zaman yerleştirilecek ve kilitlenecek karoların bir listesini eklemenin hızlı bir yolunu istedim. . types.tbrListedeki her tür için yazmaya devam etmek istemedim , bu yüzden yeni kullandım 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");

Requir.js kullanırken açıklığı açıkça yönetmek zorunda kalmamak için ile kullanabilirsiniz:

var modules = requirejs.declare([{
    'App' : 'app/app'
}]);

require(modules.paths(), function() { with (modules.resolve(arguments)) {
    App.run();
}});

Requijs.declare uygulaması:

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

Andy E'nin Shog9'un cevabının yorumlarında işaret ettiği gibi, bu potansiyel olarak beklenmedik davranış, withbir nesne değişmeziyle kullanıldığında ortaya çıkar :

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]"
  }
}

Beklenmedik davranış zaten birwith .

Bu tekniği gerçekten hala kullanmak istiyorsanız, en azından boş prototipli bir nesne kullanın.

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"
  }
}

Ancak bu yalnızca ES5 + 'da çalışır. Ayrıca kullanmayın with.

Ben kullanıcıların uygulama bölümlerinin davranışını değiştirmek için kod yüklemek için izin verecek bir proje üzerinde çalışıyorum. Bu senaryoda, withkodlarını ile uğraşmak istiyorum kapsam dışında bir şey değiştirmesini engellemek için bir cümle kullanıyorum . Bunu yapmak için kullandığım kodun (basitleştirilmiş) kısmı:

// 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);

Bu kod, (bir şekilde) kullanıcı tanımlı kodun, window ne de bir kapatma yoluyla yerel değişkenlerimden herhangi .

Sadece bilge bir kelime olarak, ben hala küresel kapsama erişmek için diğer gizli görgü kullanmadığından emin olmak için kullanıcı tarafından gönderilen kod üzerinde statik kod kontrolleri yapmak zorunda. Örneğin, aşağıdaki kullanıcı tanımlı kod aşağıdakilere doğrudan erişim sağlar window:

test = function() {
     return this.window
};
return test();

Benim

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
}

indirgenir

with(gapi.drive.realtime.ErrorType) {switch(e.type) {
    case TOKEN_REFRESH_REQUIRED: blah
    case CLIENT_ERROR: blah
    case NOT_FOUND: blah
}}

Çok düşük kaliteli koda güvenebilir misiniz? Hayır, bunun kesinlikle okunamaz hale getirildiğini görüyoruz. Bu örnek inkar edilemez bir şekilde okunabilirliği doğru alıyorsam with-deyimine gerek olmadığını kanıtlar;)