Bagaimana Anda mengikat variabel dalam javascript?

Question

Dalam beberapa tahun terakhir, pengikatan data dua arah telah menjadi teknik yang sangat populer di antara semua jenis kerangka kerja JavaScript dan alat lainnya, dan saya merasa artikel tentang konsep dasar di baliknya mungkin berguna bagi seseorang yang ingin memahami bagaimana tepatnya dua . Pada artikel ini, saya akan mencoba membahasnya sebanyak mungkin tanpa terlalu mendalami mekanisme JavaScript

Table of Contents Show

Lihat ke Model mengikat
Model ke Tampilan mengikat
Metode // 1. The object we'll be changing var data = { variable: '' }; // 2. References to 3 elements listed above var inputField = document.getElementById('input'); var button = document.getElementById('input'); var valueField = document.getElementById('value'); // 3. Event listener setup inputField.addEventListener('input', function() { // Update the object data.variable = inputField.value; // Log the new value to console console.log(object.variable); }); _9
var cat1 = {}; cat1.meow = function() { console.log('Meow!'); } cat1.meow(); // Output: Meow! // .. is equivalent to ... var cat2 = {}; Object.defineProperty(cat2, 'meow', { configurable: false, enumerable: false, writable: false, value: function() { console.log('Meow!'); } }); cat2.meow(); // Output: Meow! 2 metode
Menambahkan Model ke Tampilan mengikat ke halaman kami
Produk akhir
Bagaimana cara mengikat variabel dalam JavaScript?
Bagaimana cara mengikat bekerja di JavaScript?
Bagaimana cara memanggil () menerapkan () dan mengikat () dalam JavaScript?
Bagaimana cara mengikat acara di JavaScript?

Pertama-tama, penting untuk menunjukkan apa sebenarnya pengikatan data dua arah itu sebelum kita dapat membahas cara kerjanya. Sebagai contoh, mari pertimbangkan pola desain Model-View-Controller (MVC). Di MVC, yang disebut komponen Model mewakili Model data dalam aplikasi, sedangkan komponen Tampilan menentukan bagaimana data disajikan kepada pengguna. Analogi sederhananya adalah menganggap Model sebagai objek JavaScript dan Tampilan sebagai halaman HTML dengan beberapa formulir input. Lihatlah animasi di bawah ini

Browser Anda tidak mendukung tag video

Seperti yang Anda lihat, objek JavaScript diperbarui secara real time saat pengguna mengubah konten kolom input. Karena ini adalah pengikatan data dua arah, kebalikannya juga benar. Jika aplikasi memperbarui objek JS, perubahan akan langsung muncul di kolom input

Pertama-tama, mari buat halaman HTML sederhana yang akan kita gunakan untuk menguji kode JS yang akan kita tulis. Kode untuk halaman kita dapat ditemukan di bawah dan memiliki 3 elemen penting

#input lapangan. Kolom input yang akan kita gunakan untuk mengetikkan nilai baru untuk variabel JS. Sesuai konsep pengikatan data dua arah, perubahan yang dilakukan di sini akan memengaruhi variabel JS dan sebaliknya
#button_ tombol. Saat diklik, tombol ini akan mengubah nilai variabel JS menjadi Hello. Perubahan ini juga harus memengaruhi #input dan #value
#value lapangan. Nilai variabel JS akan muncul di sini dalam teks biasa. Semua perubahan yang dilakukan pada variabel akan tercermin dalam bidang ini secara real time




    Two-way Data Binding


    
    Set value to "Hello"
    Value:

Lihat ke Model mengikat

Mari kita menulis beberapa JS. Kita akan mulai dengan bagian yang mudah. melacak perubahan yang dilakukan pada bidang #input. Jika Anda memiliki pengalaman dengan desain web, Anda mungkin sudah tahu bahwa kita akan menggunakan event listener. Acara khusus yang akan kami manfaatkan adalah acara

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

2. Saat digunakan pada tag HTML

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

_2 dengan atribut

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

4 yang disetel ke

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

5, tag ini diaktifkan saat nilai input diubah. Ini sangat berbeda dari acara

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

_6 , karena

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

6 diaktifkan setiap kali tombol apa pun dilepaskan, bahkan jika Anda hanya mengirim spam tombol shift tanpa benar-benar mengubah konten bidang input

Kode di bawah melakukan trik dalam 3 langkah

Itu menginisialisasi objek yang akan menyimpan nilai bidang kita
Itu membuat referensi ke 3 elemen utama pada halaman. bidang input, tombol dan bidang teks yang menyimpan nilai teks dari objek kita
Ini menyiapkan pendengar acara yang memperbarui nilai teks dari objek kami dan kemudian mencatat nilai baru ke konsol

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

_

Anda dapat melihatnya beraksi di demo di bawah ini. Pastikan untuk membuka konsol pengembang (biasanya dapat diakses menggunakan kunci

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

8) dan ketikkan sesuatu ke dalam bidang untuk mengonfirmasi bahwa kode berfungsi sebagaimana mestinya. Setelah selesai, lanjutkan ke bagian berikutnya di mana kita akan membahas penerapan mekanisme kebalikannya

