Konstruktory JavaScriptu

Obsah

    Zobrazit obsah

Příklad

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

Poznámky

Za dobrou praxi se považuje pojmenování funkcí konstruktoru velkým prvním písmenem.

O tom

Ve funkci konstruktoru toto nemá hodnotu. Je to náhrada za nový objekt. Hodnota toto se stane novým objektem, když je vytvořen nový objekt.

Viz také:

Výukový tento JavaScript

Typy objektů (plány) (třídy)

Příklady z předchozích kapitol jsou omezené. Vytvářejí pouze jednotlivé objekty.

Někdy potřebujeme "návrh" pro vytvoření mnoha objektů stejného "typu".

Způsob, jak vytvořit "typ objektu", je použít funkci konstruktoru objektu.

Ve výše uvedeném příkladu je funkce Person() funkcí konstruktoru objektu.

Objekty stejného typu se vytvářejí voláním funkce konstruktoru s klíčovým slovem new:

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

Co je toto?

V JavaScriptu odkazuje klíčové slovo toto na objekt.

Který objekt závisí na tom, jak je tento vyvolán (použit nebo zavolán).

Klíčové slovo toto odkazuje na různé objekty v závislosti na tom, jak se používá:

  • V objektové metodě toto odkazuje na objekt.

  • Samotné toto odkazuje na globální objekt.

  • Ve funkci toto odkazuje na globální objekt.

  • Ve funkci je v přísném režimu toto nedefinováno.

  • V události toto odkazuje na prvek, který přijal událost.

  • Metody jako call(), apply() a bind() může odkazovat toto na jakýkoli objekt.

Poznámka

toto není proměnná. Je to klíčové slovo. Hodnotu toto nelze změnit.

Viz také:

Výukový tento JavaScript

Přidání vlastnosti k objektu

Přidání nové vlastnosti k existujícímu objektu je snadné:

Příklad

myFather.nationality = "English";

Zkuste to sami →

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

Vlastnost bude přidána do myFather. Ne mé matce. (Ne namítá žádné jiné osobě).

Přidání metody k objektu

Přidání nové metody do existujícího objektu je snadné:

Příklad

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

Zkuste to sami →

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

Metoda bude přidána do myFather. Ne mé matce. (Ne namítá žádné jiné osobě).

Přidání vlastnosti do konstruktoru

Do konstruktoru objektu nemůžete přidat novou vlastnost stejným způsobem jako vy přidat novou vlastnost k existujícímu objektu:

Příklad

Person.nationality = "English";

Zkuste to sami →

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

Chcete-li přidat novou vlastnost do konstruktoru, musíte ji přidat do funkce konstruktoru:

Příklad

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

Zkuste to sami →

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

Tímto způsobem mohou mít vlastnosti objektu výchozí hodnoty.

Přidání metody do konstruktoru

Vaše funkce konstruktoru může také definovat metody:

Příklad

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

Zkuste to sami →

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

Do konstruktoru objektu nemůžete přidat novou metodu stejným způsobem, jako přidáváte a novou metodu k existujícímu objektu.

Přidání metod do konstruktoru objektu musí být provedeno uvnitř funkce konstruktoru:

Příklad

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

Funkce changeName() přiřadí hodnotu jména osobě vlastnost příjmení.

Nyní můžete vyzkoušet:

myMother.changeName("Doe");

Zkuste to sami →

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

JavaScript ví, kdo jste mluvit o "nahrazením" toto za moje matka.

Vestavěné konstruktory JavaScriptu

JavaScript má vestavěné konstruktory pro nativní objekty:

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

Zkuste to sami →

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

Objekt Math() není v seznamu. Math je globální objekt. Klíčové slovo new nelze použít na Matematika.

Věděl jsi?

Jak můžete vidět výše, JavaScript má objektové verze primitiva datové typy Řetězec, Číslo a Boolean . Není ale důvod vytvářet složité objekty. Primitivní hodnoty jsou mnohem rychlejší:

Místo new String() použijte řetězcové literály "".

Místo new Number() použijte číselné literály 50.

Místo new Boolean() použijte booleovské literály true/false.

Místo new Object() použijte objektové literály {}.

Místo new Array() použijte literály pole [].

Místo nové RegExp() použijte vzorové literály /()/.

Místo new Function() použijte funkční výrazy () {}.

Příklad

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

Zkuste to sami →

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

Řetězcové objekty

Normálně se řetězce vytvářejí jako primitiva: firstName="John"

Řetězce však lze také vytvořit jako objekty pomocí klíčového slova new:
firstName=new String("John")

V této kapitole se dozvíte, proč by řetězce neměly být vytvářeny jako objekt JS řetězce.

Počet objektů

Normálně se čísla vytvářejí jako primitiva: x=30

Čísla však lze také vytvořit jako objekty pomocí klíčového slova new:
x=nové Číslo(30)

V této kapitole se dozvíte, proč by čísla neměla být vytvářena jako objekt JS čísla.

Booleovské objekty

Normálně jsou booleany vytvářeny jako primitiva: x = nepravda

Booleany však lze vytvořit také jako objekty pomocí klíčového slova new:
x=new Boolean(false)

V této kapitole se dozvíte, proč by se logické hodnoty neměly vytvářet jako objekt JS Booleans.