Ilustrasi kata kunci ini dalam petua JavaScript

JavaScript ialah bahasa skrip yang menyokong ciri lanjutan seperti pengaturcaraan berfungsi, penutupan dan warisan berasaskan prototaip. JavaScript nampaknya mudah untuk dimulakan, tetapi apabila anda menggunakannya dengan lebih mendalam, anda akan mendapati bahawa JavaScript sebenarnya sangat sukar untuk dikuasai, dan beberapa konsep asas mengelirukan. Antaranya, kata kunci ini dalam JavaScript adalah konsep yang agak mengelirukan Dalam senario yang berbeza, ini akan diubah menjadi objek yang berbeza. Terdapat pandangan bahawa hanya dengan menguasai kata kunci ini dengan betul dalam JavaScript anda boleh memasukkan ambang bahasa JavaScript. Dalam bahasa berorientasikan objek arus perdana (seperti Java, C#, dll.), maksud ini jelas dan khusus, iaitu, ia menunjuk kepada objek semasa. Biasanya terikat pada masa penyusunan. Dalam JavaScript, ini terikat pada masa jalan Ini adalah sebab penting mengapa kata kunci ini dalam JavaScript mempunyai pelbagai makna.

Disebabkan sifat pengikatan JavaScript pada masa jalan, ini dalam JavaScript boleh menjadi objek global, objek semasa atau sebarang objek. Semuanya bergantung pada cara fungsi dipanggil. Terdapat beberapa cara untuk memanggil fungsi dalam JavaScript: sebagai kaedah objek, sebagai fungsi, sebagai pembina, dan menggunakan apply atau call. Seperti kata pepatah, kata-kata tidak sebaik kata-kata, dan ungkapan tidak sebaik gambar. Untuk lebih memahami maksud JavaScript ini? Mari gunakan gambar untuk menerangkan:

Saya panggil gambar di atas "JavaScript this decision tree" (dalam mod tidak ketat). Yang berikut menggunakan contoh untuk menggambarkan bagaimana gambar ini boleh membantu kita menilai perkara ini:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 this.x = this.x + x; 
 this.y = this.y + y; 
  } 
 };
 //决策树解释：point.moveTo(1,1)函数不是new进行调用，进入否决策，
 //是用dot(.)进行调用，则指向.moveTo之前的调用对象，即point
 point.moveTo(1,1); //this 绑定到当前对象,即point对象

Salin selepas log masuk

Proses keputusan fungsi point.moveTo() dalam "JavaScript this decision tree" adalah seperti berikut:

1) Adakah fungsi point.moveTo dipanggil menggunakan baharu? Ini jelas tidak berlaku. Pergi ke cawangan "Tidak", iaitu, adakah fungsi dipanggil dengan dot(.)? ;

2) Fungsi point.moveTo dipanggil menggunakan dot(.), iaitu, ia memasuki cawangan "yes", iaitu, ini di sini menunjuk ke titik objek sebelumnya.moveTo

Gambar rajah analitik yang menggambarkan perkara ini ditunjuk dalam fungsi point.moveTo adalah seperti ditunjukkan di bawah:

Untuk contoh lain, lihat kod berikut:

function func(x) { 
 this.x = x; 
 } 
func(5); //this是全局对象window，x为全局变量
 //决策树解析：func()函数是用new进行调用的么？为否，进入func()函数是用dot进行调用的么？为否，则 this指向全局对象window
 x;//x => 5

Salin selepas log masuk

　Proses fungsi func() membuat keputusan dalam "JavaScript this decision tree" adalah seperti berikut:

1) Adakah fungsi func(5) dipanggil menggunakan baharu? Ini jelas tidak berlaku. Pergi ke cawangan "Tidak", iaitu, adakah fungsi dipanggil dengan dot(.)? ;

2) Fungsi func(5) tidak dipanggil dengan dot(.), iaitu, ia memasuki cawangan "No", iaitu, ini di sini menunjuk kepada tetingkap pembolehubah global, maka this.x sebenarnya adalah tetingkap .x;

Gambar rajah analitik yang menggambarkan perkara yang ditunjukkan ini dalam fungsi fungsi adalah seperti yang ditunjukkan di bawah:

Untuk panggilan langsung sebagai fungsi, mari lihat contoh yang kompleks:

var point = { 
 x : 0, 
 y : 0, 
 moveTo : function(x, y) { 
 // 内部函数
 var moveX = function(x) { 
 this.x = x;//this 指向什么？window
 }; 
 // 内部函数
 var moveY = function(y) { 
 this.y = y;//this 指向什么？window
 }; 
  moveX(x); 
  moveY(y); 
 } 
 }; 
 point.moveTo(1,1); 
 point.x; //=>0 
 point.y; //=>0 
 x; //=>1 
 y; //=>1

Salin selepas log masuk

Fungsi point.moveTo(1,1) sebenarnya memanggil fungsi moveX() dan moveY() secara dalaman Fungsi ini dalam moveX() ditentukan dalam "JavaScript this decision tree". Prosesnya seperti ini:

1) Adakah fungsi moveX(1) dipanggil menggunakan baharu? Ini jelas tidak berlaku. Pergi ke cawangan "Tidak", iaitu, adakah fungsi dipanggil dengan dot(.)? ;

2) Fungsi moveX(1) tidak dipanggil dengan dot(.), iaitu, ia memasuki cawangan "No", iaitu, ini di sini menunjuk kepada tetingkap pembolehubah global, maka this.x sebenarnya adalah tetingkap .x;

