JavaScript konstruktorok

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Példa

function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Megjegyzések

Jó gyakorlatnak tekinthető, ha a konstruktor függvényeket nagy kezdőbetűvel nevezik el.

Erről

Egy konstruktor függvényben ennek nincs értéke. Ez az új objektum helyettesítője. A this értéke lesz az új objektum, amikor új objektum jön létre.

Lásd még:

A JavaScript ezt bemutatója

Objektumtípusok (tervrajzok) (osztályok)

Az előző fejezetekből származó példák korlátozottak. Csak egyedi objektumokat hoznak létre.

Néha szükségünk van egy "tervrajzra" sok azonos "típusú" objektum létrehozásához.

Az "objektumtípus" létrehozásának módja az objektumkonstruktor funkció használata.

A fenti példában a Személy() függvény egy objektumkonstruktor függvény.

Az azonos típusú objektumok a konstruktor függvénynek a new kulcsszóval történő meghívásával jönnek létre:

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

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 ezre bármely objektumra.

jegyzet

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

Lásd még:

A JavaScript ezt bemutatója

Tulajdonság hozzáadása egy objektumhoz

Új tulajdonság hozzáadása egy meglévő objektumhoz egyszerű:

Példa

myFather.nationality = "English";

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add nationality to first object
myFather.nationality = "English";

// Display nationality 
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality; 
</script>

</body>
</html>

Az ingatlan hozzá lesz adva a myFatherhez. Nem anyámnak. (Más személynek nem tiltakozik).

Metódus hozzáadása objektumhoz

Új metódus hozzáadása egy meglévő objektumhoz egyszerű:

Példa

myFather.name = function () {
  return this.firstName + " " + this.lastName;
};

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Add a name method to first object
myFather.name = function() {
  return this.firstName + " " + this.lastName;
};

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

A módszer hozzáadódik a myFatherhez. Nem anyámnak. (Más személynek nem tiltakozik).

Ingatlan hozzáadása a konstruktorhoz

Ugyanúgy nem adhat hozzá új tulajdonságot az objektumkonstruktorhoz, mint ahogyan te új tulajdonság hozzáadása egy meglévő objektumhoz:

Példa

Person.nationality = "English";

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

<p>You cannot add a new property to a constructor function.</p>

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

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

// You can NOT add a new property to a constructor function
Person.nationality = "English";

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

Ha új tulajdonságot szeretne hozzáadni egy konstruktorhoz, hozzá kell adnia azt a konstruktorhoz konstruktor függvény:

Példa

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

// Create 2 Person objects
const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

// Display nationality
document.getElementById("demo").innerHTML =
"My father is " + myFather.nationality + ". My mother is " + myMother.nationality; 
</script>

</body>
</html>

Így az objektumtulajdonságok alapértelmezett értékei lehetnek.

Metódus hozzáadása a konstruktorhoz

A konstruktor függvénye metódusokat is meghatározhat:

Példa

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
   
this.eyeColor = eyecolor;
  this.name = function() {
    return this.firstName + " " + this.lastName;
  };
}

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>

// Constructor function for Person objects
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.name = function() {
    return this.firstName + " " + this.lastName
  };
}

// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");

// Display full name
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 

</script>

</body>
</html>

Nem adhat hozzá új metódust objektumkonstruktorhoz ugyanúgy, mint a új metódus egy meglévő objektumhoz.

Metódusokat kell hozzáadni egy objektumkonstruktorhoz a konstruktor függvény:

Példa

function Person(firstName, lastName, age, eyeColor) {
  this.firstName = firstName;  
   
this.lastName = lastName;
   
this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
     
this.lastName = name;
  };
}

A changeName() függvény hozzárendeli a név értékét a személyhez vezetéknév tulajdonság.

Most kipróbálhatod:

myMother.changeName("Doe");

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>
// Constructor function for Person objects
function Person(firstName,lastName,age,eyeColor) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.age = age;
  this.eyeColor = eyeColor;
  this.changeName = function (name) {
    this.lastName = name;
  }
}
// Create a Person object
const myMother = new Person("Sally","Rally",48,"green");

