JavaScript tämä

Sisällysluettelo

    Näytä sisällysluettelo

Esimerkki

const person = {
    firstName: "John",
  lastName : "Doe",
    id       : 5566,
    fullName : function() {
      return this.firstName + " " + this.lastName;
    }
};

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

Mikä tämä on?

JavaScriptissä tämä-avainsana viittaa objektiin.

Mikä objekti riippuu siitä, miten tätä kutsutaan (käytetään tai kutsutaan).

Avainsana tämä viittaa erilaisiin objekteihin sen käyttötavan mukaan:

  • Objektimenetelmässä tämä viittaa objektiin.

  • Yksin tämä viittaa globaaliin objektiin.

  • Funktiossa tämä viittaa globaaliin objektiin.

  • Funktion tiukassa tilassa tämä on määrittämätön.

  • Tapahtumassa tämä viittaa elementtiin, joka vastaanotti tapahtuman.

  • Menetelmät, kuten call(), apply() ja bind() voi viitata tähän mihin tahansa objektiin.

Huomautus

tämä ei ole muuttuja. Se on avainsana. Et voi muuttaa tämän arvoa.

tämä menetelmässä

Objektimenetelmässä käytettynä tämä viittaa objektiin.

Tämän sivun yläosassa olevassa esimerkissä tämä viittaa person-objektiin.

Koska fullName-metodi on person-objektin menetelmä.

fullName : function() {
    return this.firstName + " " + this.lastName;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

tämä yksin

Yksin käytettynä tämä viittaa globaaliin objektiin.

Koska tämä on käynnissä maailmanlaajuisesti.

Selainikkunassa yleinen objekti on [objektiikkuna]:

Esimerkki

let x = this;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>

<p id="demo"></p>

<script>
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

tiukassa tilassa, kun sitä käytetään yksinään, tämä viittaa myös globaaliin objektiin:

Esimerkki

 "use strict";
let x = this;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the window object:</p>
<p id="demo"></p>

<script>
"use strict";
let x = this;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

tämä funktiossa (oletus)

Funktiossa yleinen objekti on tämän oletussidonta.

Selainikkunassa yleinen objekti on [objektiikkuna]:

Esimerkki

function myFunction() {
    return this;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the the window object:</p>
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

tämä funktiossa (tiukka)

JavaScriptin tiukka tila ei salli oletussidontaa.

Joten kun sitä käytetään funktiossa tiukassa tilassa, tämä on määrittämätön.

Esimerkki

"use strict";
function myFunction() {
    return this;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In a function, by default, <b>this</b> refers to the global object.</p>

<p>Strict mode does not allow default binding, so <b>this</b> is:</p>
<p id="demo"></p>

<script>
"use strict";
document.getElementById("demo").innerHTML = myFunction();

function myFunction() {
  return this;
}
</script>

</body>
</html>

tämä Tapahtumakäsittelijöissä

HTML-tapahtumakäsittelijöissä tämä viittaa HTML-elementtiin, joka sai tapahtuma:

Esimerkki

 <button onclick="this.style.display='none'">
  Click to 
  Remove Me!
</button>

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<button onclick="this.style.display='none'">Click to Remove Me!</button>

</body>
</html>

Objektimenetelmän sidonta

Näissä esimerkeissä tämä on person-objekti:

Esimerkki

const person = {
    firstName  : "John",
    lastName   : "Doe",
    id         : 5566,
    myFunction : function() {
    return this;
  }
};

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>

<p>In this example, <b>this</b> refers to the <b>person object</b>.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName  : "John",
  lastName   : "Doe",
  id     : 5566,
  myFunction : function() {
    return this;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.myFunction();
</script>

</body>
</html>

Esimerkki

const person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
    return this.firstName + " " + 
this.lastName;
  }
};

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example, <b>this</b> refers to the <b>person</b> object.</p>
<p>Because <b>fullName</b> is a method of the person object.</p>

<p id="demo"></p>

<script>
// Create an object:
const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>

</body>
</html>

eli this.firstName on tämän (henkilöobjektin) firstName-ominaisuus.

Explicit Function Binding

Menetelmät call() ja apply() ovat ennalta määritettyjä JavaScript-menetelmiä.

Niitä molempia voidaan käyttää objektimetodin kutsumiseen toisen objektin argumenttina.

Katso myös:

Function call() -menetelmä

Function apply() -menetelmä

Funktio bind() -menetelmä

Alla olevassa esimerkissä henkilö1.fullName kutsuu henkilö2:ta argumenttina, tämä viittaa henkilö2:een, vaikka fullName on henkilö1:n metodi:

Esimerkki

const person1 = {
    fullName: function() {
      return this.firstName + " " + this.lastName;
    }
}

const person2 = {
    firstName:"John",
    lastName: "Doe",
}

// Return "John Doe":
person1.fullName.call(person2);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>The JavaScript <i>this</i> Keyword</h1>
<p>In this example <strong>this</strong> refers to person2, even if it is a method of person1:</p>

<p id="demo"></p>

<script>
const person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const person2 = {
  firstName:"John",
  lastName: "Doe",
}

let x = person1.fullName.call(person2); 
document.getElementById("demo").innerHTML = x; 
</script>

</body>
</html>

Lainaustoiminto

bind()-menetelmällä objekti voi lainata menetelmän toiselta objektilta.

Tämä esimerkki luo 2 objektia (henkilö ja jäsen).

Jäsenobjekti lainaa fullname-metodin henkilöobjektista:

Esimerkki

const person = {
  firstName:"John",
  lastName: "Doe",
    fullName: function () {
    return this.firstName + " " + this.lastName;
    }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Function bind()</h1>

<p>This example creates 2 objects (person and member).</p>
<p>The member object borrows the fullname method from person:</p> 

<p id="demo"></p>

<script>
const person = {
  firstName:"John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
}

const member = {
  firstName:"Hege",
  lastName: "Nilsen",
}

let fullName = person.fullName.bind(member);

document.getElementById("demo").innerHTML = fullName();
</script>

</body>
</html>

Tämä etusija

Määrittääksesi mihin objektiin tämä viittaa; käytä seuraavaa järjestysjärjestystä.

Precedence

Esine

1

sitoa()

2

hakea() ja soita()

3

Objektimenetelmä

4

Globaali ulottuvuus

Onko tämä funktiossa, jota kutsutaan bind()-funktiolla?

Onko tämä funktiossa, jota kutsutaan komennolla apply()?

Onko tämä funktiossa, jota kutsutaan call()-komennolla?

Onko tämä objektifunktiossa (menetelmässä)? <p>Onko tämä globaalissa funktiossa.