Mari lihat contoh memanggil pembina:

 function Point(x,y){ 
  this.x = x; // this &#63;
  this.y = y; // this &#63;
 }
 var np=new Point(1,1);
 np.x;//1
 var p=Point(2,2);
 p.x;//error, p是一个空对象undefined
 window.x;//2

Salin selepas log masuk

Proses fungsi Point(1,1) menilai ini dalam var np=new Point(1,1) dalam "JavaScript this decision tree" adalah seperti berikut:

1) Adakah panggilan ke var np=new Point(1,1) menggunakan baharu? Ini jelas, memasuki cawangan "ya", iaitu, ini menunjuk kepada np;

2) Kemudian ini.x=1, iaitu np.x=1

Proses fungsi Point(2,2) menentukan ini dalam var p= Point(2,2) dalam "

JavaScript this decision tree" adalah seperti berikut:

1) Adakah panggilan ke var p= Point(2,2) menggunakan baharu? Ini jelas tidak berlaku. Pergi ke cawangan "Tidak", iaitu, adakah fungsi dipanggil dengan dot(.)? ;

2) Fungsi Point(2,2) tidak dipanggil dengan dot(.)? Jika penghakiman adalah tidak, ia memasuki cawangan "Tidak", iaitu, ini di sini menunjuk kepada tetingkap pembolehubah global, maka ini.x sebenarnya ialah tetingkap.x;

3) ini.x=2 bermaksud tingkap.x=2.

Akhir sekali, mari kita lihat contoh fungsi yang dipanggil menggunakan panggilan dan gunakan:

 function Point(x, y){ 
 this.x = x; 
 this.y = y; 
 this.moveTo = function(x, y){ 
  this.x = x; 
   this.y = y; 
 } 
 } 
 
 var p1 = new Point(0, 0); 
 var p2 = {x: 0, y: 0}; 
 p1.moveTo.apply(p2, [10, 10]);//apply实际上为p2.moveTo(10,10)
 p2.x//10

Salin selepas log masuk

Proses fungsi p1.moveTo.apply(p2,[10,10]) dalam "JavaScript this decision tree" adalah seperti berikut:

Kami tahu bahawa kedua-dua kaedah digunakan dan panggilan adalah sangat berkuasa Ia membenarkan menukar konteks pelaksanaan fungsi, iaitu objek yang terikat dengan ini. p1.moveTo.apply(p2,[10,10]) sebenarnya ialah p2.moveTo(10,10). Kemudian p2.moveTo(10,10) boleh ditafsirkan sebagai:

1) Adakah fungsi p2.moveTo(10,10) dipanggil menggunakan baharu? Ini jelas tidak berlaku. Pergi ke cawangan "Tidak", iaitu, adakah fungsi dipanggil dengan dot(.)? ;

2) Fungsi p2.moveTo(10,10) dipanggil dengan dot(.), iaitu, ia memasuki cawangan "yes", iaitu, ini di sini menunjuk ke objek p2 sebelumnya dalam p2.moveTo( 10,10). , jadi p2.x=10;

Mengenai proses persekitaran pelaksanaan fungsi JavaScript, terdapat penerangan yang sangat baik dalam pustaka dokumen developerworks IBM Petikan adalah seperti berikut:

　"Fungsi dalam JavaScript boleh dilaksanakan sebagai fungsi biasa atau sebagai kaedah objek. Ini adalah sebab utama mengapa ini mempunyai makna yang begitu kaya. Apabila fungsi dilaksanakan, persekitaran pelaksanaan (ExecutionContext) akan dicipta , semua tingkah laku fungsi berlaku dalam persekitaran pelaksanaan ini Apabila membina persekitaran pelaksanaan, JavaScript akan mula-mula mencipta pembolehubah argumen, yang mengandungi parameter yang dihantar semasa memanggil fungsi itu senarai parameter formal fungsi, nilai adalah nilai yang sepadan dalam pembolehubah argumen Jika tiada nilai yang sepadan dalam pembolehubah argumen, parameter formal dimulakan kepada tidak ditentukan Jika fungsi mengandungi fungsi dalaman, fungsi dalaman ini dimulakan. Jika tidak, teruskan untuk memulakan untuk pembolehubah tempatan yang ditakrifkan dalam fungsi ini, perlu diperhatikan bahawa pembolehubah ini dimulakan kepada tidak ditentukan pada masa ini, dan operasi penugasan mereka tidak akan dilaksanakan sehingga fungsi dilaksanakan selepas persekitaran pelaksanaan (ExecutionContext ) berjaya dibuat. Ini adalah sangat penting untuk kita memahami peranan pembolehubah dalam JavaScript yang disebutkan di atas, ia akan diberikan kepada objek global ini, objek semasa, dan lain-lain mengikut kaedah panggilan fungsi (sehingga tahap ini ExecutionContext) berjaya dicipta, fungsi mula melaksanakan baris demi baris, dan pembolehubah yang diperlukan adalah). baca daripada persekitaran pelaksanaan yang dibina sebelum ini (ExecutionContext) ”

Memahami perenggan ini akan memberi manfaat besar untuk memahami fungsi Javascript.

Di atas adalah pengenalan terperinci kepada kata kunci ini dalam JavaScript Secara amnya, gambar lebih mudah difahami oleh semua orang daripada teks.