„JavaScript Binding Method“ naudojimas

Kas yra „ bind() naudojimas javascript'e?

456
10 февр. Sandeepas Kumaras rinkosi vasario 10 d 2010-02-10 15:33 '10, 15:33, 2010-02-10 15:33
@ 14 atsakymų

„Bind“ sukuria naują funkciją, kuri turės this rinkinį pirmajam parametrams, perduotam prijungti bind() .

Toliau pateikiamas pavyzdys, rodantis, kaip naudoti bind kad perduotumėte nario metodą, kurio aplinkoje jis yra teisingas:

 var Button = function(content) { this.content = content; }; Button.prototype.click = function() { console.log(this.content + ' clicked'); }; var myButton = new Button('OK'); myButton.click(); var looseClick = myButton.click; looseClick(); // not bound, 'this' is not myButton - it is the global object var boundClick = myButton.click.bind(myButton); boundClick(); // bound, 'this' is myButton 

Kas spausdina:

 OK clicked undefined clicked OK clicked 

Taip pat galite pridėti papildomų parametrų po 1 ( this ) parametro, o bind šias vertes perkelia į pradinę funkciją. Bet kokie papildomi parametrai, kuriuos vėliau perduodate susijusiai funkcijai, bus perduoti po susijusių parametrų:

 // Example showing binding some parameters var sum = function(a, b) { return a + b; }; var add5 = sum.bind(null, 5); console.log(add5(10)); 

Kas spausdina:

 15 

Daugiau informacijos ir interaktyvių pavyzdžių žr.

