Rumah > hujung hadapan web > tutorial js > Analisis mendalam tentang fungsi kari dalam kemahiran JavaScript_javascript

Analisis mendalam tentang fungsi kari dalam kemahiran JavaScript_javascript

WBOY
Lepaskan: 2016-05-16 15:02:55
asal
1335 orang telah melayarinya

Asal usul kari ialah nama ahli matematik Haskell Curry (bahasa pengaturcaraan Haskell juga dinamakan sempena namanya).

Currying biasanya juga dipanggil penilaian separa, yang bermaksud menghantar parameter kepada fungsi langkah demi langkah, menggunakan sebahagian parameter selepas setiap laluan, dan mengembalikan fungsi yang lebih khusus untuk menerima parameter yang selebihnya Ini boleh bersarang berbilang peringkat seperti ini Fungsi menerima beberapa parameter sehingga hasil akhir dikembalikan.

Oleh itu, proses karipap adalah proses melepasi parameter secara beransur-ansur, secara beransur-ansur menyempitkan skop fungsi yang berkenaan, dan secara beransur-ansur menyelesaikan masalah.

Mengarut fungsi penjumlahan
Menurut penilaian langkah demi langkah, mari lihat contoh mudah

var concat3Words = function (a, b, c) { 
  return a+b+c; 
}; 
 
var concat3WordsCurrying = function(a) { 
  return function (b) { 
    return function (c) { 
      return a+b+c; 
    }; 
  }; 
}; 
console.log(concat3Words("foo ","bar ","baza"));      // foo bar baza 
console.log(concat3WordsCurrying("foo "));         // [Function] 
console.log(concat3WordsCurrying("foo ")("bar ")("baza")); // foo bar baza 
Salin selepas log masuk

Seperti yang anda lihat, concat3WordsCurrying("foo ") ialah Fungsi Setiap panggilan mengembalikan fungsi baharu, yang menerima panggilan lain dan kemudian mengembalikan fungsi baharu sehingga keputusan akhir dikembalikan, Kemajuan langkah demi langkah. (PS: Ciri-ciri penutupan digunakan di sini)

Jadi sekarang kita melangkah lebih jauh Jika kita memerlukan lebih daripada 3 parameter untuk dilalui, kita boleh lulus seberapa banyak parameter yang kita mahu Apabila tiada parameter yang diluluskan, hasilnya adalah output?

Mula-mula mari kita lakukan pelaksanaan biasa:

var add = function(items){ 
  return items.reduce(function(a,b){ 
    return a+b 
  }); 
}; 
console.log(add([1,2,3,4])); 
Salin selepas log masuk

Tetapi jika diperlukan untuk mendarab setiap nombor dengan 10 dan kemudian menambahnya, maka:

var add = function (items,multi) { 
  return items.map(function (item) { 
    return item*multi; 
  }).reduce(function (a, b) { 
    return a + b 
  }); 
}; 
console.log(add([1, 2, 3, 4],10)); 
Salin selepas log masuk

Nasib baik, terdapat fungsi peta dan pengurangan Jika kita mengikuti model ini dan kini menambah 1 pada setiap item dan kemudian meringkaskannya, maka kita perlu menggantikan fungsi dalam peta.

Mari kita lihat pelaksanaan kari:

var adder = function () { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return _args.reduce(function (a, b) { 
        return a + b; 
      }); 
    } 
    [].push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
};   
var sum = adder(); 
 
console.log(sum);   // Function 
 
sum(100,200)(300);  // 调用形式灵活,一次调用可输入一个或者多个参数,并且支持链式调用 
sum(400); 
console.log(sum());  // 1000 (加总计算) 
Salin selepas log masuk

Penambah di atas ialah fungsi kari Ia mengembalikan fungsi baharu Fungsi baharu boleh menerima parameter baharu dalam kelompok dan menangguhkan pengiraan sehingga kali terakhir.

Fungsi kari universal

Kari yang lebih tipikal akan merangkumkan pengiraan terakhir ke dalam fungsi, dan kemudian menghantar fungsi ini sebagai parameter kepada fungsi kari, yang jelas dan fleksibel.

Sebagai contoh, jika setiap item didarab dengan 10, kita boleh lulus fungsi pemprosesan sebagai parameter:

var currying = function (fn) { 
  var _args = []; 
  return function () { 
    if (arguments.length === 0) { 
      return fn.apply(this, _args); 
    } 
    Array.prototype.push.apply(_args, [].slice.call(arguments)); 
    return arguments.callee; 
  } 
}; 
 
var multi=function () { 
  var total = 0; 
  for (var i = 0, c; c = arguments[i++];) { 
    total += c; 
  } 
  return total; 
}; 
 
var sum = currying(multi);  
  
sum(100,200)(300); 
sum(400); 
console.log(sum());   // 1000 (空白调用时才真正计算)
Salin selepas log masuk

