var funcs = [];
// let's create 3 functions
for (var i = 0; i < 3; i++) {
  // and store them in funcs
  funcs[i] = function() {
    // each should log its value.
    console.log("My value: " + i);
  };
}
for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

Bunu çıktılar:

Değerim: 3
Değerim: 3
Değerim: 3

Oysa ben çıktı istiyorum:

Değerim: 0
Değerim: 1
Değerim: 2

Aynı sorun, işlevi çalıştırma gecikmesine olay dinleyicileri neden olduğunda da oluşur:

var buttons = document.getElementsByTagName("button");
// let's create 3 functions
for (var i = 0; i < buttons.length; i++) {
  // as event listeners
  buttons[i].addEventListener("click", function() {
    // each should log its value.
    console.log("My value: " + i);
  });
}

<button>0</button>
<br />
<button>1</button>
<br />
<button>2</button>

… Veya eşzamansız kod, örneğin Promises kullanımı:

// Some async wait function
const wait = (ms) => new Promise((resolve, reject) => setTimeout(resolve, ms));

for (var i = 0; i < 3; i++) {
  // Log `i` as soon as each promise resolves.
  wait(i * 100).then(() => console.log(i));
}

Düzenleme: Ayrıca görünür for inve for ofdöngüler:

const arr = [1,2,3];
const fns = [];

for(i in arr){
  fns.push(() => console.log(`index: ${i}`));
}

for(v of arr){
  fns.push(() => console.log(`value: ${v}`));
}

for(f of fns){
  f();
}

Bu temel sorunun çözümü nedir?

Sorun, ianonim işlevlerinizin her birinde değişkenin , işlevin dışındaki aynı değişkene bağlı olmasıdır.

Klasik çözüm: Kapaklar

Yapmak istediğiniz her bir fonksiyon içindeki değişkeni fonksiyonun dışındaki ayrı, değişmeyen bir değere bağlamaktır:

var funcs = [];

