Analisis ringkas tentang penggunaan dan pelaksanaan kaedah bind() dalam kemahiran Javascript_javascript

Sebelum membincangkan kaedah bind(), mari lihat soalan:

var altwrite = document.write
altwrite("hello");
//1. Apa yang salah dengan kod di atas
//2. Apakah operasi yang betul
//3.Bagaimana untuk melaksanakan kaedah bind()

Untuk soalan di atas, jawapannya tidak terlalu sukar Titik ujian utama ialah masalah yang ditunjukkan oleh ini. Fungsi altwrite() menukar titik ini kepada objek global atau tetingkap, menyebabkan pengecualian panggilan tidak sah semasa pelaksanaan. Penyelesaian yang betul ialah menggunakan kaedah bind ():

altwrite.bind(document)("hello")
Sudah tentu, anda juga boleh menggunakan kaedah panggilan() :

altwrite.call(dokumen, "hello")
Fokus artikel ini adalah untuk membincangkan isu ketiga, pelaksanaan kaedah bind() Sebelum mula membincangkan pelaksanaan bind(), mari kita lihat dahulu penggunaan kaedah bind():

.

Fungsi mengikat
Penggunaan bind() yang paling mudah adalah untuk mencipta fungsi supaya fungsi mempunyai nilai ini yang sama tidak kira bagaimana ia dipanggil. Kesilapan biasa adalah seperti contoh di atas, mengambil kaedah daripada objek dan kemudian memanggilnya, dengan harapan bahawa ini akan menunjuk ke objek asal. Jika tiada pemprosesan khas dilakukan, objek asal biasanya akan hilang. Menggunakan kaedah bind() boleh menyelesaikan masalah ini dengan cantik:

this.num = 9; 
var mymodule = { 
 num: 81,
 getNum: function() { return this.num; }
};

module.getNum(); // 81

var getNum = module.getNum; 
getNum(); // 9, 因为在这个例子中，"this"指向全局对象

// 创建一个'this'绑定到module的函数
var boundGetNum = getNum.bind(module); 
boundGetNum(); // 81 

Fungsi Separa

Fungsi Separa juga dipanggil Aplikasi Separa Berikut ialah definisi fungsi separa:

Aplikasi separa boleh diterangkan sebagai mengambil fungsi yang menerima beberapa bilangan argumen, mengikat nilai kepada satu atau lebih daripada argumen tersebut dan mengembalikan fungsi baharu yang hanya menerima baki argumen yang tidak terikat.

Ini ialah ciri yang baik menggunakan bind() kami menetapkan parameter fungsi yang dipratentukan, dan kemudian memasukkan parameter lain apabila memanggil:

function list() { 
 return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 预定义参数37
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37] 
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3] 

Gunakan bersama setTimeout

Secara amnya, setTimeout() ini menghala ke tetingkap atau objek global. Apabila anda memerlukan ini untuk menunjuk kepada contoh kelas apabila menggunakan kaedah kelas, anda boleh menggunakan bind() untuk mengikat ini pada fungsi panggil balik untuk mengurus contoh.