Dengan cara ini, sum = currying(multi), panggilannya sangat jelas, dan kesan penggunaannya juga cemerlang Contohnya, jika anda ingin mengumpul berbilang nilai, anda boleh menggunakan berbilang nilai sebagai parameter sum(. 1,2,3), yang juga boleh disokong Panggilan berantai, jumlah(1)(2)(3)

Asas karipap

Kod di atas sebenarnya adalah fungsi tertib tinggi Fungsi tertib tinggi merujuk kepada fungsi yang beroperasi pada fungsi Ia menerima satu atau lebih fungsi sebagai parameter dan mengembalikan fungsi baharu. Selain itu, ia juga bergantung pada ciri-ciri penutupan untuk menyimpan parameter yang dimasukkan dalam proses perantaraan. Iaitu:

Fungsi boleh diluluskan sebagai parameter
Fungsi boleh digunakan sebagai nilai pulangan fungsi
Penutupan
Peranan karipap
Pengiraan tertangguh. Contoh di atas agak mudah untuk dijelaskan.

Penggunaan semula parameter. Apabila fungsi yang sama dipanggil beberapa kali dan parameter yang dilalui kebanyakannya sama, maka fungsi itu mungkin menjadi calon yang baik untuk kari.

Buat fungsi secara dinamik. Ini boleh dilakukan dengan menjana fungsi baharu secara dinamik untuk mengendalikan perniagaan berikutnya selepas mengira sebahagian keputusan, sekali gus menghapuskan pengiraan berulang. Atau anda boleh mencipta fungsi baharu secara dinamik dengan menggunakan sebahagian daripada subset parameter yang akan dihantar ke dalam fungsi panggilan kepada fungsi Fungsi baharu ini menyimpan parameter yang dihantar berulang kali (anda tidak perlu menghantarnya setiap kali pada masa hadapan). Contohnya, penyemak imbas acara menambah kaedah pembantu untuk acara:

 var addEvent = function(el, type, fn, capture) { 
   if (window.addEventListener) { 
     el.addEventListener(type, function(e) { 
       fn.call(el, e); 
     }, capture); 
   } else if (window.attachEvent) { 
     el.attachEvent("on" + type, function(e) { 
       fn.call(el, e); 
     }); 
   } 
 }; 
Salin selepas log masuk

Setiap kali anda menambah pemprosesan acara, anda perlu melaksanakan jika...selain itu.... Sebenarnya, hanya satu pertimbangan diperlukan dalam penyemak imbas Fungsi baharu dijana secara dinamik berdasarkan hasil satu pertimbangan, jadi tidak perlu berbuat demikian pada masa hadapan.

var addEvent = (function(){ 
  if (window.addEventListener) { 
    return function(el, sType, fn, capture) { 
      el.addEventListener(sType, function(e) { 
        fn.call(el, e); 
      }, (capture)); 
    }; 
  } else if (window.attachEvent) { 
    return function(el, sType, fn, capture) { 
      el.attachEvent("on" + sType, function(e) { 
        fn.call(el, e); 
      }); 
    }; 
  } 
})(); 
Salin selepas log masuk

Dalam contoh ini, selepas penghakiman if...else... yang pertama, sebahagian daripada pengiraan selesai dan fungsi baharu dicipta secara dinamik untuk memproses parameter yang dihantar kemudian.

Kaedah Function.prototype.bind juga merupakan aplikasi kari

Berbeza daripada pelaksanaan langsung kaedah panggilan/guna, kaedah bind menetapkan parameter pertama sebagai konteks pelaksanaan fungsi, dan parameter lain dihantar kepada kaedah panggilan secara bergilir-gilir (badan fungsi itu sendiri tidak dilaksanakan dan boleh dianggap sebagai pelaksanaan tertunda), dan Ciptaan Dinamik mengembalikan fungsi baharu, yang mematuhi ciri-ciri karipap.

var foo = {x: 888}; 
var bar = function () { 
  console.log(this.x); 
}.bind(foo);        // 绑定 
bar();           // 888 
Salin selepas log masuk

Berikut ialah simulasi fungsi bind mencipta dan mengembalikan fungsi baharu Dalam fungsi baharu, fungsi yang benar-benar menjalankan perniagaan terikat kepada konteks yang dihantar sebagai parameter sebenar dan pelaksanaan ditangguhkan. .

Function.prototype.testBind = function (scope) { 
  var fn = this;          //// this 指向的是调用 testBind 方法的一个函数, 
  return function () { 
    return fn.apply(scope); 
  } 
}; 
var testBindBar = bar.testBind(foo); // 绑定 foo,延迟执行 
console.log(testBindBar);       // Function (可见,bind之后返回的是一个延迟执行的新函数) 
testBindBar();            // 888 
Salin selepas log masuk

Di sini kita harus memberi perhatian kepada pemahaman ini dalam prototaip.

Artikel di atas adalah analisis mendalam tentang fungsi kari dalam JavaScript Ini semua kandungan yang dikongsi oleh editor saya harap ia dapat memberi anda rujukan, dan saya harap anda akan menyokong Script Home.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan