tämän ymmärtäminen, sido, Soita ja käytä Javascriptissä

Tämä artikkeli kirjoitettiin alun perin Digitaloceanille.

this avainsana on erittäin tärkeä käsite JavaScript, ja myös erityisen sekava yksi sekä uusia kehittäjille ja ne, jotka on kokemusta muita ohjelmointikieliä. Javascriptissä this on viittaus objektiin., Esine, joka this viittaa voi vaihdella, epäsuorasti perusteella, onko se on maailmanlaajuinen, esineen tai rakentaja, ja voi myös vaihdella nimenomaisesti perustuu käyttö Function prototyyppi menetelmiä bind, call, ja apply.

Vaikka this on hieman monimutkainen aihe, se on myös yksi, joka näkyy heti, kun aloitat kirjoittamisen ensimmäinen JavaScript-ohjelmia., Olitpa yrittää käyttää elementti tai tapahtuma Document Object Model (DOM) -, rakennus-luokat kirjallisesti olio-ohjelmointi tyyli, tai käyttää ominaisuuksia ja menetelmiä säännöllisesti esineitä, tulet kohtaamaan this.

tässä artikkelissa, voit oppia, mitä this viittaa implisiittisesti perustuu yhteydessä, ja opit, miten käyttää bind, call, ja apply menetelmiä nimenomaisesti määrittää arvon this.,

Implisiittinen Yhteydessä

On olemassa neljä pääasiallista yhteyksissä, joissa arvo this voidaan epäsuorasti päätellä:

• globaalisti
• menetelmänä sisällä esine
• rakentaja on funktio tai luokka
• kuten DOM event handler

Maailmanlaajuinen

globaalissa yhteydessä, this viittaa globaaliin olioon. Kun työskentelet selaimessa, globaali konteksti on window. Kun olet töissä solmussa.JS, the global context is global.,

Huomautus: Jos et ole vielä tuttu käsite soveltamisala JavaScript, tutustu Ymmärrystä Muuttujia, Laajuus, ja Nosto JavaScript.

esimerkkejä, voit harjoitella koodin selaimen Kehittäjän Työkalut konsoli. Lue, miten JavaScript-Kehittäjäkonsolia käytetään, jos JavaScript-koodin käyttö selaimessa ei ole sinulle tuttua.

Jos kirjaudut arvo this ilman muuta koodia, näet mitä esine this viittaa.,

console.log(this)

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Voit nähdä, että this on window, joka on globaali esine selaimen.

Ymmärtää, Muuttujat, Laajuus, ja Nosto JavaScript, olet oppinut, että toiminnot on omat yhteydessä muuttujia. Saatat olla taipuvainen ajattelemaan, että this noudattaisi samoja sääntöjä funktion sisällä, mutta se ei. Ylätason funktio säilyttää edelleenthis referenssin globaalista objektista.,

kirjoita top-level-toiminto, tai toiminto, joka ei liity tahansa esine, kuten tämä:

function printThis() { console.log(this)}printThis()

Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

Jopa sisällä toiminto, this viittaa edelleen window, tai globaali objekti.

Kuitenkin, kun käytät tiukka tila, yhteydessä this sisällä toiminto maailmanlaajuisen yhteydessä tulee undefined.,

'use strict'function printThis() { console.log(this)}printThis()

undefined

Yleensä, se on turvallisempaa käytä tiukka tila vähentää todennäköisyys this ottaa odottamattoman soveltamisalaan. Harvoin tulee joku haluaa viitata window objektin this.

lisätietoja tiukka tila ja mitä muutoksia se tekee koskevia virheitä ja turvallisuus, lukea tiukka tila asiakirjat MDN.,

Objektin Menetelmä

menetelmä on funktio objektin, tai tehtävä, jonka objekti voi suorittaa. Menetelmässä käytetään this viittaamaan kohteen ominaisuuksiin.

"The United States of America was founded in 1776."

tässä esimerkissä this on sama kuin america.

sisäkkäiseen objekti, this viittaa tämänhetkiseen olioon soveltamisala menetelmä. Seuraavassa esimerkissä this.symbol sisällä details objekti viittaa details.symbol.,

"The symbol is the eagle and the currency is USD."

Toinen tapa ajatella asiaa on, että this viittaa objektin vasemmalla puolella piste kun soitat menetelmä.

