Secara singkat tentang ini di fungsi javascript

Kata pengantar

Ada cukup banyak informasi di Internet tentang cara kerjanya, tetapi sepanjang waktu saya tidak memiliki cukup banyak informasi untuk mengetahuinya sepenuhnya.



Namun baru-baru ini saya, menurut pandangan saya, melakukan ini dan ingin berbagi dengan Anda.

Tanpa banyak kata

Kami akan membahas contoh sederhana dan kompleks - sehingga semua orang akan tertarik.



Ada dua poin utama yang akan kita lihat:



(1) Untuk fungsi yang dideklarasikan melalui function () {}, ini dihitung pada saat panggilan.

(2) Untuk fungsi panah, ini ditentukan saat fungsi dibuat.



Mari kita mulai dengan beberapa contoh sederhana.

function globalFunc() {
  console.log(this);
}
const globalArrowFunc = () => {
  //      ,  this - window/undefined
  //   ,   use strict   this === undefined
  console.log(this);
}

globalFunc(); // undefined
globalArrowFunc(); // undefined

Bagaimana jika kita menambahkan fungsi ini ke objek:

const cat = {
  name: 'Pirate',
  globalFunc,
  globalArrowFunc
};

cat.globalFunc(); // { name: 'Pirate', ... }
cat.globalArrowFunc(); // undefined

Mari kita cari tahu.



Memanggil cat.globalFunc () mengembalikan kita sebuah objek kucing. Untuk memudahkan pemahaman, Anda bisa menganggapnya seperti ini "ini, saat memanggil fungsi yang dideklarasikan melalui fungsi () {}, akan sama dengan objek sebelum titik".



Lalu mengapa cat.globalArrowFunc () mengembalikan undefined untuk kita? Faktanya adalah bahwa nilai untuk fungsi panah ini ditentukan pada saat pembuatannya, dan saat kita membuatnya, nilai ini tidak ditentukan.



Sekarang mari buat sebuah objek dengan beberapa metode:

const dog = {
  name: 'Viking',
  //        
  //       
  localFunc: function() {
    console.log(this);
  },
  localArrowFunc: () => {
    console.log(this);
  }
};

dog.localFunc(); // { name: 'Viking', ... }
dog.localArrowFunc(); // undefind

Mengapa demikian?



dog.localFunc () - karena objek sebelum titik anjing.

dog.localArrowFunc () - karena di dalam objek ini juga merupakan objek global, yang berarti kita tidak terdefinisi.



Mari kita sedikit memperumit contoh kita.

const dog = {
  name: 'Viking',
  localFunc: function() {
    const arrowFuncInLocalFunc = () => {
      console.log(this);
    };
    function funcInLocalFunc() {
      console.log(this);
    };
    arrowFuncInLocalFunc(); // 1
    funcInLocalFunc(); // 2
  },
  localArrowFunc: () => {
    const arrowFuncInLocalArrowFunc = () => {
      console.log(this);
    };
    function funcInLocalArrowFunc() {
      console.log(this);
    };
    arrowFuncInLocalArrowFunc(); // 3
    funcInLocalArrowFunc(); // 4
  }
};

dog.localFunc();
// 1 - { name: 'Viking', ... }
// 2 - undefind
dog.localArrowFunc();
// 3 - undefind
// 4 - undefind

Mari kita cari tahu!



(1) arrowFuncInLocalFunc () // {name: 'Viking',…}



Mengapa ini terjadi?



Karena ketika kita membuat objek, kita menulisnya dengan fungsi localFunc. Dan, seperti yang kita ingat dari contoh sebelumnya, baginya ini adalah objek sebelum titik, yaitu, {name: 'Viking', ...}. Sekarang mari kita bicara tentang fungsi arrowFuncInLocalFunc itu sendiri - itu dibuat segera ketika localFunc dipanggil dan mengingat nilai ini yang berada di tempat pembuatannya. Jadi kita mendapatkan bahwa arrowFuncInLocalFunc mengembalikan kita {name: 'Viking',…}.



(2) funcInLocalFunc () // undefind



Mengapa ini terjadi?



Seperti yang kita katakan sebelumnya, untuk fungsi yang dideklarasikan melalui function () {} nilai ini ditentukan pada saat panggilan dan sama dengan objek sebelum titik. Dalam kasus ini, kami tidak memiliki objek di depan titik, yang berarti ini adalah objek global atau, dalam kasus kami, tidak ditentukan.



(3) arrowFuncInLocalArrowFunc () // undefined



Mengapa ini terjadi?



Contoh ini sangat mirip dengan (1), hanya fungsi arrowFuncInLocalArrowFunc yang dibuat di dalam fungsi panah yang sama. Kami juga ingat bahwa panah berfungsi pada saat deklarasi mereka menulis ke nilai ini dari lingkungannya. Namun, fungsi kami dibuat di dalam localArrowFunc, yang ini tidak ditentukan. Ini berarti bahwa untuk arrowFuncInLocalArrowFunc ini tidak akan ditentukan.



(4) funcInLocalArrowFunc () // undefined



Mengapa ini terjadi?



Persis untuk alasan yang sama seperti pada (2) untuk funcInLocalFunc



Mari kita ambil contoh lain:

const cat = {
  name: 'Tom',
  getFuncWithTomName: function() {
    return () => {
      console.log(this.name);
    }
  }
};

const mouse = {
  name: 'Jerry',
  logName: cat.getFuncWithTomName()
};

mouse.logName(); // Tom o_O !?

Ini karena getFuncWithTomName membuat dan mengembalikan fungsi panah, dan ketika fungsi panah dibuat, ini sama dengan getFuncWithTomName. Dan untuk getFuncWithTomName, ini adalah objek sebelum titik (cat).

Total

Konteks untuk fungsi panah ditentukan saat dibuat.



Konteks untuk fungsi () {} didefinisikan ketika mereka dipanggil dan sama dengan objek sebelum titik.