Penjelasan terperinci tentang penggunaan kata kunci ini dalam JavaScript

Artikel ini terutamanya memperkenalkan penggunaan kata kunci ini dalam JavaScript, yang merupakan pengetahuan asas untuk memulakan JavaScript Rakan yang memerlukannya boleh merujuknya

Seperti banyak bahasa berorientasikan objek lain, JavaScript juga. mempunyai kata kunci ini, ini digunakan dalam fungsi untuk menunjuk ke objek yang memanggil kaedah ini. Dalam pengaturcaraan sebenar, untuk menentukan siapa yang dituju, anda secara amnya boleh mengikut prinsip berikut:

• Jika fungsi dipanggil oleh Function.call atau Function.apply, maka ini menunjukkan kepada elemen pertama bagi parameter panggilan/guna, jika parameter adalah batal atau tidak ditentukan, ini menunjukkan kepada objek global (dalam penyemak imbas, objek global ialah objek tetingkap).

• Jika fungsi dipanggil oleh Function.bind, maka ini akan menunjukkan kepada parameter pertama bind (apabila kaedah dicipta).

• Jika fungsi dipanggil sebagai kaedah oleh objek, maka ini menunjuk ke objek ini.

• Jika fungsi itu hanya dipanggil sebagai fungsi dan tidak dilampirkan pada sebarang objek, maka ini menunjukkan tetingkap pembolehubah global.

Fungsi

Pertama, mari kita lihat "fungsi":

function introduce() {
   alert("Hello, I am Laruence\r\n");
}

Untuk, fungsi ini, Siapa ini adakah kata kunci menunjuk ke

Fungsi yang ditakrifkan secara global, pemilik fungsi ialah halaman semasa, iaitu objek tetingkap

Inilah sebabnya, saya meletakkan fungsi itu dalam petikan . Kerana fungsi yang ditakrifkan secara global sebenarnya adalah kaedah objek tetingkap

Oleh itu, kita boleh memanggilnya secara langsung melalui nama fungsi, atau kita boleh memanggilnya melalui nama kaedah tetingkap dalam kaedah Kata kunci menunjuk kepada pemiliknya: objek tetingkap

Jika kita melihat pada atribut perkenalkan tetingkap, kita akan mendapat:

var name = "I am Laruence";
function introduce() {
   alert(this.name);
}
alert(window.introduce);

/**
* output:
* function introduce() {
* alert(this.name);
* }
*/

Selepas membaca kod di atas, anda boleh. fikir Memandangkan fungsi global ialah kaedah objek tetingkap, dan pembolehubah global ialah atribut objek tetingkap (telah disebut dalam skop Javasript), maka pembolehubah global boleh diakses melalui kata kunci ini dalam fungsi global, betul ?

Jawapannya ya, jika anda memanggil fungsi introduce, anda akan mengenali saya sebagai Laruence.

Fungsi pengendalian acara

Mungkin, anda keliru tentang kata kunci ini, Kebanyakan sebab datang daripada menggunakan fungsi (kaedah) dalam pemprosesan acara

<input id="name" type="text" name="name" value="Laruence" />

Sebagai contoh, kita kini perlu memaparkan nilai kotak input nama apabila kita mengklik pada. Kotak input "nama". Kemudian, anda boleh menulis kod berikut:

function showValue() {
   alert(this.value);
}
document.getElementById('name').onclick = showValue;

Kod di atas berjalan seperti biasa, tetapi bukankah ini bermakna penunjuk fungsi ini sentiasa menunjuk ke fungsi pemilik? Bukankah ini bermakna pemilik pembolehubah global adalah objek tetingkap?

Haha, jika anda boleh memikirkan soalan ini, bermakna anda sedang membaca artikel saya dengan serius anda membacanya dari awal, jika tidak, anda masih akan keliru selepas membacanya~

Nah, ya, untuk kod di atas, showValue ditakrifkan dalam objek global, jadi nampaknya masalah hanya boleh berlaku apabila acara onclick terikat.

