JavaScript'te başka bir işlev içinde bir işlev tanımlayın

function foo(a) {
    if (/* Some condition */) {
        // perform task 1
        // perform task 3
    }
    else {
        // perform task 2
        // perform task 3
    }
}

Yapısı yukarıdakine benzer bir fonksiyona sahibim. Görev 3'ü bir fonksiyona soyutlamak istiyorum bar(), ancak bu fonksiyonun erişimini sadece kapsamı dahilinde sınırlamak istiyorum foo(a).

İstediğimi elde etmek için aşağıdakilere geçmek doğru mu?

function foo(a) {
    function bar() {
        // Perform task 3
    }

    if (/* Some condition */) {
        // Perform task 1
        bar();
    }
    else {
        // Perform task 2
        bar();
    }
}

Yukarıdakiler doğruysa, bar()her foo(a)çağrıldığında yeniden tanımlanıyor mu? (Burada CPU kaynağının israfı konusunda endişeleniyorum.)

Evet, sahip olduğunuz şey doğrudur. Bazı notlar:

• barher işlev çağrısında oluşturulur foo, ancak:
  • Modern tarayıcılarda bu çok hızlı bir süreçtir. (Bazı motorlar, kodu onun için yalnızca bir kez derleyebilir ve ardından bu kodu her seferinde farklı bir bağlamla yeniden kullanabilir; Google'ın V8 motoru [Chrome'da ve başka yerlerde] bunu çoğu durumda yapar.)
  • Ve ne yaptığına bağlı olarak bar, bazı motorlar, işlev çağrısını tamamen ortadan kaldırarak onu "satır içi" yapabileceklerini belirleyebilir. V8 bunu yapıyor ve eminim bunu yapan tek motor o değil. Doğal olarak bunu ancak kodun davranışını değiştirmezse yapabilirler.
• barHer seferinde yaratmanın performans etkisi, varsa, JavaScript motorları arasında büyük farklılıklar gösterecektir. Eğer barönemsiz, bu belirlenemeyen gelen oldukça küçük değişecektir. fooArka arkaya binlerce kez aramıyorsan (örneğin, bir mousemoveişleyiciden), bunun için endişelenmem. Öyle olsanız bile, sadece daha yavaş motorlarda bir sorun görürsem endişelenirim. İşte DOM işlemlerini içeren bir test örneği , bir etki olduğunu, ancak önemsiz bir etkinin olduğunu (muhtemelen DOM şeyleriyle yıkanmış) öneriyor. İşte saf hesaplama yapan bir test durumu var hangi gösterileri çok daha yüksek darbe, ama açıkçası bile, biz bir fark söz ediyoruz mikro şey üzerinde bile% 92 artış alır çünkü saniye mikroSaniyeler hala çok çok hızlı. Gerçek dünyadaki bir etki görene kadar / görmedikçe, endişelenecek bir şey değil.
• baryalnızca işlevin içinden erişilebilir olacak ve işleve yapılan bu çağrı için tüm değişkenlere ve argümanlara erişime sahip olacaktır. Bu, bunu çok kullanışlı bir model yapar.
• Bir işlev bildirimi kullandığınız için , bildirimi nereye koyduğunuz önemli değildir (üst, alt veya orta - işlevin en üst düzeyinde olduğu sürece, akış kontrol ifadesinin içinde değil) bir sözdizimi hatası), adım adım kodun ilk satırı çalıştırılmadan önce tanımlanır.

Kapanışlar bunun içindir.

var foo = (function () {
  function bar() {
    // perform task 3
  };

  function innerfoo (a) { 
    if (/* some cond */ ) {
      // perform task 1
      bar();
    }
    else {
      // perform task 2
      bar();
    }
  }
  return innerfoo;
})();

Innerfoo (bir kapanış), çubuğa bir başvuru tutar ve yalnızca bir kapatmayı oluşturmak için çağrılan anonim bir işlevden yalnızca innerfoo'ya bir başvuru döndürülür.

Bar'a dışarıdan bu şekilde ulaşılamaz.

var foo = (function () {
    var bar = function () {
        // perform task 3
    }
    return function (a) {

        if (/*some condition*/) {
            // perform task 1
            bar();
        }
        else {
            // perform task 2
            bar();
        }
    };
}());

Kapanış, bar()içerilenin kapsamını korur, yeni işlevi kendi kendine çalışan anonim işlevden döndürmek, daha görünür kapsamı ayarlar foo(). Anonim kendi kendini çalıştıran işlev tam olarak bir kez çalıştırılır, bu nedenle yalnızca bir bar()örnek vardır ve her çalıştırıldığında foo()onu kullanır.

Evet, bu iyi çalışıyor.

Dış işleve her girdiğinizde iç işlev yeniden oluşturulmaz, ancak yeniden atanır.

Bu kodu test ederseniz:

function test() {

    function demo() { alert('1'); }

    demo();
    demo = function() { alert('2'); };
    demo();

}

test();
test();

o gösterecek 1, 2, 1, 2, değil 1, 2, 2, 2.

Yuvalanmış ve iç içe olmayan ve işlev ifadelerini işlev bildirimlerine karşı test etmek için bir jsperf oluşturdum ve yuvalanmış test durumlarının iç içe olmayanlara göre 20 kat daha hızlı performans gösterdiğini görünce şaşırdım. (Ya zıt ya da ihmal edilebilir farkları tahmin ettim).

https://jsperf.com/nested-functions-vs-not-nested-2/1

Bu, Chrome 76, macOS'ta.