Perbandingan dan contoh penggunaan fungsi panggilan dan guna dalam kemahiran Javascript_javascript

Fungsi panggilan dan guna jarang digunakan dalam beberapa operasi Javascript mudah Dalam operasi lain yang lebih besar, seperti pembangunan aplikasi web dan pembangunan rangka kerja js, anda mungkin sering menghadapi dua fungsi ini. Terdapat banyak maklumat di Internet mengenai penjelasan kedua-dua fungsi ini, tetapi saya berpendapat bahawa banyak maklumat itu sama ada dalam skrip atau sangat serupa dan tidak mempunyai penjelasan yang sederhana. Seterusnya, saya cuba menganalisis dan menerangkan kedua-dua fungsi ini dengan cara yang lebih jelas dan mudah.

Salin kod Kod adalah seperti berikut:

Kita boleh menganggap call() dan apply() sebagai kaedah objek, dan fungsi panggilan secara tidak langsung dengan memanggil pelaksanaan kaedah tersebut. Parameter sebenar panggilan() dan apply() yang pertama ialah objek induk bagi fungsi yang akan dipanggil, yang merupakan konteks panggilan. Rujukan kepadanya diperoleh melalui ini dalam badan fungsi. Untuk memanggil fungsi f() pada kaedah objek o, anda boleh menggunakan call() dan apply() seperti ini: f.call(o) f.apply(o).[1]

Mari mula-mula menganalisis panggilan Berikut ialah penjelasan ECMAScript 3rd Edition tentang fungsi panggilan [2]: Apabila kaedah panggilan dipanggil oleh objek fungsi (func.call(0)), parameter yang diperlukan dan beberapa parameter pilihan, proses pelaksanaannya adalah seperti berikut:
a, jika panggilan panggilan objek tidak boleh dijalankan, buang TypeError.
b, Tetapkan senarai parameter kepada kosong
c. Jika kaedah yang dipanggil melepasi lebih daripada satu parameter, kemudian masukkan arg1, arg2... ke dalam senarai parameter dalam urutan
d. Kembalikan hasil fungsi panggilan, gantikan ini dalam fungsi panggilan (func) dengan parameter 1 yang diluluskan, dan gunakan senarai parameter yang diluluskan sebagai parameter fungsi ini.
Sebenarnya, fungsi panggilan adalah prototaip objek fungsi Maksudnya, fungsi yang memanggil panggilan juga mesti menjadi fungsi Apabila panggilan ini dipanggil, gantikan ini dalam fungsi yang memanggil panggilan dengan objek lulus masuk. Berikut ialah contoh:

<script>
 function C1(){
 this.name='张三';
 this.age='24';
 this.sayname=function(){
  console.log("这里是C1类，我的名字是:"+this.name+"我的年龄是"+this.age);
 }
 }
 function C2(){
 this.name='李四';
 this.age='25';
 }
 var c1=new C1();
 var c2=new C2();
 c1.sayname();
 c1.sayname.call(c2);
</script>

Hasil pelaksanaan:
Ini kategori C1, nama saya: Zhang San dan umur saya 24
Ini kategori C1, nama saya: Li Si dan umur saya 25
Dalam kod di atas, dua kelas diisytiharkan, C1 dan C2 mempunyai dua atribut dan satu kaedah C2 juga mempunyai dua atribut yang sama seperti C1, c1.sayname() mencetak atribut sebenar, c1 .sayname. call(c2) hanya mencetak atribut c2. Mengapa ini? Kerana sayname() ialah fungsi, dan terdapat ini dalam badan fungsi, apabila panggilan dilaksanakan, ini akan digantikan dengan c2, jadi atribut c2 akhirnya akan dicetak.
Perbezaan antara permohonan dan panggilan terletak pada lulus parameter pilihan Semua parameter pilihan permohonan disimpan dalam tatasusunan dan dihantar sebagai satu parameter, manakala panggilan dibahagikan kepada berbilang parameter dan dihantar masuk.
Jadi, apakah aplikasi fungsi memohon dan memanggil? Yang pertama ialah kaedah klasik di Internet untuk mencari elemen maksimum dalam tatasusunan angka Hanya gunakan Math.max.apply(null,array). 🎜>

<script> 
 function Human(name,sex){
 this.name=name;
 this.sex=sex;
 this.walk=function(){
  console.log('我在走路');
 }
 }
 function Child(){
 Human.call(this,"小明","男")
 this.paly=function(){
  console.log('我很喜欢玩耍');
 }
 this.intruduce=function(){
  console.log('大家好，我是'+this.name);
 }
 }
 var jinp=new Human('Jack','男');
 var xiaoping=new Child();
 xiaoping.walk();
 xiaoping.paly();
 xiaoping.intruduce();
</script>

Hasil pelaksanaan:

Saya sedang berjalan
Saya sangat suka bermain
Hello semua, saya Xiao Ming
Fungsi yang serupa dengan call() dan apply() ialah bind(), iaitu kaedah baharu dalam ECMAScript 5, tetapi bind() boleh disimulasikan dengan mudah dalam ECMAScript 3. Fungsi bind juga merupakan kaedah Function.prototype dalam Javascript Kandungan utama kaedah ini adalah untuk mengikat fungsi pada objek. Apabila kaedah bind() terikat kepada fungsi f() dan objek o diluluskan sebagai parameter, kaedah ini akan mengembalikan fungsi baharu untuk dipanggil sebagai kaedah o. Sebarang hujah yang dihantar ke fungsi baharu akan dihantar ke fungsi asal. Seperti berikut:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 var jieshao=introduce.bind(xiaoming);
 console.log(jieshao("中国","打球"));
</script>

Hasil pelaksanaan:

Hello semua, nama saya Xiao Ming, saya berumur 20 tahun, dari China, dan suka bermain bola
Contoh di atas adalah bersamaan dengan:

<script>
 function introduce(country,hobby){
 return "大家好，我叫"+this.name+", 今年"+this.age+"岁, 来自"+country+", 喜欢"+hobby;
 }
 var xiaoming={name:"小明",age:20}
 console.log(introduce.apply(xiaoming,["中国","打球"]));
    //或者下面这个
 console.log(introduce.call(xiaoming,"中国","打球"));
</script>

Perlu diambil perhatian bahawa dalam mod ketat ECMAScript 5, argumen pertama call() dan apply() akan menjadi nilai ini, walaupun argumen yang diluluskan ialah nilai asal atau pun null atau undefined . Dalam mod ECMAScript 3 dan tidak ketat, null masuk dan tidak ditentukan akan digantikan oleh rakan sejawatan global, dan nilai primitif lain akan digantikan oleh objek pembalut yang sepadan.

Bahan rujukan

[1], Panduan Definitif untuk Javascript Edisi Ke-6, halaman 189

[2],
Function.prototype.call (thisArg [ , arg1 [ , arg2, … ] ] ) [3],
Function.prototype.apply (thisArg, argArray)