Lihat pengikatan data Pen Two-way di JS oleh Tim K (@TimboKZ) di CodePen

Model ke Tampilan mengikat

Bagian ini sedikit lebih rumit daripada yang telah kita lakukan sejauh ini - sekarang entah bagaimana kita harus "memata-matai" objek yang menyimpan data kita. Kemudian, setiap kali objek tersebut mengalami perubahan apa pun, kami harus memperbarui kolom input dengan info terbaru

Metode // 1. The object we'll be changing var data = { variable: '' }; // 2. References to 3 elements listed above var inputField = document.getElementById('input'); var button = document.getElementById('input'); var valueField = document.getElementById('value'); // 3. Event listener setup inputField.addEventListener('input', function() { // Update the object data.variable = inputField.value; // Log the new value to console console.log(object.variable); }); _9

Ternyata Gecko, mesin di belakang Firefox memiliki metode

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

9 yang sangat berguna yang didefinisikan pada semua objek JS, yang melakukan persis seperti yang kita inginkan. Ini melacak semua perubahan yang dilakukan pada properti dari beberapa objek dan memberi tahu kami tentangnya

Karena metode ini hanya ada di Gecko, untuk menggunakannya di browser Anda harus menerapkan apa yang disebut polyfill untuk metode

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

9, yang berarti mendefinisikan metode yang akan mencerminkan fungsinya. Untungnya, ini telah dilakukan sebelumnya dan cuplikan oleh seorang pria bernama Eli Gray ini tampaknya berhasil

Untuk mempersingkat artikel ini, saya hanya akan menggunakan sebagian kecil dari polyfill yang ditautkan di atas yang bertanggung jawab untuk melakukan apa yang ingin kami capai, yaitu, melacak perubahan pada properti objek yang menyimpan data kami. Ini akan membuatnya lebih mudah untuk dipahami dan bahkan jika Anda ingin mempelajari semuanya, memahami bagian kecil ini terlebih dahulu akan banyak membantu Anda. Perlu diingat, kode di bawah ini tidak identik dengan yang ada di cuplikan karena saya telah menghapus beberapa bagian dan menulis ulang yang lain agar tidak terlalu ambigu

var cat1 = {}; cat1.meow = function() { console.log('Meow!'); } cat1.meow(); // Output: Meow! // .. is equivalent to ... var cat2 = {}; Object.defineProperty(cat2, 'meow', { configurable: false, enumerable: false, writable: false, value: function() { console.log('Meow!'); } }); cat2.meow(); // Output: Meow! 2 metode

Seperti yang mungkin Anda perhatikan jika Anda melihat cuplikan yang ditautkan di atas, pembuatnya sangat bergantung pada metode

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

2. Sangat penting untuk memahami mengapa itu digunakan dan bagaimana cara kerjanya sebelum kita dapat melanjutkan. Saya akan membicarakannya secara singkat di bawah, tetapi saya sarankan Anda memeriksa tautan MDN di paragraf ini untuk deskripsi yang lebih mendalam

Seperti namanya,

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

_4 adalah cara yang sangat mewah untuk mendefinisikan properti pada objek JS. Perhatikan contoh di bawah ini di mana kita mendefinisikan metode pada beberapa objek

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

Seperti yang terlihat pada contoh di atas,

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

_2 memberikan lebih banyak kontrol atas cara Anda mendefinisikan properti daripada melakukannya menggunakan operator penugasan (

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

6). Fitur hebat lainnya yang diberikannya adalah mengonfigurasi fungsi pengambil dan penyetel untuk properti secara eksplisit. Ini mungkin terdengar membingungkan tetapi contoh di bawah ini seharusnya membuatnya tidak terlalu ambigu

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

Ini adalah potongan kode yang panjang tetapi benar-benar menunjukkan betapa kuatnya

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

2 itu. Perhatikan bagaimana untuk

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

_8 mesin JavaScript hanya mengembalikan dan memperbarui nilainya seperti yang kita perintahkan ke. Pada saat yang sama, untuk

var cat1 = {};
cat1.meow = function() {
    console.log('Meow!');
}
cat1.meow(); // Output: Meow!

// .. is equivalent to ...

var cat2 = {};
Object.defineProperty(cat2, 'meow', {
    configurable: false,
    enumerable: false,
    writable: false,
    value: function() {
        console.log('Meow!');
    }
});
cat2.meow(); // Output: Meow!

_9, kami telah menyiapkan segala macam manipulasi yang dilakukan pada nilai sebelum benar-benar dikembalikan atau diperbarui. Sekarang pertimbangkan fakta bahwa metode

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

_0 dan

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

1 dapat berisi logika apa pun yang kita inginkan. Dapatkah Anda melihat bagaimana kami dapat menggunakan ini untuk keuntungan kami?

Menambahkan Model ke Tampilan mengikat ke halaman kami

Sekarang, kita akan menghubungkan semua bagian kecil menjadi sesuatu yang lebih besar. Mari kita mulai dengan mengambil kode kita dari bagian "View to Model binding" dan membuat beberapa modifikasi

Tentukan fungsi yang disebut