function Bloomer() { 
 this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// 1秒后调用declare函数
Bloomer.prototype.bloom = function() { 
 window.setTimeout(this.declare.bind(this), 1000);
};

Bloomer.prototype.declare = function() { 
 console.log('我有 ' + this.petalCount + ' 朵花瓣!');
};

Nota: Kaedah di atas juga boleh digunakan untuk fungsi pengendalian acara dan kaedah setInterval

Fungsi ikat sebagai pembina

Fungsi terikat juga sesuai untuk menggunakan operator baharu untuk membina tika fungsi sasaran. Apabila menggunakan fungsi terikat untuk membina contoh, ambil perhatian: ini akan diabaikan, tetapi parameter yang dihantar masih akan tersedia.

function Point(x, y) { 
 this.x = x;
 this.y = y;
}

Point.prototype.toString = function() { 
 return this.x + ',' + this.y; 
};

var p = new Point(1, 2); 
p.toString(); // '1,2'


var emptyObj = {}; 
var YAxisPoint = Point.bind(emptyObj, 0/*x*/); 
// 实现中的例子不支持,
// 原生bind支持:
var YAxisPoint = Point.bind(null, 0/*x*/);

var axisPoint = new YAxisPoint(5); 
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true 
axisPoint instanceof YAxisPoint; // true 
new Point(17, 42) instanceof YAxisPoint; // true 

Dalam contoh di atas, Point dan YAxisPoint berkongsi prototaip, jadi ia adalah benar apabila menggunakan pengendali instanceof.

Pintasan

bind() juga boleh mencipta pintasan untuk fungsi yang memerlukan nilai ini yang khusus.

Sebagai contoh, jika anda ingin menukar objek seperti tatasusunan kepada tatasusunan sebenar, contoh yang mungkin adalah seperti berikut:

var slice = Array.prototype.slice;

// ...

slice.call(arguments); 

Jika anda menggunakan bind(), keadaan menjadi lebih mudah:

var unboundSlice = Array.prototype.slice; 
var slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments); 

Pencapaian

Ia boleh dilihat daripada bahagian di atas yang bind() mempunyai banyak senario penggunaan, tetapi fungsi bind() hanya ditambahkan dalam edisi kelima ECMA-262 ia mungkin tidak dijalankan pada semua penyemak imbas. Ini memerlukan kita untuk melaksanakan fungsi bind() sendiri.

Mula-mula kita hanya boleh melaksanakan kaedah bind() dengan menentukan skop untuk fungsi sasaran:

Function.prototype.bind = function(context){ 
 self = this; //保存this，即调用bind方法的目标函数
 return function(){
   return self.apply(context,arguments);
 };
};

Dengan mengambil kira fungsi kari, kita boleh membina bind():

Function.prototype.bind = function(context){ 
 var args = Array.prototype.slice.call(arguments, 1),
 self = this;
 return function(){
   var innerArgs = Array.prototype.slice.call(arguments);
   var finalArgs = args.concat(innerArgs);
   return self.apply(context,finalArgs);
 };
};

Kaedah bind() kali ini boleh mengikat objek dan juga menyokong lulus parameter semasa mengikat.

Melanjutkan, fungsi Javascript juga boleh digunakan sebagai pembina, jadi apabila fungsi terikat dipanggil dengan cara ini, keadaan lebih halus dan memerlukan pemindahan rantai prototaip:

Function.prototype.bind = function(context){ 
 var args = Array.prototype.slice(arguments, 1),
 F = function(){},
 self = this,
 bound = function(){
   var innerArgs = Array.prototype.slice.call(arguments);
   var finalArgs = args.concat(innerArgs);
   return self.apply((this instanceof F ? this : context), finalArgs);
 };

 F.prototype = self.prototype;
 bound.prototype = new F();
 return bound;
};

Ini ialah pelaksanaan bind() dalam buku "JavaScript Web Application": dengan menyediakan pembina transit F, fungsi terikat dan fungsi yang memanggil bind() berada pada rantai prototaip yang sama, dan operasi baharu digunakan operator memanggil fungsi terikat, dan objek yang dikembalikan juga boleh menggunakan instanceof biasanya, jadi ini adalah pelaksanaan bind() yang paling ketat.

Untuk menyokong fungsi bind() dalam penyemak imbas, anda hanya perlu mengubah suai sedikit fungsi di atas:

Function.prototype.bind = function (oThis) { 
  if (typeof this !== "function") {
   throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  }

  var aArgs = Array.prototype.slice.call(arguments, 1), 
    fToBind = this, 
    fNOP = function () {},
    fBound = function () {
     return fToBind.apply(
       this instanceof fNOP && oThis ? this : oThis || window,
       aArgs.concat(Array.prototype.slice.call(arguments))
     );
    };

  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();

  return fBound;
 };

Analisis ringkas di atas tentang penggunaan dan pelaksanaan kaedah bind() dalam Javascript adalah semua kandungan yang dikongsi oleh editor saya harap ia dapat memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.