W tym samouczku nauczysz się funkcji konstruktora JavaScript na podstawie przykładów.
W JavaScript do tworzenia obiektów używana jest funkcja konstruktora. Na przykład,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
W powyższym przykładzie function Person()jest funkcją konstruktora obiektów.
Aby utworzyć obiekt z funkcji konstruktora, używamy newsłowa kluczowego.
Uwaga : za dobrą praktykę uważa się pisanie wielkimi literami pierwszej litery funkcji konstruktora.
Utwórz wiele obiektów za pomocą funkcji konstruktora
W JavaScript można tworzyć wiele obiektów z funkcji konstruktora. Na przykład,
// 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
W powyższym programie dwa obiekty są tworzone przy użyciu tej samej funkcji konstruktora.
JavaScript to słowo kluczowe
W JavaScript, gdy thissłowo kluczowe jest używane w funkcji konstruktora, thisodnosi się do obiektu podczas tworzenia obiektu. Na przykład,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
W związku z tym, gdy obiekt uzyskuje dostęp do właściwości, może uzyskać bezpośredni dostęp do właściwości jako person1.name.
Parametry funkcji konstruktora JavaScript
Możesz także utworzyć funkcję konstruktora z parametrami. Na przykład,
// 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"
W powyższym przykładzie podczas tworzenia obiektu przekazaliśmy argumenty do funkcji konstruktora.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Dzięki temu każdy obiekt ma inne właściwości. Jak pokazane powyżej,
console.log(person1.name); daje John
console.log(person2.name); daje Sam
Utwórz obiekty: funkcja konstruktora kontra literał obiektu
- Literał obiektu jest zwykle używany do tworzenia pojedynczego obiektu. Funkcja konstruktora jest przydatna, jeśli chcesz utworzyć wiele obiektów. Na przykład,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- Każdy obiekt utworzony z funkcji konstruktora jest unikalny. Możesz mieć te same właściwości, co funkcja konstruktora lub dodać nową właściwość do jednego konkretnego obiektu. Na przykład,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Teraz ta agewłaściwość jest unikalna dla person1obiektu i nie jest dostępna dla person2obiektu.
Jednakże, jeśli obiekt jest tworzony za pomocą literału obiektu i jeśli zmienna jest zdefiniowana z tą wartością obiektu, wszelkie zmiany wartości zmiennej zmienią oryginalny obiekt. Na przykład,
// 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
Gdy obiekt jest tworzony za pomocą literału obiektu, każda zmienna obiektu pochodząca z tego obiektu będzie działała jako klon oryginalnego obiektu. W związku z tym każda zmiana wprowadzona w jednym obiekcie będzie również odzwierciedlać inny obiekt.
Dodawanie właściwości i metod do obiektu
Możesz dodać właściwości lub metody w obiekcie takim jak ten:
// 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();
Wynik
hello Uncaught TypeError: person2.greet nie jest funkcją
W powyższym przykładzie do obiektu dodawana jest nowa właściwość genderi nowa metoda .greet()person1
Jednak ta nowa właściwość i metoda są dodawane tylko do person1. Nie możesz uzyskać dostępu genderani greet()z person2. Dlatego program wyświetla błąd, gdy próbujemy uzyskać dostępperson2.greet();
Prototyp obiektu JavaScript
Możesz także dodać właściwości i metody do funkcji konstruktora przy użyciu prototypu . Na przykład,
// 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
Aby dowiedzieć się więcej o prototypach, odwiedź Prototyp JavaScript.
Konstruktory wbudowane w JavaScript
JavaScript ma również wbudowane konstruktory. Niektórzy z nich są:
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
W JavaScript ciągi można tworzyć jako obiekty przez:
const name = new String ('John'); console.log(name); // "John"
W JavaScript liczby można tworzyć jako obiekty poprzez:
const number = new Number (57); console.log(number); // 57
W JavaScript wartości logiczne można tworzyć jako obiekty przez:
const count = new Boolean(true); console.log(count); // true
Uwaga : zaleca się używanie pierwotnych typów danych i tworzenie ich w normalny sposób, na przykład const name = 'John';, const number = 57;iconst count = true;
Nie należy deklarować łańcuchów, liczb i wartości logicznych jako obiektów, ponieważ spowalniają one program.
Uwaga : W JavaScript słowo kluczowe classzostało wprowadzone w ES6 (ES2015), co pozwala nam również tworzyć obiekty. Klasy są podobne do funkcji konstruktorów w JavaScript. Aby dowiedzieć się więcej, odwiedź zajęcia JavaScript.