Kami tahu bahawa segala-galanya dalam Js ialah Objek, fungsi dan kaedah juga merupakan atribut objek, tetapi fungsi mempunyai atribut dalaman boleh laku Oleh itu, untuk kod di atas, apabila mengikat pemproses kepada onclick , ia sebenarnya mengikat objek Dom kotak input dengan id nama Tetapkan nilai pada atribut onclick

Dengan kata lain, kami memberikan fungsi showValue Copy kepada atribut onclick bagi objek kotak input nama kita melihat pada onclick pada masa ini:

function showValue() {
   alert(this.value);
}
document.getElementById('name').onclick = showValue;
alert(document.getElementById('name').onclick);
/**
* output
* function showValue() {
* alert(this.value);
* }
*/

Jadi, apabila peristiwa dicetuskan, kaedah onclick kotak input nama akan dipanggil Pada masa ini, kata kunci ini secara semula jadi akan menunjuk ke kotak input nama , kerana pada masa ini, ia bukan tugasan, tetapi rujukan.

Jika Kami memberi perhatian kepada dua cara penulisan onclick Anda akan mendapati bahawa untuk kaedah sebelumnya, kami menggunakan:

function showValue() {
   alert(this.value);
}
<input id="name" type="text" name="name" value="Laruence" onclick="showValue()"/>

dan untuk kaedah sebelumnya:

Ini juga boleh digunakan secara mengiring mencerminkan perbezaan antara kedua-duanya: untuk yang pertama, ia adalah tugasan, manakala untuk yang kedua, ia adalah rujukan kami menyemak atribut onclick kotak input pada masa ini, kami mendapat:

dom.onclick = showvalue; //没有调用符

Adakah anda faham mengapa? contoh menarik. Anda boleh mencubanya di bawah IE:

onclick = "showvalue()" //有调用符

Tukar penunjuk ini

alert(dom.onclick);
/**
* output:
* function onclick() {
*  showValue();
* }
*/

Nah, sekarang kita sudah tahu sebabnya, bagaimana kita boleh membuat ini tunjuk ke tempat yang ingin kita tunjuk?

Untuk fungsi pemprosesan acara di atas, kita boleh mempunyai cara berikut untuk menulis:

<img src="xxx" onerror="alert(1);} function hi() { alert(2); " />

Untuk situasi di mana ia bukan acara fungsi pemprosesan, kita boleh menggunakan apply, atau call, untuk menukar penunjuk kata kunci ini Contohnya:

Contoh fungsi yang dipanggil oleh Function.call:

.

dom.onclick = showValue();

dom.onclick = function() { alert(this.value) ;}

<input onclick="alert(this.value);" /> //想想刚才我们的引用,是如何把这句嵌入的.

dom.addEventListener(dom, showValue, false); //ff only

Contoh fungsi yang dipanggil oleh Function.call:

Contoh fungsi yang dipanggil oleh objek:

var laruence = {
   name : 'laruence',
   age : 26,
   position : 'Senior PHP Engineer',
   company : 'Baidu.inc'
};
function introduce() {
   alert(this.name);
}
introduce.call(laruence);

Apabila memanggil fungsi dalam ruang nama dalam , kami biasanya cache pembolehubah yang menunjuk ke fungsi yang akan dipanggil untuk mengurangkan jumlah kod. Tetapi berbuat demikian akan mengubah nilai ini dalam fungsi dan akhirnya melakukan operasi yang salah. Contohnya:

var myObject = {
  sayHello : function() {
    console.log('Hi! My name is ' + this.myName);
  },
  myName : 'Rebecca'
};
var secondObject = {
  myName : 'Colin'
};
myObject.sayHello();         // logs 'Hi! My name is Rebecca'
myObject.sayHello.call(secondObject); // logs 'Hi! My name is Colin'

Jadi, jika anda ingin cache pembolehubah untuk menyimpan kod, cara yang betul adalah dengan menyimpan hanya objek yang memanggil fungsi itu:

var myNamespace = {
  myObject : {
    sayHello : function() {
      console.log('Hi! My name is ' + this.myName);
    },

    myName : 'Rebecca'
  }
};

var obj = myNamespace.myObject;

obj.sayHello(); // logs 'Hi! My name is Rebecca'

总之，有一个大原则：谁调用了那个函数，this 就指向谁。

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！