Atnaujinimas: „ECMAScript 2015“ prideda paramą funkcijoms => . => labiau kompaktiški ir nekeičia this rodiklio nuo jų apibrėžimo srities, taigi jums gali prireikti ne naudoti bind() kaip dažnai. Pvz., Jei norite, kad Button pirmoje pavyzdyje funkcija prijungtų click skambutį į DOM įvykį, visi šie būdai yra teisingi:

 Button.prototype.hookEvent(element) { // Use bind() to ensure 'this' is the 'this' inside click() element.addEventListener('click', this.click.bind(this)); }; 

Arba:

 Button.prototype.hookEvent(element) { // Use a new variable for 'this' since 'this' inside the function // will not be the 'this' inside hookEvent() var me = this; element.addEventListener('click', function() { me.click() }); } 

Arba:

 Button.prototype.hookEvent(element) { // => functions do not change 'this', so you can use it directly element.addEventListener('click', () => this.click()); } 
475
12 апр. Atsakymą pateikė nkron balandžio 12 d 2012-04-12 03:46 '12 at 3:46 2012-04-12 03:46

susieti leidžia-

  • nustatykite „šio“ reikšmę konkrečiam objektui. Tai tampa labai naudinga, nes kartais tai nėra numatyta.
  • pakartotinio naudojimo metodai
  • atlikti funkciją

Pvz., Turite funkciją, pagal kurią išskaičiuojami mėnesiniai klubo mokesčiai.

 function getMonthlyFee(fee){ var remaining = this.total - fee; this.total = remaining; return this.name +' remaining balance:'+remaining; } 

Dabar norite naudoti šią funkciją kitam nariui. Atkreipkite dėmesį, kad mėnesinis mokestis priklauso nuo nario.

Įsivaizduokite, kad Rachelė turi pusiausvyrą - 500, o mėnesinis nario mokestis - 90.

 var rachel = {name:'Rachel Green', total:500}; 

Dabar sukurkite funkciją, kuri gali būti naudojama vėl ir vėl, kad būtų išskaičiuoti komisiniai iš savo sąskaitos kiekvieną mėnesį.

 //bind var getRachelFee = getMonthlyFee.bind(rachel, 90); //deduct getRachelFee();//Rachel Green remaining balance:410 getRachelFee();//Rachel Green remaining balance:320 

Dabar „getMonthlyFee“ funkcija gali būti naudojama kitam nariui, turinčiam skirtingą nario mokestį. Pavyzdžiui, „Ross Geller“ balansas yra 250 ir 25 mėnesio mokestis

 var ross = {name:'Ross Geller', total:250}; //bind var getRossFee = getMonthlyFee.bind(ross, 25); //deduct getRossFee(); //Ross Geller remaining balance:225 getRossFee(); //Ross Geller remaining balance:200 
143
29 нояб. Atsakymą pateikė KhanSharp 29 lapkritis. 2013-11-29 08:28 '13, 8:28 2013-11-29 08:28

Paprasčiausias bind() yra sukurti funkciją, kuri, neatsižvelgiant į tai, kaip ji vadinama, yra vadinama tam tikra reikšme.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind 

139
17 дек. Atsakymas duotas Renganathan MG 17 d. 2013-12-17 16:06 '13, 16:06, 2013-12-17 16:06

MDN dokumentųFunction.prototype.bind() :

Metodas jungia () sukuria naują funkciją, kuri, kai ji vadinama, turi savo raktinį žodį, atitinkantį tiekiamą vertę, nurodydama tam tikrą argumentų seką prieš bet kurią, pateiktą, kai vadinama nauja funkcija.

Taigi, ką tai reiškia?

Na, atlikite šią funkciją:

 var logProp = function(prop) { console.log(this[prop]); }; 

Dabar pasiimkite tokį objektą:

 var Obj = { x : 5, y : 10 }; 

Mes galime priskirti savo funkciją prie mūsų objekto taip:

 Obj.log = logProp.bind(Obj); 

Dabar mes galime paleisti „ Obj.log bet kurioje kodo vietoje:

 Obj.log('x'); // Output : 5 Obj.log('y'); // Output : 10 

Tai veikia, nes mes susiejome jo vertę su mūsų Obj objektu.


Jei tai tikrai įdomu, tai yra tada, kai jūs ne tik susiejate šios vertės vertę, bet ir jos argumentą:

 Obj.logX = logProp.bind(Obj, 'x'); Obj.logY = logProp.bind(Obj, 'y'); 

Dabar mes galime tai padaryti:

 Obj.logX(); // Output : 5 Obj.logY(); // Output : 10 

Skirtingai nei Obj.log mums nereikia praeiti x arba y , nes mes pasiekėme šias vertes, kai padarėme savo privalomąjį ryšį.

62
18 янв. John Slegers atsakymas Jan 18 2016-01-18 07:07 '16 at 7:07 2016-01-18 07:07

Teoriškai ir praktiškai paaiškinsiu privalomosios teorijos teoriją

„JavaScript“ susiejimas yra metodas - Function.prototype.bind. jungtis yra metodas. Tai vadinama funkcijų prototipu. Šis metodas sukuria funkciją, kurios kūnas yra panašus į funkciją, kuriai jis vadinamas, bet „tai“ reiškia pirmąjį parametrą, perduotą įpareigojimo metodui. Jo sintaksė

  var bindedFunc = Func.bind(thisObj,optionsArg1,optionalArg2,optionalArg3,...); 

Pavyzdys: -

  var checkRange = function(value){ if(typeof value !== "number"){ return false; } else { return value >= this.minimum  value <= this.maximum; } } var range = {minimum:10,maximum:20}; var boundedFunc = checkRange.bind(range); //bounded Function. this refers to range var result = boundedFunc(15); //passing value console.log(result) // will give true; 
11
22 апр. Atsakymas dinesh_malhotra balandžio 22 d 2014-04-22 13:28 '14, 14:28 PM 2014-04-22 13:28

Metodas jungtis () sukuria naują funkciją, kurios vertė yra susieta su verte, kuri buvo perduota susieti (). Pavyzdžiui:

  window.color = "red"; var o = { color: "blue" }; function sayColor(){ alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor(); //blue 

Čia yra sukurta nauja funkcija, vadinama objectSayColor (), sukurta iš sayColor (), skambinantį () ir einantį objektą o. Funkcija ObjectSayColor () turi tokią reikšmę, kuri yra lygi o, todėl funkcijų skambutis, net ir kaip pasaulinis skambutis, rodo eilutės „mėlynas“ rodymą.

Pagalba: Nikolajus K. Zakas - PROFESINIS JAVASCRIPT® WEB DEVELOPERS

9
28 марта '17 в 2:34 2017-03-28 02:34 atsakymą pateikė „ Otti “ kovo 28 d. 17 val. 2:34 2017-03-28 02:34

Sukurti naują funkciją, prijungiant argumentus vertybėms

bind metodas sukuria naują funkciją iš kitos funkcijos su vienu ar keliais argumentais, susietais su konkrečiomis vertybėmis, įskaitant netiesioginį argumentą.

Dalinis taikymas

Tai yra dalinio taikymo pavyzdys. Paprastai mes teikiame funkciją su visais savo argumentais, kurie suteikia vertę. Tai vadinama programos funkcija. Savo argumentams taikome funkciją.

Didesnio užsakymo funkcija (HOF)

Dalinė taikomoji programa yra aukštesnės eilės funkcijos (HOF) pavyzdys, nes jis suteikia naują funkciją su mažiau argumentų.

Įtraukti kelis argumentus

Galite naudoti „ bind konvertuoti funkcijas, turinčias kelis argumentus, į naujas funkcijas.

 <button>press me</button> <button>no press me</button> 
7
04 марта '17 в 6:29 2017-03-04 06:29 atsakymas pateikiamas cdiggins kovo 04–17 d. 6:29 2017-03-04 06:29

Santrauka:

Metodas bind() naudoja objektą kaip pirmąjį argumentą ir sukuria naują funkciją. Skambinant funkcijai, šios funkcijos reikšmė funkcijos elemente bus objektas, kuris buvo perduotas kaip argumentas į funkciją bind() .

Kaip this veikia JS

Šio „JavaScript“ reikšmė visada priklauso nuo to, kurį objektą funkcija yra įjungta. Šios vertės visada nurodo objektą, esantį kairėje nuo taško, iš kurio vadinama funkcija . Visuotinio matomumo atveju tai yra window (arba global nodeJS ). call , apply ir bind gali pakeisti šį įpareigojimą skirtingai. Pateikiamas pavyzdys, kaip šis raktinis žodis veikia:

 var name = 'globalName'; const obj = { name: 'myName', sayName: function () { console.log(this.name);} } const say = obj.sayName; // we are merely storing the function the value of this isn't magically transferred say(); // now because this function is executed in global scope this will refer to the global var const boundSay = obj.sayName.bind(obj); // now the value of this is bound to the obj object boundSay(); // Now this will refer to the name in the obj object: 'myName' 

Kai funkcija yra susieta su tam tikra verte, galime ją perduoti ir netgi įdėti į kitus objektus. To vertė išliks nepakitusi.

6
16 авг. Atsakymą pateikė Willem van der Veen , rugpjūčio 16 d. 2018-08-16 20:37 '18, 8:37 pm 2018-08-16 20:37

Kaip jau minėta, Function.bind() leidžia jums nurodyti kontekstą, kurį funkcija atliks (t. Y. Leidžia jums perduoti objektą, kuriam this raktinis žodis bus leistas funkcijoje).

Pora panašių įrankių rinkinio API metodų, atliekančių panašią paslaugą:

jQuery.proxy ()

Dojo.hitch ()

5
14 янв. Atsakymas pateikiamas mtyson sausio 14 d 2014-01-14 01:34 '14 at 1:34 2014-01-14 01:34

Kintamieji turi vietinį ir pasaulinį mastą, tarkime, kad jei turime du kintamuosius, turinčius tą patį pavadinimą, vienas yra apibrėžtas visame pasaulyje, o kitas yra apibrėžtas uždaroje funkcijoje, ir mes norime, kad jūs vadintumėte šios kintamojo vertę, kuri yra uždarytos funkcijos viduje, tada mes naudojame šį privalomąjį metodą. Žr. Paprastą pavyzdį:

 <!DOCTYPE html> <html> <body> <p id="demo1">0</p> <p id="demo2">0</p> </body> </html> 
5
28 окт. atsakymas, kurį pateikė krati agarwal, spalio 28 d 2017-10-28 09:24 '17 ne 9:24 am 2017-10-28 09:24
  window.myname = "Jineesh"; var foo = function(){ return this.myname; }; //IE < 8 has issues with this, supported in ecmascript 5 var obj = { myname : "John", fn:foo.bind(window)// binds to window object }; console.log( obj.fn() ); // Returns Jineesh 
3
09 июля '14 в 14:29 2014-07-09 14:29 Atsakymą pateikė Jineesh liepos 9 d. 14, 14:29 2014-07-09 14:29

Įrišimo funkcija sukuria naują funkciją, turinčią tą pačią funkciją atliekančią funkciją, kaip ir skambinama funkcija. Jis vadinamas šiuo argumentu. Kodėl mes naudojame linksmybes. : kai kiekvieną kartą sukuriamas naujas egzempliorius, ir mes turime naudoti pirmąją pradinę instanciją, mes naudojame linksmybės prijungimą. Negalime nepaisyti linksmybės įpareigojimo. jis tiesiog išlaiko pradinio klasės objektą.

 setInterval(this.animate_to.bind(this), 1000/this.difference); 
1
14 июня '13 в 14:33 2013-06-14 14:33 atsakymą pateikė vartotojo2485861 birželio 14 d. 14:33 2013-06-14 14:33

pradedantiesiems „JavaScript“ su „OOP“ fone, kaip ir aš, šį paprastą paaiškinimą supratau

https://www.youtube.com/watch?v=GhbhD1HR5vk

Galite šokinėti iki 5:00, bet rekomenduoju jį stebėti nuo pat pradžių.

0
12 янв. Atsakymą pateikė Lee Y Jan 12 2018-01-12 13:40 '18, 13:40 pm 2018-01-12 13:40

„bind“ yra funkcija, kuri yra „Java“ scenarijaus prototipe, nes siūlomo įpareigojimo pavadinimas naudojamas funkcijų skambinimui susieti su kontekstu, priklausomai nuo to, ką jūs suprantate, pvz .:

Peržiūrėkite kitus klausimus, susijusius su „ žymų arba Užduoti klausimą