Penjelasan terperinci tentang fungsi permohonan dan panggilan dalam JavaScript_jquery

Kali pertama saya menterjemah artikel teknikal, memang kelakar!

Terjemahan asal:

Function.apply dan Function.call dalam JavaScript

Perenggan pertama ditinggalkan.

Setiap fungsi JavaScript akan mempunyai banyak kaedah yang dilampirkan, termasuk toString(), call() dan apply(). Mungkin kedengaran pelik kepada anda bahawa sesuatu fungsi mungkin mempunyai kaedahnya sendiri, tetapi ingat, setiap fungsi dalam JavaScript ialah objek. Lihat artikel ini untuk menyemak (penyegar semula) ciri JavaScript. Anda juga mungkin ingin mengetahui perbezaan antara fungsi dan kaedah dalam JavaScript. Saya rasa perihalan "fungsi" dan "kaedah" hanyalah konvensyen JavaScript. Fungsi berdiri sendiri (contohnya: alert()), dan kaedah ialah sifat (kamus) objek di dalam fungsi Kami memanggil kaedah melalui objek. Setiap objek JavaScript mempunyai kaedah toString() Berikut ialah contoh kod Dalam objek fungsi, kita boleh menggunakan kaedah toString().

function foo(){
 alert('x');
}
alert(foo.toString());

Oleh kerana fungsi adalah objek, ia mempunyai sifat dan kaedah tersendiri. Kita boleh menganggapnya sebagai data. Dalam artikel ini, kami hanya menumpukan pada dua kaedah fungsi apply() dan call().

Kita mulakan dengan kod berikut:

var x = 10;
function f(){
 alert(this.x);
}
f();

Kami mentakrifkan fungsi global f(). f() mengakses pembolehubah x melalui kata kunci ini, tetapi perlu diperhatikan bahawa kita tidak boleh memanggil fungsi ini melalui contoh objek. Apakah objek yang ditunjukkan ini? ini akan menunjuk kepada objek global ini. Pembolehubah x kami ditakrifkan dalam objek global ini. Kod di atas boleh berjalan seperti biasa, dan hasilnya akan menjadi kotak dialog dengan 10 dipaparkan dalam kotak dialog.

Kami boleh memanggil call() dan memohon() melalui ini. Seperti contoh berikut menunjukkan cara menggunakan call():

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

Memanggil f() terlebih dahulu akan memaparkan kotak dialog 10, kerana ini menunjuk ke objek global pada masa ini. Kemudian kita memanggil kaedah panggilan () fungsi f Parameter masuk ialah o, dan hasil yang dijalankan menunjukkan nilai atribut x dalam o, 15. Kaedah panggilan() akan menggunakan parameter pertamanya sebagai penunjuk fungsi f ini. Dalam erti kata lain, kami akan memberitahu masa jalan yang objek ini dalam fungsi f menunjuk ke.

Lompatan ini kedengaran agak kelakar, malah agak tidak normal untuk pengaturcara C, Java dan C#. Ini adalah bahagian yang menyeronokkan ECMAScript.

Anda juga boleh menghantar parameter kepada fungsi melalui panggilan():

var x = 10;
var o = { x : 15};
function f(){
 alert(this.x);
}
f();
f.call(o);

apply() adalah serupa dengan call(), kecuali apply() memerlukan parameter kedua mestilah array. Tatasusunan ini akan dihantar sebagai parameter kepada fungsi sasaran.

var x = 10;
var o = {x : 15};
function f(message) {
 alert(message);
 alert(this.x);
}
f('invoking f');
f.apply(o, ['invoking f through apply']);

Kaedah apply() berguna kerana kita boleh mencipta fungsi tanpa mengambil berat tentang parameter kaedah sasaran. Fungsi ini boleh menghantar parameter tambahan kepada kaedah melalui parameter tatasusunan kedua apply().

var o = {x : 15};
function f1(message1) {
 alert(message1 + this.x);
}
function f2(message1, message2) {
 alert(message1 + (this.x * this.x) + message2);
}
function g(object, func, args) {
 func.apply(object, args);
}
g(o, f1, ['the value of x = ']);
g(o, f2, ['the value of x squared = ', '. Wow!']);

Terdapat sesuatu yang tidak kena dengan sintaks ini. Untuk memanggil kaedah apply(), kami memaksa fungsi sasaran untuk menggunakan parameter dalam tatasusunan. Nasib baik, ada cara untuk menjadikan sintaks ini lebih mudah. Sebelum itu, kita mesti memperkenalkan satu: pengecam parameter.

Dalam JavaScript, setiap fungsi sebenarnya mempunyai senarai parameter panjang berubah-ubah. Ini bermakna walaupun fungsi hanya mempunyai satu parameter, kita boleh menghantar 5 parameter kepadanya. Kod berikut tidak akan mempunyai ralat dan hasilnya ialah "H".

function f(message) {
 alert(message);
}
f('H', 'e', 'l', 'l', 'o');

Dalam f(), jika kami tidak mahu menerima parameter lain, kami boleh menggunakan argumen kata kunci. argumen mewakili objek parameter, yang mempunyai atribut yang mewakili panjang yang serupa dengan tatasusunan.

function f(message) {
 // message的值和arguments[0]是一样的
 for(var i = 1; i < arguments.length; i++){
  message += arguments[i];
 }
 alert(message);
}
// 结果显示“Hello”
f('H', 'e', 'l', 'l', 'o');

Anda harus tahu bahawa, secara tegasnya, hujah bukanlah tatasusunan. argumen mempunyai atribut panjang, tetapi tiada kaedah split, push, atau pop. Dalam fungsi g() sebelumnya, kita boleh menyalin parameter yang diperlukan daripada argumen untuk membentuk tatasusunan, dan kemudian lulus tatasusunan ini untuk memohon().

var o = {x : 15};
function f(message1, message2) {
 alert(message1 + ( this.x * this.x) + message2);
}
function g(object, func) {
 // arguments[0] = object
 // arguments[1] = func
 var args = [];
 for(var i = 2; i < arguments.length; i++) {
  args.push(arguments[i]);
 }
 func.apply(object, args);
}
g(o, f, 'The value of x squared = ', '. Wow!');

Apabila kita memanggil g(), kita boleh menghantar argumen tambahan sebagai parameter dan bukannya memasukkan argumen ke dalam tatasusunan.