Ebben az oktatóanyagban példák segítségével megismerheti a JavaScript konstruktor funkciót.
A JavaScript-ben egy konstruktor funkciót használnak objektumok létrehozására. Például,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
A fenti példában function Person()egy objektum konstruktor függvény.
Egy objektum létrehozásához egy konstruktor függvényből a newkulcsszót használjuk .
Megjegyzés : Jó gyakorlatnak tartják, ha a konstruktor függvény első betűjét nagybetűvel írják.
Hozzon létre több objektumot a Konstruktor funkcióval
A JavaScript-ben több objektumot is létrehozhat egy konstruktor függvényből. Például,
// constructor function function Person () ( this.name = 'John', this.age = 23, this.greet = function () ( console.log('hello'); ) ) // create objects const person1 = new Person(); const person2 = new Person(); // access properties console.log(person1.name); // John console.log(person2.name); // John
A fenti programban két objektum jön létre ugyanazzal a konstruktor funkcióval.
JavaScript ezt a kulcsszót
A JavaScript-ben, amikor a thiskulcsot egy konstruktor függvényben használják, thisaz objektumra utal az objektum létrehozásakor. Például,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Ennélfogva, amikor egy objektum hozzáfér a tulajdonságokhoz, akkor közvetlenül is hozzáférhet a tulajdonsághoz person1.name.
JavaScript konstruktor funkcióparaméterek
Létrehozhat egy konstruktor függvényt is paraméterekkel. Például,
// constructor function function Person (person_name, person_age, person_gender) ( // assigning parameter values to the calling object this.name = person_name, this.age = person_age, this.gender = person_gender, this.greet = function () ( return ('Hi' + ' ' + this.name); ) ) // creating objects const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'female'); // accessing properties console.log(person1.name); // "John" console.log(person2.name); // "Sam"
A fenti példában argumentumokat adtunk át a konstruktor függvénynek az objektum létrehozása során.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Ez lehetővé teszi, hogy minden objektum különböző tulajdonságokkal rendelkezzen. Amint fentebb látható,
console.log(person1.name); adja John
console.log(person2.name); adja Sam
Objektumok létrehozása: Konstruktor függvény Vs Object Literal
- Az Object Literal általában egyetlen objektum létrehozására szolgál. A konstruktor funkció akkor hasznos, ha több objektumot akar létrehozni. Például,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- A konstruktor függvényből létrehozott minden objektum egyedi. Megadhatja ugyanazokat a tulajdonságokat, mint a konstruktor függvény, vagy új tulajdonságot adhat hozzá egy adott objektumhoz. Például,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Most ez a agetulajdonság egyedi az person1objektumon, és nem áll rendelkezésre az person2objektum számára.
Ha azonban egy objektumot egy objektum literál segítségével hozunk létre, és ha egy változót definiálunk azzal az objektum értékkel, akkor a változó értékének bármilyen változása megváltoztatja az eredeti objektumot. Például,
// using object lateral let person = ( name: 'Sam' ) console.log(person.name); // Sam let student = person; // changes the property of an object student.name = 'John'; // changes the origins object property console.log(person.name); // John
Ha egy objektumot egy objektum literál készít, akkor az abból származó bármely objektumváltozó az eredeti objektum klónjaként fog működni. Ezért az egyik objektumban végrehajtott bármilyen változás a másik objektumban is tükröződik.
Tulajdonságok és módszerek hozzáadása egy objektumhoz
Tulajdonságokat vagy módszereket adhat hozzá egy ilyen objektumhoz:
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding property to person1 object person1.gender = 'male'; // adding method to person1 object person1.greet = function () ( console.log('hello'); ) person1.greet(); // hello // Error code // person2 doesn't have greet() method person2.greet();
Kimenet
hello Uncaught TypeError: a person2.greet nem függvény
A fenti példában egy új tulajdonság genderés egy új módszer greet()kerül az person1objektumhoz.
Ez az új tulajdonság és módszer azonban csak hozzáadódik person1. Nem férhet hozzá, genderés nem greet()onnan person2. Ezért a program hibát ad, amikor megpróbálunk hozzáférniperson2.greet();
JavaScript objektum prototípus
A prototípus segítségével tulajdonságokat és módszereket is hozzáadhat a konstruktor funkcióhoz . Például,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects let person1 = new Person(); let person2 = new Person(); // adding new property to constructor function Person.prototype.gender = 'Male'; console.log(person1.gender); // Male console.log(person2.gender); // Male
Ha többet szeretne megtudni a prototípusokról, látogasson el a JavaScript Prototype oldalra.
JavaScript beépített konstruktorok
A JavaScript beépített konstruktorokkal is rendelkezik. Néhány közülük:
let a = new Object(); // A new Object object let b = new String(); // A new String object let c = new Number(); // A new Number object let d = new Boolean(); // A new Boolean object
A JavaScript-ben a karakterláncok objektumként hozhatók létre:
const name = new String ('John'); console.log(name); // "John"
A JavaScript-ben a számok objektumként hozhatók létre:
const number = new Number (57); console.log(number); // 57
A JavaScriptben logikai elemeket objektumként hozhat létre:
const count = new Boolean(true); console.log(count); // true
Megjegyzés : Javasoljuk, hogy használja primitív adattípusok és hozza létre azokat a szokásos módon, például const name = 'John';, const number = 57;ésconst count = true;
A karakterláncokat, számokat és logikai értékeket nem szabad objektumként deklarálni, mert ezek lelassítják a programot.
Megjegyzés : A JavaScript- classben az ES6-ban (ES2015) vezették be a kulcsszót , amely objektumok létrehozását is lehetővé teszi számunkra. Az osztályok hasonlóak a JavaScript konstruktor funkcióihoz. További információkért látogasson el a JavaScript osztályok oldalra.