// Change last name
myMother.changeName("Doe");

// Display last name
document.getElementById("demo").innerHTML =
"My mother's last name is " + myMother.lastName;
</script>

</body>
</html>

A JavaScript tudja, hogy Ön melyik személy arról beszélünk, hogy ezt az anyámra cseréljük.

Beépített JavaScript konstruktorok

A JavaScript beépített konstruktorokkal rendelkezik a natív objektumokhoz:

new String()    // A new String object
new Number()    // A new Number object
new Boolean()   // A new Boolean object
new Object()    // A new Object object
new Array()     // A new Array object
new RegExp()    // A new RegExp object
new Function()  // A new Function object
new Date()      // A new Date object

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Object Constructors</h2>

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

<script>
const x1 = new String();   // A new String object
const x2 = new Number();   // A new Number object
const x3 = new Boolean();  // A new Boolean object
const x4 = new Object();   // A new Object object
const x5 = new Array();    // A new Array object
const x6 = new RegExp();   // A new RegExp object
const x7 = new Function(); // A new Function object
const x8 = new Date();     // A new Date object

// Display the type of all objects
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>" +
"x8: " + typeof x8 + "<br>";
</script>

<p>There is no need to use new String(), new Number(), new Boolean(), new Array(), and new RegExp()</p>

<p>Use literals instead like: myArray = []</p>

</body>
</html>

A Math() objektum nem szerepel a listában. A Math egy globális objektum. A new kulcsszó nem használható ezen Matek.

Tudtad?

Mint fentebb látható, a JavaScript rendelkezik a primitív objektumverzióival adattípusok karakterlánc, szám és logikai . De nincs ok összetett objektumok létrehozására. Primitív értékek sokkal gyorsabbak:

Használja a "" karakterlánc-literálokat a new String() helyett.

Használja a 50 számliterálokat a new Number() helyett.

Használja a true/false logikai literálokat az new Boolean() helyett.

Használja a {} objektumliterálokat a new Object() helyett.

Használja a [] tömbliterálokat a new Array() helyett.

Használja a /()/ minta literálokat az új RegExp() helyett.

Használja a () {} függvénykifejezéseket a new Function() helyett.

Példa

let x1 = "";             // new primitive string
let x2 = 0;              // new primitive number
let x3 = false;          // new primitive boolean

const x4 = {};           // new Object object
const x5 = [];           // new Array object
const x6 = /()/          // new RegExp object
const x7 = function(){}; // new function

Próbálja ki Ön is →

<!DOCTYPE html>
<html>
<body>

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

<script>
let x1 = "";      // string 
let x2 = 0;       // number
let x3 = false;   // boolean
const x4 = {};    // Object object
const x5 = [];    // Array object
const x6 = /()/;  // RegExp object
const x7 = function(){};  // function

// Display the type of all
document.getElementById("demo").innerHTML =
"x1: " + typeof x1 + "<br>" +
"x2: " + typeof x2 + "<br>" +
"x3: " + typeof x3 + "<br>" +
"x4: " + typeof x4 + "<br>" +
"x5: " + typeof x5 + "<br>" +
"x6: " + typeof x6 + "<br>" +
"x7: " + typeof x7 + "<br>";
</script>

</body>
</html>

String objektumok

Általában a karakterláncok primitívekként jönnek létre: firstName="János"

A karakterláncok azonban objektumként is létrehozhatók a new kulcsszó használatával:
firstName=new String("János")

A fejezetből megtudhatja, miért nem szabad a karakterláncokat objektumként létrehozni JS Strings.

Szám objektumok

Általában a számok primitívekként jönnek létre: x=30

De a számok objektumként is létrehozhatók a new kulcsszó használatával:
x=új Szám(30)

A fejezetből megtudhatja, miért nem szabad számokat objektumként létrehozni JS számok.

Logikai objektumok

Általában a logikai értékek primitívekként jönnek létre: x = hamis

A logikai értékek azonban objektumként is létrehozhatók a new kulcsszó használatával:
x=új logikai érték(false)

A fejezetből megtudhatja, miért nem szabad objektumként létrehozni a logikai értékeket JS Booleans.