A teljes útmutató erre JavaScript-ben

Programozás

A JavaScript-ben minden függvénynek van egy thisreferenciája, amelyet automatikusan létrehoz, amikor deklarálja.

A JavaScript-ek thismeglehetősen hasonlítanak thismás osztályalapú nyelvek, például a Java vagy a C # referenciáihoz (a JavaScript prototípus-alapú nyelv és nincs „osztály” fogalom): Arra mutat, hogy melyik objektum hívja a függvényt (ezt az objektumot néha hívják) mint kontextus ). A JavaScript-ben azonban a thisfüggvényeken belüli hivatkozás különböző objektumokhoz köthető, attól függően, hogy hol hívják a függvényt .

Íme 5 alapvető szabály a thiskötelező bekötésre a JavaScript-ben:

1. szabály

Ha egy függvényt globális hatókörben hívnak meg, a thishivatkozás alapértelmezés szerint a globális objektumhoz van kötve ( windowa böngészőben vagy globala Node.js-ben). Például:

function foo() { this.a = 2; } foo(); console.log(a); // 2

Megjegyzés: Ha nyilvánítja a foo()funkciót fenti szigorú módban, akkor hívja ezt a funkciót globális hatókörű, thislesz undefinedés feladat this.a = 2fog dobni Uncaught TypeErrorkivétel.

2. szabály

Vizsgáljuk meg az alábbi példát:

function foo() { this.a = 2; } const obj = { foo: foo }; obj.foo(); console.log(obj.a); // 2

Nyilvánvaló, hogy a fenti kód, a foo()funkció kerül meghívásra a összefüggésben van objtárgy és thisreferencia most van kötve obj. Tehát amikor egy függvényt egy kontextus objektummal hívunk meg, a thishivatkozás ehhez az objektumhoz lesz kötve.

3. szabály

.call, .applyés .bindmindezek felhasználhatók a hívás helyén kifejezett kötéshez this. A használata .bind(this)olyasmi, amit meglehetősen sok React komponensben láthat.

const foo = function() { console.log(this.bar) } foo.call({ bar: 1 }) // 1

Itt van egy rövid példa arra, hogyan használják mindegyiket a kötéshez this:

  • .call(): fn.call(thisObj, fnParam1, fnParam2)
  • .apply(): fn.apply(thisObj, [fnParam1, fnParam2])
  • .bind(): const newFn = fn.bind(thisObj, fnParam1, fnParam2)

4. szabály

function Point2D(x, y) { this.x = x; this.y = y; } const p1 = new Point2D(1, 2); console.log(p1.x); // 1 console.log(p1.y); // 2

Amit észre kell venni, az a kulcsszóval Point2Dmeghívott függvény new, és a thishivatkozás p1objektumhoz van kötve . Tehát amikor egy függvényt newkulcsszóval hívnak meg , új objektumot hoz létre, és a thishivatkozás ehhez az objektumhoz lesz kötve.

Megjegyzés: Amint egy függvényt newkulcsszóval hívunk, konstruktor függvényként is hívjuk .

5. szabály

A JavaScript thisaz aktuális kontextus alapján határozza meg a futásidejű értéket . Tehát thisnéha másra is rámutathat, mint amire számít.

Tekintsük ezt a Cat osztály példáját egy úgynevezett módszerrel makeSound(), követve a fenti 4. szabály mintáját konstruktor függvény és newkulcsszó segítségével.

const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.makeSound(); // Fat Daddy says: Mrrooowww

Most próbáljuk meg adni a macskának az utat az annoy()emberek számára úgy, hogy fél másodpercenként egyszer megismételjük a hangját.

const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; this.annoy = function() { let count = 0, max = 100; const t = setInterval(function() { this.makeSound(); // <-- this line fails with `this.makeSound is not a function` count++; if (count === max) { clearTimeout(t); } }, 500); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.annoy();

Ez nem működik, mert a setIntervalvisszahíváson belül létrehoztunk egy új kontextust globális hatókörrel, így thismár nem mutatunk a cicás példányunkra. A webböngészőben thisehelyett a Windows objektumra mutat, amelynek nincs makeSound()metódusa.

Pár módszer a működéshez:

  1. Az új kontextus létrehozása előtt rendeljen thishozzá egy helyi nevű változóhoz me, vagy self, vagy bármilyen más néven hívja, és használja ezt a változót a visszahíváson belül.
const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; this.annoy = function() { let count = 0, max = 100; const self = this; const t = setInterval(function() { self.makeSound(); count++; if (count === max) { clearTimeout(t); } }, 500); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.annoy();
  1. Az ES6 használatával elkerülheti thisa helyi változóhoz való hozzárendelést egy nyílfüggvény használatával, amely thisa környező kód kontextusához kötődik , ahol meg van határozva.
const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; this.annoy = function() { let count = 0, max = 100; const t = setInterval(() => { this.makeSound(); count++; if (count === max) { clearTimeout(t); } }, 500); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.annoy();