JavaScript ezt

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Példa

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

Próbálja ki Ön is →

<!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>

Mi ez?

A JavaScriptben a ez a kulcsszó egy objektumra utal.

Melyik objektum attól függ, hogy ezt hogyan hívják meg (használják vagy hívják).

A ez a kulcsszó a használat módjától függően különböző objektumokra utal:

  • Egy objektummetódusban a ez az objektumra utal.

  • Önmagában ez a globális objektumra utal.

  • Egy függvényben a ez a globális objektumra utal.

  • Egy függvényben szigorú módban ez definiálatlan.

  • Egy eseményben a ez arra az elemre utal, amely az eseményt fogadta.

  • Olyan módszerek, mint a call(), apply() és a bind() utalhat erre a bármely objektumra.

jegyzet

ez nem változó. Ez egy kulcsszó. A ez értéke nem módosítható.

ezt egy módszerben

Objektummetódusban használva ez az objektumra utal.

Az oldal tetején lévő példában ez a person objektumra utal.

Mivel a fullName metódus a person objektum metódusa.

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

Próbálja ki Ön is →

<!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>

ezt Egyedül

Egyedül használva ez a globális objektumra utal.

Mivel a ez a globális hatókörben fut.

A böngészőablakban a globális objektum a következő: [object Window]:

Példa

let x = this;

Próbálja ki Ön is →

<!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>

Szigorú módban, ha önmagában használjuk, ez a globális objektumra is utal:

Példa

 "use strict";
let x = this;

Próbálja ki Ön is →

<!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>

ez egy függvényben (alapértelmezett)

Egy függvényben a globális objektum a ennek alapértelmezett összerendelése.

A böngészőablakban a globális objektum a következő: [object Window]:

Példa

function myFunction() {
    return this;
}

Próbálja ki Ön is →

<!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>

ezt egy függvényben (szigorú)

A JavaScript szigorú módja nem teszi lehetővé az alapértelmezett kötést.

Tehát, ha függvényben használjuk, szigorú módban ez definiálatlan.

Példa

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

Próbálja ki Ön is →

<!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>

ezt az Eseménykezelőkben

A HTML eseménykezelőkben ez arra a HTML elemre utal, amely megkapta a esemény:

Példa

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

Próbálja ki Ön is →

<!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>

Object Method Binding

Ezekben a példákban ez a személy objektum:

Példa

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

Próbálja ki Ön is →

<!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>

Példa

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

Próbálja ki Ön is →

<!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>

azaz a this.firstName a ennek (a személy objektum) firstName tulajdonsága.

Explicit Function Binding

A call() és az apply() metódusok előre meghatározott JavaScript-metódusok.

Mindkettő használható objektum metódus meghívására egy másik objektummal argumentumként.

Lásd még:

A függvényhívás() metódus

Az Apply() függvény

A függvény bind() metódusa

Az alábbi példa a person1.fullName-ot hívja meg a person2 argumentumával, ez a személy2-re vonatkozik, még akkor is, ha a fullName a person1 metódusa:

Példa

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

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

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

Próbálja ki Ön is →

<!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>

Funkció Kölcsönzés

A bind() metódussal egy objektum kölcsönözhet egy metódust egy másik objektumtól.

Ez a példa 2 objektumot hoz létre (személy és tag).

A tagobjektum a teljes név metódust kölcsönzi a személy objektumtól:

Példa

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);

Próbálja ki Ön is →

<!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>

Ez a elsőbbség

Annak meghatározásához, hogy a ez a melyik objektumra vonatkozik; használja a következő sorrend elsőbbségét.

Precedence

Tárgy

1

bind()

2

jelentkezz() és hívd()

3

Objektum módszer

4

Globális hatókör

A ez a egy olyan függvényben van, amelyet a bind() segítségével hívnak meg?

A ez a egy függvényben van, amelyet az apply() segítségével hívnak meg?

A ez a a call() segítségével meghívott függvényben van?

A ez a egy objektumfüggvényben (metódusban) van? <p>A ez egy globális hatókörű függvényben található.