Toiminto Rakentaja

Kun käytät new avainsana, se luo esimerkiksi rakentaja funktio tai luokka. Toiminto rakentajat olivat standardi tapa alustaa käyttäjän määrittämä objekti ennen class syntax otettiin käyttöön ECMAScript 2015-päivitys JavaScript., JavaScript-kurssien ymmärtämisessä opit luomaan funktion konstruktorin ja vastaavan luokan constructorin.

"The United States of America was founded in 1776."

tässä yhteydessä this on nyt sidottu esimerkiksi Country, joka sisältyy america vakio.

A-Luokan Konstruktorin

konstruktori luokan toimii sama kuin rakentaja toiminto. Lue lisää Funktion rakentajien ja ES6-luokkien yhtäläisyyksistä ja eroista JavaScript-tunneissa.,

this describe tapa viittaa esimerkiksi Country, joilla on america.

"The United States of America was founded in 1776."

DOM Event Handler

selaimessa, on erityinen this yhteydessä tapahtuman käsittelijät. Event handler kutsutaan addEventListener, this viittaa event.currentTarget., Useammin kuin ei, kehittäjät yksinkertaisesti käyttää event.target tai event.currentTarget tarvittaessa käyttää elementtejä DOM, mutta koska this viite muutoksia tässä yhteydessä, se on tärkeää tietää.

seuraavassa esimerkissä luomme painiketta, lisätä tekstiä, ja liittää se DOM. Kun kirjaamme this arvon tapahtumankäsittelijään, se tulostaa kohteen.,

<button>Click me</button>

Kun olet liitä tämä selaimeesi, voit nähdä painiketta, liitetään sivu, jossa lukee ”Klikkaa minua”. Jos napsautat painiketta, näet <button>Click me</button> näkyvät konsoli, kuin klikkaamalla painiketta lokit elementti, joka on itse painike. Siksi, kuten voitte nähdä, this viittaa suunnattu elementti, joka on elementti, lisäsimme tapahtuman kuuntelija.,

Avointa Yhteydessä

kaikki aiemmat esimerkit, arvo this määräytyi sen yhteydessä—onko se on maailmanlaajuinen, esine, on rakennettu funktio tai luokka, tai DOM event handler. Kuitenkin, käyttäen call, apply tai bind, voit erikseen määrittää, mitä this pitäisi viitata.,

on vaikea määritellä tarkkaan, milloin käyttää call, apply tai bind, niin se riippuu yhteydessä oman ohjelman. bind voi olla erityisen hyödyllinen, kun haluat käyttää tapahtumia pääsyn ominaisuuksia yhden luokan sisällä toisen luokan. Esimerkiksi, jos olit kirjoittaa yksinkertainen peli, saatat erottaa käyttöliittymä ja I/O yhteen luokkaan, ja pelin logiikka ja valtion toiseen., Koska peli logiikka täytyy käyttää input, kuten painamalla-näppäintä ja valitsemalla, että haluat bind tapahtumat-yhteys this arvo pelin logiikka luokan.

tärkeä osa on tietää, miten määrittää, mikä objekti this viittaa, jossa voit tehdä epäsuorasti, mitä olet oppinut aiemmissa osissa, tai erikseen kolme menetelmiä voit oppia seuraava.,

Soita ja Soveltaa

call ja apply ovat hyvin samankaltaisia—ne vetoavat toiminto, jossa on määritelty this yhteydessä, ja valinnaisia argumentteja. Ainoa ero call ja apply että call vaatii perusteluja olla kulunut yksi-by-one, ja apply argumentteja, kuten array.,

tässä esimerkissä, voimme luoda objekti, ja luoda toiminto, joka viittaa this mutta ei this yhteydessä.

"undefined was written by undefined"

Koska summary ja book ei ole yhteyttä, vetoamalla summary itse vain tulostaa undefined, niin se etsii näitä ominaisuuksia globaali objekti.,

Huomautus: tämä Yrittää tarkassa tilassa olisi tulos Uncaught TypeError: Cannot read property 'title' of undefined, niin this itse olisi undefined.

Kuitenkin, voit käyttää call ja apply herättää this yhteydessä book toiminto.,

summary.call(book)// or:summary.apply(book)

"Brave New World was written by Aldous Huxley."