// 1. The object we'll be changing
var data = {
  variable: ''
};

// 2. References to 3 elements listed above
var inputField = document.getElementById('input');
var button = document.getElementById('input');
var valueField = document.getElementById('value');

// 3. Event listener setup
inputField.addEventListener('input', function() {
    // Update the object
    data.variable = inputField.value;

    // Log the new value to console
    console.log(object.variable);
});

_9, Itu membutuhkan 3 argumen. Objek, nama properti yang ada pada objek tersebut dan panggilan balik, yang akan dipanggil setiap kali properti berubah

Gunakan fungsi di atas pada properti

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

_3 dari

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

4. Panggilan balik yang akan kami gunakan akan memperbarui #input dan #value kami dengan nilai terbaru dari

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

3 kami

Siapkan acara

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

_8 di #button kami untuk mengubah nilai

// Simple object property
var person1 = {
    height: 120
};
person1.height; // Returns 120
person1.height = 100; // person1.height is now 100


// .. as opposed to ...


// Using defineProperty() `get` and `set`
var person2 = {};
var height2 = 100;
Object.defineProperty(person2, 'height', {
    configurable: false,
    enumerable: false,
    get: function() {
        // Multiply value by 2
        // before returning
        return height2 * 2;
    },
    set: function(value) {
        // Divide the supplied value
        // by 4 before assignment
        height2 = value / 4;
    }
});

person2.height; // Returns 200
// Think of the line above as person2.height.get()

person2.height = 100; // height2 is now 25
// Think of the line above as person2.height.set(100)

person2.height; // Returns 50

3 menjadi Hello

Nah, akankah kita mulai? . Saya menambahkan beberapa komentar ke tambahan baru

// Definitions from the first version of the code
var data = {
  variable: ''
};
var inputField = document.getElementById('input');
var button = document.getElementById('button');
var valueField = document.getElementById('value');

// 1. The watch() function described above
var watch = function(object, property, callback) {
  // Store the initial value for future use
  var value = object[property];
  
  // Remove the original property since
  // now we want to "spy" on it
  delete object[property];
  
  // Define the property again,
  // now using `get` and `set`
  Object.defineProperty(object, property, {
    configurable: false,
    enumerable: false,
    get: function() {
      // Simply return the value,
      // nothing special here
      return value;
    },
    set: function(newValue) {
      // Update the value
      value = newValue;
      // Call the callback with
      // the new value
      callback(newValue);
    }
  });
};

// 2. Watch our `data` object for changes using our
// newly defined `watch()` function
watch(data, 'variable', function(newValue) {
  // Update the input field value
  inputField.value = newValue;
  
  // Update the text field
  valueField.textContent = newValue;
});

// 3. Setup the `click` event for the button
button.addEventListener('click', function() {
  // Simply set the value to `Hello`
  data.variable = 'Hello';
});

// Adding View to Model binding. This should come
// after our `watch()` function because `set` would
// not be available before that.
inputField.addEventListener('input', function() {
  data.variable = inputField.value;
});

Produk akhir

Di bawah ini Anda dapat menemukan demo produk akhir. Meskipun butuh waktu cukup lama untuk sampai ke sini, hasil akhirnya tampaknya bekerja persis seperti yang kami harapkan

Lihat pengikatan data Pen Two-way di JS oleh Tim K (@TimboKZ) di CodePen

Kami telah melalui banyak hal dalam artikel ini dan saya menyadari bahwa jumlah kode yang harus dipahami cukup besar terutama untuk seseorang dengan sedikit pengalaman JavaScript sebelumnya, tetapi saya harap artikel ini membantu Anda memahami, bahkan dari jarak jauh, bagaimana dua- . Jika Anda menemukan kesalahan dalam kode atau penjelasan saya, jangan ragu untuk berkomentar di bawah ini

Bagaimana cara mengikat variabel dalam JavaScript?

Mengikat itu sederhana. db. startDatabaseConnection(function(){ // apapun }, onError. ikat(ini, var1, var2));

Bagaimana cara mengikat bekerja di JavaScript?

bind adalah metode pada prototipe semua fungsi dalam JavaScript. Hal ini memungkinkan Anda untuk membuat fungsi baru dari fungsi yang sudah ada, mengubah konteks fungsi baru ini, dan memberikan argumen apa pun yang Anda inginkan untuk memanggil fungsi baru.

Bagaimana cara memanggil () menerapkan () dan mengikat () dalam JavaScript?

Gunakan. panggilan() atau. apply() saat Anda ingin segera menjalankan fungsi, dan mengubah konteksnya. Panggil/terapkan segera panggil fungsi, sedangkan bind mengembalikan fungsi yang, saat dieksekusi nanti, akan memiliki konteks yang benar untuk memanggil fungsi aslinya .

Bagaimana cara mengikat acara di JavaScript?

Pengguna dapat mengikuti sintaks di bawah ini untuk menangani pengikatan peristiwa menggunakan addEventListener di JavaScript. elemen. addEventListener(event, eventHandler, useCapture); Dalam sintaks di atas, kita telah meneruskan fungsi callback event dan eventHandler sebagai parameter metode addEventListener.

kode javascript