Ikhtisar Konseptual Ini
Ketika suatu fungsi dibuat, kata kunci ini dibuat (di latar belakang), yang ditautkan ke suatu objek, dan fungsi beroperasi dalam objek ini. Dengan kata lain, kata kunci ini dapat digunakan dalam suatu fungsi, referensi ke suatu objek, dan fungsi adalah properti atau metode objek itu.
Mari kita lihat objek ini:
<! Doctype html> <html lang = "en"> <body> <script> var code = {living: true, usia: 23, jenis kelamin: 'laki -laki', getGender: function () {return cody.gender;}}; console.log (cody.getgender ()); // log 'jantan' </script> </body> </html>Perhatikan bahwa dalam fungsi getgender, karena di dalam objek Cody, kita dapat memperoleh atribut gender (yaitu, cody.gender) melalui. Anda juga dapat menggunakan ini untuk mendapatkan objek Cody, karena ini menunjuk ke objek Cody.
<! Doctype html> <html lang = "en"> <body> <script> var code = {living: true, usia: 23, jenis kelamin: 'laki -laki', getgender: function () {return this.gender;}}; console.log (cody.getgender ()); // log 'jantan' </script> </body> </html>Dalam this.gender, ini menunjuk ke objek Cody, dan fungsi GetGender dapat beroperasi pada objek Cody.
Topik tentang ini mungkin sedikit membingungkan, tetapi tidak harus. Ingatlah bahwa biasanya, objek ini menunjuk ke objek yang berisi fungsi, bukan fungsi itu sendiri (tentu saja ada pengecualian, seperti menggunakan kata kunci baru atau call () dan apply ()).
Tips Penting
- Kata kunci ini seperti variabel lain, satu -satunya perbedaan adalah Anda tidak dapat mengubahnya.
- Tidak seperti parameter dan variabel lain yang diteruskan ke fungsi, ini adalah kata kunci (bukan properti) di objek yang memanggil fungsi.
Bagaimana cara menentukan nilai ini?
Ini diteruskan ke semua fungsi, dan nilainya tergantung pada kapan fungsi dipanggil saat dijalankan. Harap dicatat di sini, karena ini adalah tempat yang sangat istimewa yang perlu Anda ingat.
Dalam kode berikut, objek MyObject memiliki properti Sisya, yang menunjuk ke fungsi tersebut kata. Ketika fungsi Sayfoo dipanggil dalam domain global, ini menunjuk ke objek jendela. Ketika MyObject memanggil suatu fungsi, ini menunjuk ke MyObject.
Karena myObject memiliki properti yang disebut foo, digunakan di sini.
<! Doctype html> <html lang = "en"> <body> <script> var foo = 'foo'; var myObject = {foo: 'Saya myobject.foo'}; var sayfoo = function () {console.log (ini ['foo']); }; // Berikan MyObject A Sayfoo Properti dan Mintalah Point to Sayfoo Function MyObject.sayfoo = Sayfoo; myobject.sayfoo (); // log 'saya myobject.foo' 12 sayfoo (); // log 'foo' </script> </body> </html>Jelas bahwa nilai ini tergantung pada kapan fungsi dipanggil. MyObject.sayfoo dan Sayfoo keduanya menunjuk ke fungsi yang sama, tetapi konteks panggilan sayfoo () berbeda, sehingga nilai dari ini berbeda. Di bawah ini adalah kode yang sama, objek kepala (jendela) digunakan secara eksplisit, berharap itu akan berguna bagi Anda.
<! Doctype html> <html lang = "en"> <body> <script> window.foo = 'foo'; window.myobject = {foo: 'Saya myobject.foo'}; window.sayfoo = function () {! console.log (this.foo); }; window.myobject.sayfoo = window.sayfoo; window.myobject.sayfoo (); window.sayfoo (); </script> </body> </html>Pastikan bahwa ketika Anda memiliki beberapa referensi yang menunjuk ke fungsi yang sama, Anda tahu dengan jelas bahwa nilai perubahan ini tergantung pada konteks fungsi panggilan.
Tips Penting
- Semua variabel dan parameter kecuali ini milik ruang lingkup variabel statis.
Ini menunjuk ke objek kepala dalam fungsi tertanam
Anda mungkin bertanya -tanya apa yang terjadi saat menggunakan ini dalam fungsi yang tertanam dalam fungsi lain. Sayangnya di ECMA 3, ini tidak mengikuti aturan, itu tidak menunjukkan objek di mana fungsi tersebut berada, tetapi pada objek kepala (objek jendela browser).
Dalam kode berikut, ini di Func2 dan Func3 tidak lagi menunjuk ke MyObject, melainkan objek kepala.
<! Doctype html> <html lang = "en"> <body> <script> var myobject = {func1: function () {console.log (ini); // log myObject varfunc2 = function () {console.log (this); // jendela log, dan akan melakukannya dari titik ini di varfunc3 = function () {console.log (this); // jendela log, karena objek kepala} (); } (); }}; myobject.func1 (); </script> </body> </html>Namun, dalam ecmascript 5, masalah ini akan diperbaiki. Sekarang Anda harus menyadari masalah ini, terutama ketika Anda memberikan nilai satu fungsi ke yang lain.
Lihatlah kode di bawah ini, berikan fungsi anonim ke foo.func1. Ketika fungsi anonim disebut di foo.func1 (fungsi bersarang di fungsi lain), ini akan menunjuk ke objek kepala dalam fungsi anonim.
<! Doctype html> <html lang = "en"> <body> <script> var foo = {func1: function (bar) {bar (); // jendela log, bukan foo console.log (this); // kata kunci ini di sini akan menjadi referensi ke objek foo}}; foo.func1 (function () {console.log (this)}); </script> </body> </html>Sekarang Anda tidak akan lupa bahwa jika fungsi yang mengandung ini ada di fungsi lain, atau dipanggil oleh fungsi lain, nilai ini akan menunjuk ke objek kepala (sekali lagi, ini akan diperbaiki dalam ecmascript 5.)
Menyelesaikan masalah fungsi bersarang
Untuk mencegah hal ini hilang, Anda dapat menggunakan rantai ruang lingkup dalam fungsi induk untuk menyimpan referensi untuk ini. Dalam kode berikut, menggunakan variabel yang disebut itu, menggunakan ruang lingkupnya, kita dapat menyimpan konteks fungsi dengan lebih baik.
<! Doctype html> <html lang = "en"> <body> <script> var myobject = {myproperty: 'icanseehelight', mymethod: function () {var that = this; // Simpan referensi untuk ini (iemyObject) di myMethod scope varhelperfunction function () {// childfunction var helperfunction function () {// childfunction // log 'Saya dapat melihat cahaya' melalui rantai ruang lingkup karena itu = konsol ini.log (that.myproperty); // log 'Saya bisa melihat lampu' konsol.log (ini); // Log objek jendela, jika kita tidak menggunakan "itu"} (); }} myobject.mymethod (); // Invoke mymethod </script> </body> </html>Mengontrol nilai ini
Nilai ini biasanya tergantung pada konteks di mana fungsi disebut (kecuali kata kunci baru digunakan, yang akan diperkenalkan nanti), tetapi Anda dapat menggunakan Apply () atau Call () untuk menentukan objek ini menunjuk ketika fungsi dipicu untuk mengubah/mengontrol nilai ini. Menggunakan dua metode ini seperti mengatakan lagi: "Hei, panggil fungsi X, tetapi biarkan objek Z membuat nilai ini." Melakukannya, nilai default JavaScript ini akan diubah.
Di bawah ini, kami membuat objek dan fungsi, dan kemudian kami memicu fungsi melalui panggilan (), jadi ini dalam fungsi menunjuk ke myojbect. Fungsi myFunction ini beroperasi pada myObject alih -alih objek kepala, jadi kami mengubah objek yang ditunjukkan oleh ini dalam fungsi my.
<! Doctype html> <html lang = "en"> <body> <script> var myobject = {}; var myfunction = function (param1, param2) {// setviacall () 'ini menunjuk ke objek saya saat fungsi dipanggil this.foo = param1; this.bar = param2; Console.log (ini); // log objek {foo = 'foo', bar = 'bar'}}; myfunction.call (myObject, 'foo', 'bar'); // Invoke Function, atur nilai ini ke myObject console.log (myObject) // log objek {foo = 'foo', bar = 'bar'} </script> </body> </html>Dalam contoh di atas, kami menggunakan panggilan (), apply () juga dapat diterapkan pada penggunaan yang sama. Perbedaan antara keduanya adalah bagaimana parameter diteruskan ke fungsi. Gunakan panggilan (), parameter dipisahkan oleh koma, dan apply (), dan parameter dilewatkan dalam array. Berikut ini adalah kode yang sama, tetapi gunakan Apply ().
<! Doctype html> <html lang = "en"> <body> <script> var myobject = {}; var myfunction = function (param1, param2) {// Set via apply (), ini menunjuk ke objek saya saat fungsi dipanggil this.foo = param1; this.bar = param2; Console.log (ini); // log objek {foo = 'foo', bar = 'bar'}}; myfunction.Apply (myObject, ['foo', 'bar']); // Invoke Function, atur value console.log (myObject); // Log Object {foo = 'foo', bar = 'bar'} </script> </body> </html>Gunakan ini dalam konstruktor khusus
Ketika fungsi dipicu dengan kata kunci baru, nilai ini dinyatakan dalam konstruktor untuk menunjuk ke instance itu sendiri. Dengan kata lain: dalam konstruktor, kita dapat menggunakan ini untuk menentukan objek sebelum benar -benar dibuat. Ini tampaknya mengubah nilai ini untuk dipanggil () atau apply ().
Di bawah ini, kami membangun orang konstruktor, yang menunjuk pada objek yang dibuat. Ketika objek seseorang dibuat, ini menunjuk ke objek ini dan menempatkan nama properti di objek, dan nilainya adalah nilai parameter (nama) yang diteruskan ke konstruktor ini.
<! Doctype html> <html lang = "en"> <body> <script> var person = function (name) {this.name = name || 'Johndoe'; // Ini akan merujuk pada instan dibuat} var code = orang baru ('cody lindley'); // Buat instance, berdasarkan konsol konstruktor orang (cody.name); // log 'cody lindley' </script> </body> </html>Dengan cara ini, ketika konstruktor dipicu dengan kata kunci baru, ini menunjuk ke "objek yang akan dibuat". Maka jika kita tidak menggunakan kata kunci baru, nilai ini akan menunjukkan konteks yang memicu orang - ini adalah objek kepala. Mari kita lihat kode di bawah ini.
<! Doctype html> <html lang = "en"> <body> <script> var person = function (name) {this.name = name || 'JohnDoe'; } var code = person ('cody lindley'); // Perhatikan kami tidak menggunakan konsol 'baru' Console.log (cody.name); // tidak terdefinisi, nilainya sebenarnya diatur di window.name console.log (window.name); // log 'cody lindley' </script> </body> </html>Ini menunjuk ke instance konstruktor dalam metode prototipe
Ketika metode digunakan sebagai properti prototipe dari konstruktor, ini dalam metode ini menunjuk ke instance dari metode pemicu. Di sini, kami memiliki konstruktor seseorang (), yang membutuhkan nama lengkap orang tersebut. Untuk mendapatkan nama lengkapnya, kami menambahkan metode whatismyfullname ke orang.prototype, dan semua orang contoh mewarisi metode ini. Ini dalam metode ini menunjuk ke instance (dan propertinya) yang memicu metode ini.
Di bawah ini saya membuat dua objek orang (Cody dan Lisa), dan metode whatismyfullname yang diwariskan berisi poin ini untuk contoh ini.
<! Doctype html> <html lang = "en"> <body> <script> var person = function (x) {if (x) {this.fullname = x}; }; Person.prototype.whatismyfullname = function () {return this.fullname; // 'ini' mengacu pada instance yang dibuat dari orang ()} var code = orang baru ('Cody Lindley'); var lisa = orang baru ('lisa lindley'); // Sebut metode whatismyfullname yang diwariskan, yang menggunakan ini untuk merujuk pada instance console.log (cody.whatismyfullname (), lisa.whatismyfullname ()); /* Rantai prototipe masih berlaku, jadi jika instance tidak memiliki properti fullname, ia akan mencarinya dalam rantai prototipe. Di bawah ini, kami menambahkan properti FullName ke prototipe orang dan prototipe objek. Lihat catatan. */Object.prototype.fullname = 'John doe'; var John = orang baru (); // tidak ada argumen yang dilewati sehingga nama penuh tidak ditambahkan ke instance console.log (John.whatismyfullname ()); // log 'John doe' </script> </body> </html>Gunakan ini dalam metode di dalam objek prototipe, dan ini menunjuk ke instance. Jika instance tidak mengandung atribut, pencarian prototipe dimulai.
petunjuk
- Jika objek yang ditunjuk untuk ini tidak berisi atribut yang ingin Anda temukan, maka hukum yang berlaku untuk atribut apa pun juga berlaku di sini, yaitu, atribut akan "dicari" di sepanjang rantai prototipe. Jadi dalam contoh kami, jika instance tidak berisi properti FullName, maka FullName akan mencari orang.prototype.fullname, dan kemudian object.prototype.fullname.
Untuk melihat lebih banyak sintaks JavaScript, Anda dapat mengikuti: "Tutorial Referensi JavaScript" dan "Panduan Gaya Kode JavaScript". Saya juga berharap semua orang akan lebih mendukung wulin.com.