this anahtar kelime nedir ve düzgün (ve yanlış) Yığın Taşması sitesinde JavaScript nasıl kullanılır net bir açıklama gibi görünmüyor olduğunu fark ettim.

Çok tuhaf davranışlarına tanık oldum ve bu olayın neden olduğunu anlamak için başarısız oldu.

Nasıl this çalışır ve ne zaman kullanılmalıdır?

Mike West's makale Scope in JavaScript (mirror). ilk okuma tavsiye ederim this kavramları ve JavaScript scope chains için mükemmel, samimi bir giriş.

this, alışmaya başladığınızda kuralları aslında oldukça basit. ECMAScript Standard tanımlayan bir kelime olarak this "geçerli yürütme içeriği ThisBinding değerini verir" (§11.1.1). ThisBinding. JavaScript yorumlayıcı JavaScript kodu olarak değerlendirir tutan bir şey, özel bir CPU gibi bir nesne için bir başvuru tutan register. Tercüman sadece üç farklı vaka: bir yürütme içeriği kurarak her ThisBinding güncellemeleri

1. İlk genel yürütme içeriği

   Bu <script> bir öğe karşılaşıldığında değerlendirildiği JavaScript kodu için

   <script type="text/javascript">//<![CDATA[
   alert("I'm evaluated in the initial global execution context!");
   
   setTimeout(function () {
       alert("I'm NOT evaluated in the initial global execution context.");
   }, 1);
   //]]></script>

   İlk küresel çalışma bağlamında kodu değerlendirirken, ThisBinding genel nesne, window (§10.4.1.1)ayarlanır.

2. Eval kodu girmek

   • ... eval doğrudan bir çağrı tarafından()

     ThisBinding değişmeden kalır; arama yürütme içeriği (§10.4.2(2)(a)) ThisBinding olarak aynı değere sahiptir.

   • ... eğer eval doğrudan bir çağrı değil()

     ThisBinding küresel nesnesi için ayarlanırgibiilk genel yürütme içeriği (§10.4.2(1))yürütme.

   §15.1.2.1.1 eval doğrudan bir çağrı ne tanımlar. Temel olarak, eval(...) (0, eval)(...) var indirectEval = eval; indirectEval(...); gibi bir şey eval için dolaylı bir çağrı ise doğrudan bir çağrı(). Dolaylı bir eval kullanabilir (1,eval)('this') vs eval('this') in JavaScript? this blog post by Dmitry Soshnikov 44 *(bakınız) arayın.

3. Fonksiyon kodu girmek

   Bu fonksiyonu çağırırken oluşur. Eğer bir fonksiyon çağrıldığında bir nesne gibi obj.myMethod() veya eşdeğeri obj["myMethod"](), sonra ThisBinding ayarlanır nesne (obj örnekte; §13.2.1). Diğer pek çok durumda, ThisBinding genel nesne (§10.4.3) ayarlanır.

   Yazma nedenini "diğer pek çok durumda" sekiz ECMA 5 yerleşik bağımsız olarak belirlenir ThisBinding izin işlevleri listesi var olmasıdır. Bu özel fonksiyonlar sözde . bir al ^em>thisArgişlevi (§10.4.3) çağrılırken ThisBinding olur.

   Bu özel-yerleşik işlevleri vardır:

   • İşlevi.prototip.Uygula () thisArg, argArray
   • İşlevi.prototip.([arg1 [arg2,...]] thisArg) arayın
   • İşlevi.prototip.([arg1 [arg2,...]] thisArg) bağlayın
   • Dizi.prototip.her( callbackfn [ , thisArg ] )
   • Dizi.prototip.bazı( callbackfn [ , thisArg ] )
   • Dizi.prototip.forEach( callbackfn [ , thisArg ] )
   • Dizi.prototip.göster( callbackfn [ , thisArg ] )
   • Dizi.prototip.filtre( callbackfn [ , thisArg ] )

   
   Fonksiyonun durumda.prototip fonksiyon, fonksiyon bir nesne üzerinde denir, ama işlevi nesnesine ThisBinding ayarlamak yerine, ThisBinding yer almaktadırthisArg.

   Dizinin durumda.prototip fonksiyonları, verilencallbackfnolur ThisBinding için ayarlandığı bir yürütme içeriği çağırdıthisArgvarsa; aksi halde, genel nesne için sağlanan.

Bu düz JavaScript için kuralları vardır. JavaScript kütüphaneleri (örneğin jQuery) kullanmaya başladığınızda, bazı kütüphane fonksiyonları this değerini değiştirmek bulabilirsiniz. Bu JavaScript kütüphaneleri geliştiricilerin en sık kullanım durumları destek için eğilimindedir çünkü bunu yapmak, ve bir kitaplık genellikle bu davranış daha uygun buluyorum. Kütüphane fonksiyonları için geri arama işlevleri this başvuru geçerken, işlevi çağrıldığında this değerinin ne olduğu konusunda herhangi bir garanti belgelerine bakın.

Eğer bir JavaScript Kütüphanesi nasıl kullanacağını merak ediyorsanız this, kütüphanenin değerini sadece dahili JavaScript fonksiyonları kabul eden birini kullanıyorthisArg. Siz de, kendi işlevi, bir geri arama fonksiyonu kullanmadan yazabilirsinizthisArg:

function doWork(callbackfn, thisArg) {
    //...
    if (callbackfn != null) callbackfn.call(thisArg);
}

DÜZENLEME:

Özel bir durum unutmuşum. new operatörü ile yeni bir nesne oluştururken, JavaScript yorumlayıcısı yeni, boş bir nesne oluşturur, bazı iç özellikleri ayarlar ve sonra oluşturucu yeni bir nesne işlevini çağırır. Bir işlevi yapıcı bir bağlamda çağrıldığında, bu nedenle, this değeri tercüman oluşturulan yeni nesne:

function MyType() {
    this.someData = "a string";
}

var instance = new MyType();
// Kind of like the following, but there are more steps involved:
// var instance = {};
// MyType.call(instance);

QUİZ:Sadece eğlence için, aşağıdaki örnekler ile anlayış test.

Cevapları ortaya çıkarmak için, açık sarı kutulara fare.

1. Bir satır this değeri nedir? Neden?

   <script type="text/javascript">
   if (true) {
       // Line A
   }
   </script>

2. N satır B this ne değeri var.() staticFunction çalıştırılır? Neden?

   <script type="text/javascript">
   var obj = {
       someData: "a string"
   };
   
   function myFun() {
       // Line B
   }
   
   obj.staticFunction = myFun;
   
   obj.staticFunction();
   </script>

3. this satır C değeri nedir? Neden?

   <script type="text/javascript">
   var obj = {
       myMethod : function () {
           // Line C
       }
   };
   var myFun = obj.myMethod;
   myFun();
   </script>

4. this hattı D değeri nedir? Neden?

   <script type="text/javascript">
   function myFun() {
       // Line D
   }
   var obj = {
       myMethod : function () {
           eval("myFun()");
       }
   };
   obj.myMethod();
   </script>

5. this hat E değeri nedir?

   <script type="text/javascript">
   function myFun() {
       // Line E
   }
   var obj = {
       someData: "a string"
   };
   myFun.call(obj);
   </script>