function createfunc(i) {
  return function() {
    console.log("My value: " + i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}

for (var j = 0; j < 3; j++) {
  // and now let's run each one to see
  funcs[j]();
}

JavaScript - yalnızca işlev kapsamı içinde blok kapsamı olmadığından, işlev oluşturmayı yeni bir işlevde sararak, "i" değerinin istediğiniz gibi kalmasını sağlarsınız.

ES5.1 çözümü: forEach

Array.prototype.forEachFonksiyonun nispeten yaygın kullanılabilirliği ile (2015'te), öncelikle bir değer dizisi üzerinde yinelemeyi içeren durumlarda, .forEach()her yineleme için ayrı bir kapanış elde etmek için temiz, doğal bir yol sağladığını belirtmek gerekir. Yani, değerler içeren bir dizi diziniz olduğu (DOM referansları, nesneler, ne olursa olsun) ve her bir öğeye özgü geri aramaların ayarlanmasından kaynaklanan sorun varsa, bunu yapabilirsiniz:

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

Fikir, .forEachdöngü ile kullanılan geri çağrı işlevinin her çağrılmasının kendi kapanışı olacağıdır. Bu işleyiciye iletilen parametre, yinelemenin söz konusu adımına özgü dizi öğesidir. Eşzamansız bir geri çağrıda kullanılırsa, yinelemenin diğer adımlarında oluşturulan diğer geri çağrılarla çarpışmaz.

JQuery'de çalışıyorsanız, $.each()işlev size benzer bir yetenek verir.

ES6 çözümü: let

ECMAScript 6 (ES6), taban değişkenlerden farklı kapsamda yeni letve constanahtar kelimeler sunar var. Örneğin, lettabanlı bir dizine sahip bir döngüde, döngüdeki her yinelemenin idöngü kapsamına sahip yeni bir değişkeni olacaktır , bu nedenle kodunuz beklediğiniz gibi çalışır. Birçok kaynak var, ancak 2ality'nin blok kapsamındaki yazıyı büyük bir bilgi kaynağı olarak öneriyorum .

for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value: " + i);
  };
}

Yine de, IE9-IE11 ve Edge'in Edge 14'ten önce desteklediğine dikkat edin, ancak letyukarıdakileri yanlış alın ( iher seferinde yeni bir tane oluşturmazlar , bu nedenle yukarıdaki tüm işlevler, kullandığımız gibi 3'ü kaydeder var). Edge 14 sonunda bunu düzeltiyor.

Deneyin:

var funcs = [];
    
for (var i = 0; i < 3; i++) {
    funcs[i] = (function(index) {
        return function() {
            console.log("My value: " + index);
        };
    }(i));
}

for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Düzenle (2014):

Şahsen ben @ Aust'in kullanımla ilgili daha yeni cevabı.bind şimdi böyle bir şey yapmanın en iyi yolu olduğunu düşünüyorum. Ayrıca 's _.partialile uğraşmak ya da karışıklık istediğinizde lo-dash / alt çizgi bind' s thisArg.

Henüz bahsedilmeyen bir başka yol da Function.prototype.bind

var funcs = {};
for (var i = 0; i < 3; i++) {
  funcs[i] = function(x) {
    console.log('My value: ' + x);
  }.bind(this, i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

GÜNCELLEME

@Squint ve @mekdev'in de işaret ettiği gibi, önce döngü dışında işlev oluşturarak ve ardından döngü içindeki sonuçları bağlayarak daha iyi performans elde edersiniz.

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [];

for (var i = 0; i < 3; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Bir Dizin değişkenini kuşatmanın en basit ve en okunabilir yolu: Hemen Çağırılmış İşlev İfadesi kullanarak :

for (var i = 0; i < 3; i++) {

    (function(index) {

        console.log('iterator: ' + index);
        //now you can also loop an ajax call here 
        //without losing track of the iterator value:   $.ajax({});
    
    })(i);

}

Bu, yineleyiciyi itanımladığımız anonim işleve gönderir index. Bu, değişkenin iIIFE içindeki herhangi bir eşzamansız işlevsellikte daha sonra kullanılmak üzere kaydedildiği bir kapak oluşturur .

Partiye biraz geç kaldım, ama bugün bu sorunu araştırıyordum ve cevapların birçoğunun Javascript'in kapsamları nasıl ele aldığını tam olarak ele almadığını fark ettim, bu da esasen bununla ilgilidir.

Diğerlerinin de belirttiği gibi, sorun iç fonksiyonun aynı ideğişkene başvurmasıdır. Öyleyse neden her bir yinelemede yeni bir yerel değişken oluşturmuyoruz ve bunun yerine iç fonksiyona başvuruyor?

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    var ilocal = i; //create a new local variable
    funcs[i] = function() {
        console.log("My value: " + ilocal); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Daha önce olduğu gibi, her iç fonksiyonun atanan son değeri verdiği yerde i, şimdi her iç fonksiyon sadece atanmış olan son değeri verir ilocal. Ancak her yinelemenin kendine ait olmaması gerekir ilocalmi?

Anlaşılan, sorun bu. Her yineleme aynı kapsamı paylaşır, bu yüzden ilkinden sonraki her yineleme sadece üzerine yazılır ilocal. Gönderen MDN'yi :

Önemli: JavaScript'in blok kapsamı yoktur. Bir blokla eklenen değişkenler, içeren fonksiyona veya komut dosyasına dahil edilir ve bunları ayarlama etkileri, bloğun kendisinin ötesinde kalır. Başka bir deyişle, blok ifadeler bir kapsam sunmaz. "Bağımsız" bloklar geçerli sözdizimi olsa da, JavaScript'te bağımsız bloklar kullanmak istemezsiniz, çünkü C veya Java'da bu tür bloklar gibi bir şey yaptığını düşünüyorsanız, yaptıklarını düşündüklerini yapmazlar.

Vurgu için tekrarlandı:

JavaScript'in blok kapsamı yoktur. Bir blokla sunulan değişkenler, içeren fonksiyona veya komut dosyasına dahil edilir

Bunu ilocalher bir yinelemede beyan etmeden önce kontrol ederek görebiliriz :

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
  console.log(ilocal);
  var ilocal = i;
}

İşte bu yüzden bu hata çok zor. Bir değişkeni yeniden bildiriyor olsanız bile, Javascript bir hata atmaz ve JSLint bir uyarı bile atmaz. Bu yüzden bunu çözmenin en iyi yolu, temel olarak Javascript'te iç fonksiyonların dış değişkenlere erişebileceği fikridir, çünkü iç kapsamlar dış kapsamları "içine alır".

Bu aynı zamanda, dış fonksiyonlar geri gelse bile iç fonksiyonların dış değişkenleri "tutunması" ve canlı tutulması anlamına gelir. Bunu kullanmak için, yalnızca yeni bir kapsam oluşturmak, yeni kapsamda beyan etmek ilocalve kullanan bir iç işlev döndürmek için bir sarmalayıcı işlevi oluşturur ve çağırırız ilocal(daha fazla açıklama aşağıdadır):

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() { //create a new scope using a wrapper function
        var ilocal = i; //capture i into a local var
        return function() { //return the inner function
            console.log("My value: " + ilocal);
        };
    })(); //remember to run the wrapper function
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Bir sarıcı işlevi içinde iç işlev oluşturmak, iç işleve yalnızca erişebileceği özel bir ortam, bir "kapatma" sağlar. Böylece, sarma işlevini her çağırdığımızda, kendi ayrı ortamıyla yeni bir iç işlev yaratırız, bu da ilocaldeğişkenlerin birbiriyle çarpışmamasını ve üzerine yazmamasını sağlar. Birkaç küçük optimizasyon, diğer birçok SO kullanıcısının verdiği nihai cevabı verir:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = wrapper(i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//creates a separate environment for the inner function
function wrapper(ilocal) {
    return function() { //return the inner function
        console.log("My value: " + ilocal);
    };
}

Güncelleme

ES6 artık genel kullanıma sunulduğunda, artık letblok kapsamındaki değişkenler oluşturmak için yeni anahtar kelimeyi kullanabiliriz :

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
    funcs[i] = function() {
        console.log("My value: " + i); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
    funcs[j]();
}

Bak şimdi ne kadar kolay! Daha fazla bilgi için bilgilerimin dayandığı bu yanıta bakın .

ES6 artık geniş çapta desteklendiğinde, bu sorunun en iyi yanıtı değişti. ES6 bu durum için letve constanahtar sözcüklerini sağlar . Kapaklarla uğraşmak yerine, sadece şöyle letbir döngü kapsamı değişkeni ayarlamak için kullanabiliriz :

var funcs = [];

for (let i = 0; i < 3; i++) {          
    funcs[i] = function() {            
      console.log("My value: " + i); 
    };
}

valdaha sonra, döngünün belirli bir dönüşüne özgü bir nesneyi işaret eder ve ek kapatma gösterimi olmadan doğru değeri döndürür. Bu açıkça bu sorunu önemli ölçüde basitleştirir.

constletdeğişken adının ilk atamadan sonra yeni bir referansa geri yüklenemeyeceği ek kısıtlamaya benzer .

Tarayıcı desteği, tarayıcıların en son sürümlerini hedefleyen kullanıcılar için artık burada. const/ letşu anda en yeni Firefox, Safari, Edge ve Chrome'da desteklenmektedir. Ayrıca Düğüm'de desteklenir ve Babel gibi oluşturma araçlarından yararlanarak her yerde kullanabilirsiniz. Burada çalışan bir örnek görebilirsiniz: http://jsfiddle.net/ben336/rbU4t/2/

Dokümanlar burada:

• const
• İzin Vermek

Yine de, IE9-IE11 ve Edge'in Edge 14'ten önce desteklediğine dikkat edin, ancak letyukarıdakileri yanlış alın ( iher seferinde yeni bir tane oluşturmazlar , bu nedenle yukarıdaki tüm işlevler, kullandığımız gibi 3'ü kaydeder var). Edge 14 sonunda bunu düzeltiyor.

Bunu söylemenin başka bir yolu i, fonksiyonunuzdaki fonksiyonun, fonksiyonun yaratılması sırasında değil, fonksiyonun yaratılması sırasında bağlı olmasıdır.

Kapatma ioluşturduğunuzda, kapama oluştururken olduğu gibi bir kopyası değil, dış kapsamda tanımlanan değişkene bir başvurudır. Uygulama sırasında değerlendirilecektir.

Diğer yanıtların çoğu, sizin için değeri değiştirmeyecek başka bir değişken oluşturarak geçici çözüm yolları sunar.

Sadece netlik için bir açıklama ekleyeceğimi düşündüm. Bir çözüm için, şahsen, Harto'yla birlikte giderdim, çünkü buradaki cevaplardan bunu yapmanın en açıklayıcı yolu. Gönderilen kodlardan herhangi biri işe yarayacaktır, ancak neden yeni bir değişken (Freddy ve 1800'ler) beyan ettiğimi veya garip gömülü kapatma sözdizimine (apphacker) açıklamak için bir yığın yorum yazmak zorunda kalmadan bir kapanış fabrikası tercih ediyorum.

Anlamanız gereken şey, Javascript'teki değişkenlerin kapsamının işleve dayanmasıdır. Bu, blok kapsamına sahip olduğunuz c # 'dan daha önemli bir farktır ve sadece değişkeni for içinde birine kopyalamak işe yarayacaktır.

Değişkenin şimdi işlev kapsamına sahip olması nedeniyle, apphacker'ın yanıtı gibi işlevi döndürmeyi değerlendiren bir işlevde kaydırmak hile yapar.

Blok kapsam kuralının kullanılmasına izin veren var yerine bir let anahtar sözcüğü de vardır. Bu durumda for içinde bir değişken tanımlamak hile yapar. Bununla birlikte, let anahtar sözcüğü uyumluluk nedeniyle pratik bir çözüm değildir.

var funcs = {};

for (var i = 0; i < 3; i++) {
  let index = i; //add this
  funcs[i] = function() {
    console.log("My value: " + index); //change to the copy
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Bu, Bjorn'un (apphacker) benzeri, teknikte, değişken değerini, parametre olarak geçirmektense bir parametre olarak atamak yerine atamanıza izin veren başka bir varyasyon:

var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() {
        var index = i;
        return function() {
            console.log("My value: " + index);
        }
    })();
}

Hangi tekniği kullanırsanız kullanın, indexdeğişkenin iç fonksiyonun döndürülen kopyasına bağlı bir tür statik değişken haline geldiğini unutmayın. Yani, değerindeki değişiklikler çağrılar arasında korunur. Çok kullanışlı olabilir.

Bu, JavaScript'te kapak kullanımıyla ilgili yaygın hatayı açıklar.

İşlev yeni bir ortam tanımlar

Düşünmek:

function makeCounter()
{
  var obj = {counter: 0};
  return {
    inc: function(){obj.counter ++;},
    get: function(){return obj.counter;}
  };
}

counter1 = makeCounter();
counter2 = makeCounter();

counter1.inc();

alert(counter1.get()); // returns 1
alert(counter2.get()); // returns 0

Her makeCounterçağrıldığında, {counter: 0}yeni bir nesne oluşturulur. Ayrıca, obj yeni nesneye başvuruda bulunmak için yeni bir kopyası da oluşturulur. Bu nedenle, counter1ve counter2birbirinden bağımsızdır.

Döngülerdeki kapaklar

Döngüde bir kapatma kullanmak zor.

Düşünmek:

var counters = [];

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = {
      inc: function(){obj.counter++;},
      get: function(){return obj.counter;}
    }; 
  }
}

makeCounters(2);

counters[0].inc();

alert(counters[0].get()); // returns 1
alert(counters[1].get()); // returns 1

Bildirim o counters[0]ve counters[1]vardır değil bağımsız. Aslında, aynı şekilde çalışıyorlar obj!

Bunun nedeni obj, belki de performans nedenleriyle, döngünün tüm yinelemelerinde paylaşılan tek bir kopyasının olmasıdır . {counter: 0}Her yinelemede yeni bir nesne oluştursa da , aynı kopyası objen yeni nesneye referansla güncellenir.

Çözüm başka bir yardımcı işlev kullanmaktır:

function makeHelper(obj)
{
  return {
    inc: function(){obj.counter++;},
    get: function(){return obj.counter;}
  }; 
}

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = makeHelper(obj);
  }
}

Bunun nedeni, doğrudan işlev kapsamındaki yerel değişkenlere ve işlev bağımsız değişkenlerine girişte yeni kopyalar tahsis edilmesidir.

En basit çözüm,

Kullanmak yerine:

var funcs = [];
for(var i =0; i<3; i++){
    funcs[i] = function(){
        alert(i);
    }
}

for(var j =0; j<3; j++){
    funcs[j]();
}

3 kez "2" uyarısı verir. Bunun nedeni, döngü için oluşturulan anonim işlevlerin aynı kapatmayı paylaşması ve bu kapatılmanın değerinin iaynı olmasıdır. Paylaşılan kapanmayı önlemek için bunu kullanın:

var funcs = [];
for(var new_i =0; new_i<3; new_i++){
    (function(i){
        funcs[i] = function(){
            alert(i);
        }
    })(new_i);
}

for(var j =0; j<3; j++){
    funcs[j]();
}

Bunun arkasındaki fikir, for döngüsünün tüm gövdesini bir IIFE (Hemen Çağırılmış Fonksiyon İfadesi) ile kapsüllemek ve new_ibir parametre olarak geçmek ve onu yakalamaktır i. Anonim işlev hemen yürütüldüğünden, ideğer anonim işlev içinde tanımlanan her işlev için farklıdır.

Bu çözüm, bu sorundan muzdarip orijinal kodda minimum değişiklikler gerektireceğinden, bu tür bir soruna uyacak gibi görünüyor. Aslında, bu tasarım gereğidir, hiç bir sorun olmamalı!

bunu daha kısa olanı dene

• dizi yok

• döngü için ekstra yok

for (var i = 0; i < 3; i++) {
    createfunc(i)();
}

function createfunc(i) {
    return function(){console.log("My value: " + i);};
}

http://jsfiddle.net/7P6EN/

İşte basit bir çözüm forEach(IE9'a geri çalışır):

var funcs = [];
[0,1,2].forEach(function(i) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
})
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Baskılar:

My value: 0
My value: 1
My value: 2

OP tarafından gösterilen kodla ilgili ana sorun i, ikinci döngüye kadar asla okunmamasıdır. Göstermek için, kodun içinde bir hata gördüğünüzü hayal edin

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

Hata funcs[someIndex], yürütülene kadar gerçekleşmez (). Aynı mantığı kullanarak, değerinin ide bu noktaya kadar toplanmadığı anlaşılmalıdır . Orijinal döngü bittiğinde, koşulun başarısız olmasına ve döngü sonlanmasına neden olan değeri i++getirir . Bu noktada, kullanılır ve kullanıldığında ve değerlendirildiğinde, her seferinde 3'tür.i3i < 3i3funcs[someIndex]()i

Bunu aşmak iiçin, karşılaşıldığını değerlendirmelisiniz . Bunun halihazırda funcs[i](3 benzersiz dizin olduğu yerde) şeklinde gerçekleştiğini unutmayın. Bu değeri elde etmenin birkaç yolu vardır. Birincisi, onu burada zaten çeşitli şekillerde gösterilen bir işleve parametre olarak iletmektir.

Başka bir seçenek de değişkeni kapatabilecek bir işlev nesnesi oluşturmaktır. Bu şekilde başarılabilir

jsFiddle Demo

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

JavaScript işlevleri, bildirim üzerine eriştikleri kapsamı "kapatır" ve bu kapsamdaki değişkenler değişse bile bu kapsama erişimi korur.

var funcs = []

for (var i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

Yukarıdaki dizideki her işlev, global kapsamı kapatır (yalnızca, bildirildikleri kapsam olduğu için global).

Daha sonra bu işlevler i, global kapsamdaki en güncel değerin günlüğe kaydedilmesiyle çağrılır . Kapanmanın büyüsü ve hayal kırıklığı bu.

"JavaScript İşlevleri, bildirildikleri kapsamı kapatır ve kapsamın içindeki değişken değerler değişse bile bu kapsama erişimi korur."

Kullanma letyerine varyeni bir kapsam her oluşturarak çözer, bu for, her bir fonksiyon üzerinde kapatılması için bir ayrı kapsamı oluşturma ilmek çalışır. Diğer çeşitli teknikler de aynı şeyi ekstra işlevlerle yapar.

var funcs = []

for (let i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

( letdeğişkenleri blok haline getirir. Bloklar kıvırcık parantezlerle belirtilir, ancak for döngüsü için başlatma değişkeninin, ibizim durumumuzda parantez içinde bildirildiği kabul edilir.)

Çeşitli çözümleri okuduktan sonra, bu çözümlerin çalışmasının nedeninin kapsam zinciri kavramına güvenmek olduğunu eklemek isterim . JavaScript, yürütme sırasında bir değişkeni çözme biçimidir.

• Her bir işlev tanımı, tarafından bildirilen tüm yerel değişkenleri varve bunun değişkenlerini içeren bir kapsam oluşturur arguments.
• Başka bir (dış) fonksiyonun içinde tanımlanan iç fonksiyonumuz varsa, bu bir zincir oluşturur ve yürütme sırasında kullanılacaktır
• Bir işlev yürütüldüğünde, çalışma zamanı değişkenleri kapsam zincirini arayarak değerlendirir . Zincirin belirli bir noktasında bir değişken bulunursa, aramayı durduracak ve kullanacaktır, aksi takdirde ait olduğu küresel kapsama ulaşana kadar devam eder window.

İlk kodda:

funcs = {};
for (var i = 0; i < 3; i++) {         
  funcs[i] = function inner() {        // function inner's scope contains nothing
    console.log("My value: " + i);    
  };
}
console.log(window.i)                  // test value 'i', print 3

Ne zaman funcsişletilirse, kapsam zinciri olacak function inner -> global. Değişken iiçinde bulunamadığından function inner(ne varargümanlar kullanılarak bildirildi ne de argümanlar olarak iletildi), değeri ien sonunda olan global kapsamda bulunana kadar aramaya devam eder window.i.

Bir dış fonksiyonunda sararak ister açık bir şekilde böyle bir yardımcı işlevi tanımlamak harto yaptığı veya böyle bir anonim işlevini kullanın Bjorn yaptı:

funcs = {};
function outer(i) {              // function outer's scope contains 'i'
  return function inner() {      // function inner, closure created
   console.log("My value: " + i);
  };
}
for (var i = 0; i < 3; i++) {
  funcs[i] = outer(i);
}
console.log(window.i)          // print 3 still

Ne funcszaman idam, şimdi kapsam zinciri olacak function inner -> function outer. Bu süre i, for döngüsünde 3 kez yürütülen dış işlevin kapsamında bulunabilir, her seferinde idoğru değer bağlanır. window.iİç yürütüldüğünde değerini kullanmaz .

Daha ayrıntı bulunabilir burada
biz kapatılması ve performans dikkate neden ihtiyaç yanı sıra, burada ne var olarak döngü içinde kapatılmasını yaratmada ortak hata içerir.

ES6 blok seviyesi kapsamının yeni özellikleri ile yönetilir:

var funcs = [];
for (let i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

OP'nin sorusundaki kod letyerine var.

Hiç kimse henüz forEachyerel değişkenleri kullanarak (yeniden) daha iyi önlemek için işlevini kullanarak önerdi şaşırttı . Aslında, for(var i ...)artık bu nedenle kullanmıyorum .

[0,2,3].forEach(function(i){ console.log('My value:', i); });
// My value: 0
// My value: 2
// My value: 3

// forEachharita yerine kullanmak üzere düzenlendi .

Bu soru gerçekten JavaScript'in geçmişini gösteriyor! Artık Nesne yöntemlerini kullanarak ok işlevleriyle blok kapsamayı engelleyebilir ve döngüleri doğrudan DOM düğümlerinden işleyebiliriz.

const funcs = [1, 2, 3].map(i => () => console.log(i));
funcs.map(fn => fn())

const buttons = document.getElementsByTagName("button");
Object
  .keys(buttons)
  .map(i => buttons[i].addEventListener('click', () => console.log(i)));

<button>0</button><br>
<button>1</button><br>
<button>2</button>

Orijinal örneğinizin çalışmamasının nedeni, döngüde oluşturduğunuz tüm kapakların aynı çerçeveye başvurmasıdır. Aslında, tek bir ideğişkene sahip bir nesne üzerinde 3 yöntem olması . Hepsi aynı değeri yazdırdı.

Her şeyden önce, bu kodda neyin yanlış olduğunu anlayın:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Burada funcs[]dizi başlatılırken, iartırılırken funcsdizi başlatılır ve funcdizi boyutu 3 olur i = 3,. Şimdi funcs[j]()çağrıldığında, i3'e artırılmış olan değişkeni tekrar kullanıyor .

Şimdi bunu çözmek için birçok seçeneğimiz var. Aşağıda bunlardan ikisi bulunmaktadır:

1. Biz başlatabilir iile letveya yeni bir değişkeni başlatmak indexile letve karşı eşit hale i. Böylece çağrı yapıldığında, indexkullanılır ve başlatma işleminden sonra kapsamı sona erer. Ve arama için indextekrar başlatılacak:

   var funcs = [];
   for (var i = 0; i < 3; i++) {          
       let index = i;
       funcs[i] = function() {            
           console.log("My value: " + index); 
       };
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }

2. Diğer Seçenek tempFuncasıl işlevi döndüren bir tanıtmak olabilir :

   var funcs = [];
   function tempFunc(i){
       return function(){
           console.log("My value: " + i);
       };
   }
   for (var i = 0; i < 3; i++) {  
       funcs[i] = tempFunc(i);                                     
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }

Kapatma yapısı kullanın , bu döngü için ekstra azaltacaktır. Döngü için tek bir işlem yapabilirsiniz:

var funcs = [];
for (var i = 0; i < 3; i++) {     
  (funcs[i] = function() {         
    console.log("My value: " + i); 
  })(i);
}

Beyan ettiğinizde varve let birer birer gerçekten ne olduğunu kontrol edeceğiz .

Case1 : kullanmavar

<script>
   var funcs = [];
   for (var i = 0; i < 3; i++) {
     funcs[i] = function () {
        debugger;
        console.log("My value: " + i);
     };
   }
   console.log(funcs);
</script>

Şimdi F12 tuşuna basarak krom konsol pencerenizi açın ve sayfayı yenileyin. Dizinin içindeki her 3 işlevi de harcamayın. Adlı bir özellik göreceksiniz . Adlı bir dizi nesnesi göreceksiniz , bunu genişletin. 3 değerine sahip nesneye bildirilen bir özellik bulacaksınız .[[Scopes]]"Global"'i'

Sonuç:

1. Bir 'var'işlevi dışarıda kullanarak bir değişken bildirdiğinizde , bu değişken global değişken olur (yazarak iveya window.ikonsol penceresinde kontrol edebilirsiniz. 3 döndürür).
2. Bildirdiğiniz annominous fonksiyon, fonksiyonları çağırmazsanız fonksiyonun içindeki değeri çağırmaz ve kontrol etmez.
3. İşlevi çağırdığınızda, console.log("My value: " + i)değeri Globalnesnesinden alır ve sonucu görüntüler.

CASE2: let kullanma

Şimdi değiştirmek 'var'ile'let'

<script>
    var funcs = [];
    for (let i = 0; i < 3; i++) {
        funcs[i] = function () {
           debugger;
           console.log("My value: " + i);
        };
    }
    console.log(funcs);
</script>

Aynı şeyi yapın, kapsamlara gidin. Şimdi iki nesne göreceksiniz "Block"ve "Global". Şimdi Blocknesneyi genişletin , orada 'i' nin tanımlandığını göreceksiniz ve garip olan şey, her fonksiyon iiçin farklı ise (0, 1, 2) değerdir .

Sonuç:

Kullandığınız değişken bildirdiğinizde 'let'bile dışarıda fonksiyonu ancak döngü içinde bu değişken bir küresel değişken olmayacak, bu bir hale gelecektir Block, biz değerini alıyorsanız nedenidir only.That aynı işlev için kullanılabilir düzey değişkeni ifarklı fonksiyonları çağırdığımızda her fonksiyon için.

Ne kadar yakın çalıştığı hakkında daha fazla ayrıntı için, lütfen harika video eğiticisine göz atın https://youtu.be/71AtaJpJHw0

Query-js (*) gibi veri listeleri için bir bildirim modülü kullanabilirsiniz . Bu durumlarda kişisel olarak daha az şaşırtıcı bir deklaratif yaklaşım buluyorum

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

Daha sonra ikinci döngünüzü kullanabilir ve beklenen sonucu elde edebilirsiniz veya

funcs.iterate(function(f){ f(); });

(*) Sorgu-j'lerin yazarıyım ve bu nedenle onu kullanmak için önyargılıyım, bu yüzden sözlerimi sadece bildirici yaklaşım için söz konusu kütüphane için bir öneri olarak almayın :)

Ben forEachsahte bir aralık oluşturma ile kendi kapanış olan işlevi kullanmayı tercih ederim :

var funcs = [];

new Array(3).fill(0).forEach(function (_, i) { // creating a range
    funcs[i] = function() {            
        // now i is safely incapsulated 
        console.log("My value: " + i);
    };
});

for (var j = 0; j < 3; j++) {
    funcs[j](); // 0, 1, 2
}

Bu, diğer dillerdeki aralıklardan daha çirkin görünüyor, ancak IMHO diğer çözümlerden daha az korkunç.

Ve yine başka bir çözüm: başka bir döngü oluşturmak yerine, sadece thisreturn işlevine bağlayın.

var funcs = [];

function createFunc(i) {
  return function() {
    console.log('My value: ' + i); //log value of i.
  }.call(this);
}

for (var i = 1; i <= 5; i++) {  //5 functions
  funcs[i] = createFunc(i);     // call createFunc() i=5 times
}

Bağlanarak bu , sorunu çözer de.

Birçok çözüm doğru görünüyor, ancak bu Curryinggibi durumlar için fonksiyonel bir programlama tasarım deseni olarak adlandırıldığından bahsetmiyorlar . Tarayıcıya bağlı olarak bağdan 3-10 kat daha hızlı.

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = curryShowValue(i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

function curryShowValue(i) {
  return function showValue() {
    console.log("My value: " + i);
  }
}

Farklı tarayıcılarda performans kazancını görün .

Kodunuz çalışmıyor, çünkü yaptığı şey:

Create variable `funcs` and assign it an empty array;  
Loop from 0 up until it is less than 3 and assign it to variable `i`;
    Push to variable `funcs` next function:  
        // Only push (save), but don't execute
        **Write to console current value of variable `i`;**

// First loop has ended, i = 3;

Loop from 0 up until it is less than 3 and assign it to variable `j`;
    Call `j`-th function from variable `funcs`:  
        **Write to console current value of variable `i`;**  
        // Ask yourself NOW! What is the value of i?

Şimdi soru, ifonksiyon çağrıldığında değişkenin değeri nedir? İlk döngü, koşuluyla oluşturulduğundan i < 3, koşul yanlış olduğunda hemen durur, bu yüzden öyledir i = 3.

İşlevlerinizin oluşturulduğu zamanda, kodlarının hiçbirinin yürütülmediğini, yalnızca daha sonra kullanılmak üzere kaydedildiğini anlamalısınız. Ve daha sonra çağrıldıklarında, tercüman onları yürütür ve "Şu andaki değeri nedir i?" Diye sorar.

Yani, amacınız önce iişlevinin değerini kaydetmek ve sonra bundan sonra işlevi kaydetmek funcs. Bu, örneğin şu şekilde yapılabilir:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function(x) {            // and store them in funcs
        console.log("My value: " + x); // each should log its value.
    }.bind(null, i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Bu şekilde, her işlevin kendi değişkeni olacaktır xve bunu her yinelemenin xdeğerine ayarladık i.

Bu, bu sorunu çözmenin çeşitli yollarından sadece biridir.

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function(param) {          // and store them in funcs
    console.log("My value: " + param); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](j);                      // and now let's run each one to see with j
}

Var yerine let (bloke kapsamı) kullanın.

var funcs = [];
for (let i = 0; i < 3; i++) {      
  funcs[i] = function() {          
    console.log("My value: " + i); 
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      
}