Penjelasan terperinci tentang penggunaan Apply and Call di JS

Kata pengantar

Panggilan dan terapkan keduanya ada untuk mengubah konteks , yaitu konteksnya, ketika suatu fungsi dijalankan. Dengan kata lain, itu adalah mengubah arah ini di dalam tubuh fungsi .

Fungsi panggilan dan berlaku persis sama, tetapi cara menerima parameter berbeda.

Definisi Metode

menerapkan

Metode Function.apply(obj,args) dapat menerima dua parameter:

OBJ: Objek ini akan menggantikan objek ini di kelas fungsi

Args: Ini adalah array atau array kelas. Metode Apply melewati elemen dalam koleksi ini sebagai parameter ke fungsi yang dipanggil.

panggilan

Parameter pertama dari metode panggilan sama dengan metode Apply , kecuali bahwa parameter kedua adalah daftar parameter

Dalam mode non-ketat, ketika parameter pertama kami dilewatkan sebagai nol atau tidak terdefinisi, ini di badan fungsi akan menunjuk ke objek host default, dan di browser itu adalah jendela

 var test = function () {console.log (this === jendela);} test.Apply (null); // truetest.call (tidak terdefinisi); // true

penggunaan

Bagaimana "membajak" orang lain

Pada saat ini, metode LOGNAME di foo akan direferensikan oleh bar, poin ini ke bar

 var foo = {name: "mingming", logname: function () {console.log (this.name); }} var bar = {name: "xiaowang"}; foo.logname.call (bar); // xiaowang

Sadari warisan

 function hewan (name) {this.name = name; this.showname = function () {console.log (this.name); }} function cat (name) {animal.call (this, name); } var kucing = kucing baru ("Black Cat"); cat.showname (); // Kucing Hitam

Dalam pengembangan aktual, ini sering kali mengalami skenario yang secara tidak sengaja mengubah.

Ada metode yang menyenangkan lokal. Ketika kesenangan disebut sebagai fungsi normal, di dalam ini menunjuk ke jendela , tetapi kami sering ingin menunjuk ke node #test , lihat kode berikut:

 window.id = "window"; document.queryselector ('#test'). onclick = function () {console.log (this.id); // test var fun = function () {console.log (this.id); } fun (); // window}

Menggunakan Panggilan, Terapkan Kami dapat dengan mudah menyelesaikan masalah ini

 window.id = "window"; document.queryselector ('#test'). onclick = function () {console.log (this.id); // test var fun = function () {console.log (this.id); } fun.call (this); // test}

Tentu saja Anda dapat melakukan ini, tetapi dalam mode ecmascript 5 yang ketat , ini dalam hal ini telah ditentukan bahwa itu tidak akan menunjuk pada objek global, tetapi tidak terdefinisi:

 window.id = "window"; document.queryselector ('#test'). onclick = function () {var that = this; console.log (this.id); // test var fun = function () {console.log (that.id); } fun (); // test}

 fungsi func () {"gunakan ketat" peringatan (ini); // output: tidak terdefinisi} func ();

Penggunaan lainnya

Array kelas

Di sini, benda -benda yang memenuhi persyaratan berikut disebut array kelas

1. Memiliki atribut panjang

2. Simpan data sesuai dengan indeks

3. Push, Pop dan metode lain yang tidak memiliki array

Array kelas umum termasuk argumen dan nodelist!

 (function () {array.prototype.push.call (argumen, 4); console.log (argumen); // [1, 2, 3, 4]}) (1,2,3)

Dengan cara ini, dorong 4 ke dalam argumen

Halaman Array.prototype.push dapat mengimpleminasi kombinasi dua array

Metode Push tidak memberikan dorongan array, tetapi memberikan push (param1, param, ... paramn) sehingga Anda juga dapat menginstal dan mengganti array dengan menerapkan, yaitu:

 var arr1 = array baru ("1", "2", "3"); var arr2 = array baru ("4", "5", "6"); Array.prototype.push.Apply (ARR1, ARR2); Console.log (arr1); // ["1", "2", "3", "4", "5", "6"]

Ini juga dapat dipahami dengan cara ini, ARR1 memanggil metode push , dan parameter digantikan dengan menerapkan rakitan array ke dalam satu set daftar parameter.

Misalnya, saya ingin menemukan nilai maksimum di array kelas

 (function () {var maxnum = math.max.Apply (null, argumen); console.log (maxnum); // 56}) (34,2,56);

Jenis juri

 console.log (object.prototype.tostring.call (123)) // [nomor objek] console.log (object.prototype.tostring.call ('123')) // [Object String] Console.log (objek.prototype.tostring.call (tidak dijelaskan)) / / /Objek) Tidak terdefinisi] console.log (object.prototype.toString.call (true)) // [objek boolean] console.log (objek.prototype.tostring.call ({})) // [objek objek] console.log (objek.prototype.toString.call ([]) // Array] console.log (object.prototype.toString.call (function () {})) // [fungsi objek]

Di atas adalah konten lengkap dari ringkasan penggunaan Apply and Call. Setiap orang dipersilakan untuk meninggalkan pesan untuk berpartisipasi dalam diskusi. Saya juga berharap artikel ini akan membantu semua orang dalam mempelajari JavaScript.