Apakah Perbezaan Antara Kaedah `call()`, `apply()` dan `bind()` JavaScript?

Memahami Perbezaan Kaedah Javascript call(), apply(), dan bind()

Dalam Javascript, panggilan() dan kaedah apply() membolehkan pembangun menentukan konteks (ini) sesuatu fungsi dan lulus hujah. Walaupun kedua-dua kaedah mempunyai tujuan yang sama, ia berbeza dalam cara hujah disediakan kepada fungsi.

Bila Menggunakan bind()?

Kaedah bind() membezakan dirinya sendiri dari call() dan apply() dengan membenarkan anda mencipta fungsi baharu yang mengekalkan konteks fungsi asal. Ini terbukti berharga apabila berurusan dengan panggilan balik atau peristiwa tak segerak.

Pertimbangkan coretan kod berikut:

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

Seperti yang ditunjukkan oleh contoh di atas, bind() mengembalikan fungsi baharu yang, apabila dilaksanakan kemudian , mengekalkan konteks (ini) bagi fungsi asal. Ini memudahkan pemeliharaan konteks dalam panggilan balik tak segerak dan acara.

Penggunaan dalam Acara dan Panggilan Balik Tak Segerak

Kes penggunaan biasa untuk bind() melibatkan pendengar acara, seperti yang dilihat dalam kod di bawah:

function MyObject(element) {
    this.elm = element;

    element.addEventListener('click', this.onClick.bind(this), false);
};

MyObject.prototype.onClick = function(e) {
     var t=this;  //do something with [t]...
    //without bind the context of this function wouldn't be a MyObject
    //instance as you would normally expect.
};

Dalam contoh ini, bind() memastikan bahawa kaedah onClick(), apabila dicetuskan oleh peristiwa, mengekalkan konteks contoh MyObject yang memulakan pendengar acara. Tanpa bind(), konteks kaedah onClick() tidak akan menjadi contoh seperti yang dijangkakan.

Pelaksanaan bind()

Tafsiran ringkas bind( ) kaedah boleh dilaksanakan seperti berikut:

Function.prototype.bind = function(ctx) {
    var fn = this;
    return function() {
        fn.apply(ctx, arguments);
    };
};

Pelaksanaan yang dipermudahkan ini mencipta fungsi baharu yang memanggil fungsi asal dengan konteks (ctx) dan hujah yang disediakan. Pelaksanaan Function.prototype.bind() asal adalah lebih kompleks, mengendalikan senario tambahan seperti menghantar argumen tambahan.

Atas ialah kandungan terperinci Apakah Perbezaan Antara Kaedah `call()`, `apply()` dan `bind()` JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!