Siellä on nyt yhteys book ja summary kun näitä menetelmiä sovelletaan. Vahvistetaan tarkalleen, mitä this on.

function printThis() { console.log(this)}printThis.call(book)// or:whatIsThis.apply(book)

{title: "Brave New World", author: "Aldous Huxley"}

tässä tapauksessa this oikeastaan tulee objekti välitetään argumenttina.

Tämä on miten call ja apply ovat samoja, mutta siellä on yksi pieni ero., Lisäksi mahdollisuus siirtää this yhteydessä, sillä ensimmäinen argumentti, voit myös siirtää muita argumentteja läpi.

function longerSummary(genre, year) { console.log( `${this.title} was written by ${this.author}. It is a ${genre} novel written in ${year}.`, )}

call jokainen ylimääräinen arvo, jonka haluat siirtää lähetetään ylimääräinen argumentti.,

longerSummary.call(book, 'dystopian', 1932)

"Brave New World was written by Aldous Huxley. It is a dystopian novel written in 1932."

Jos yrität lähettää täsmälleen sama perustelut apply tämä on, mitä tapahtuu:

longerSummary.apply(book, 'dystopian', 1932)

Uncaught TypeError: CreateListFromArrayLike called on non-object at <anonymous>:1:15

sen Sijaan apply, sinun on läpäistävä kaikki argumentit array.

longerSummary.apply(book, )

"Brave New World was written by Aldous Huxley. It is a dystopian novel written in 1932."

ero kulkee argumentteja yksittäin tai array on hienovarainen, mutta se on tärkeää olla tietoinen., Saattaa olla yksinkertaisempaa ja kätevämpää käyttää apply, koska se ei edellyttäisi funktiokutsun muuttamista, jos jotkin parametritiedot muuttuisivat.

Sitovat

Molempien call ja apply ovat yksi-aikaa käyttää menetelmiä,—jos voit kutsua metodia this yhteydessä se on se, mutta alkuperäinen toiminto säilyy ennallaan.,

Joskus sinun täytyy ehkä käyttää menetelmää uudestaan ja uudestaan this yhteydessä toisen objektin, ja siinä tapauksessa voisit käyttää bind tapa luoda uusi toiminto, jossa on nimenomaisesti sidottu this.

const braveNewWorldSummary = summary.bind(book)braveNewWorldSummary()

"Brave New World was written by Aldous Huxley"

tässä esimerkki, joka kerta kun soittaa braveNewWorldSummary, se palaa aina alkuperäiseen this arvo on sidottu siihen., Yrität sitoa uusi this yhteydessä se ei onnistu, niin voit aina luottaa sidottu funktio palauttaa this arvo odotat.

Vaikka tämä esimerkiksi yrittää sitoa braveNewWorldSummary jälleen kerran, se säilyttää alkuperäisen this yhteydessä ensimmäisen kerran se oli sidottu.

Nuoli Toiminnot

Nuoli toimintoja ei ole omaa this sitova. Sen sijaan ne menevät seuraavalle teloitustasolle.,

Se voi olla hyödyllistä käyttää nuoli toiminto tapauksissa, joissa todella haluat this viitata ulompi yhteydessä. Esimerkiksi, jos sinulla oli tapahtuman kuuntelija sisällä luokka, olet luultavasti halua this viitata joitakin arvo-luokassa.

tässä esimerkissä, voit luoda ja liittää painiketta DOM kuin ennen, mutta luokka on tapahtuman kuuntelija, joka muuttaa tekstin arvo-painiketta, kun napsautetaan.

Jos klikkaat painiketta, tekstin sisältö muuttuu arvo buttonText., Jos et olisi käyttänyt nuoli toiminto tässä, this olisi yhtä suuri kuin event.currentTarget, ja et voi käyttää arvo luokassa ilman erikseen sitovia. Tätä taktiikkaa käytetään usein luokkamenetelmissä React-järjestelmän kaltaisissa kehyksissä.

Johtopäätös

tässä artikkelissa, olet oppinut this JavaScript, ja monia erilaisia arvoja, se saattaa olla perustuu implisiittisesti runtime sitova, ja selkeä sitova kautta bind, call ja apply., Olet myös oppinut, miten puute this sitovia nuoli toimintoja voidaan käyttää viittaamaan eri yhteydessä. Tämän tiedon, sinun pitäisi pystyä määrittämään arvo this ohjelmat.