В этом руководстве вы узнаете о функции конструктора JavaScript с помощью примеров.
В JavaScript для создания объектов используется функция-конструктор. Например,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person = new Person();
В приведенном выше примере function Person()это функция конструктора объекта.
Чтобы создать объект из функции-конструктора, мы используем newключевое слово.
Примечание : считается хорошей практикой использовать первую букву функции-конструктора с заглавной буквы.
Создание нескольких объектов с помощью функции конструктора
В JavaScript вы можете создать несколько объектов из функции-конструктора. Например,
// 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
В приведенной выше программе два объекта создаются с использованием одной и той же функции-конструктора.
JavaScript это ключевое слово
В JavaScript, когда thisключевое слово используется в функции конструктора, thisотносится к объекту при создании объекта. Например,
// constructor function function Person () ( this.name = 'John', ) // create object const person1 = new Person(); // access properties console.log(person1.name); // John
Следовательно, когда объект обращается к свойствам, он может напрямую обращаться к свойству как person1.name.
Параметры функции конструктора JavaScript
Вы также можете создать функцию-конструктор с параметрами. Например,
// 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"
В приведенном выше примере мы передали аргументы функции-конструктору во время создания объекта.
const person1 = new Person('John', 23, 'male'); const person2 = new Person('Sam', 25, 'male');
Это позволяет каждому объекту иметь разные свойства. Как показано выше,
console.log(person1.name); дает Джону
console.log(person2.name); дает Сэму
Создание объектов: функция-конструктор против литерала объекта
- Object Literal обычно используется для создания одного объекта. Функция конструктора полезна, если вы хотите создать несколько объектов. Например,
// using object literal let person = ( name: 'Sam' )
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person();
- Каждый объект, созданный с помощью функции-конструктора, уникален. Вы можете иметь те же свойства, что и функция-конструктор, или добавить новое свойство к одному конкретному объекту. Например,
// using constructor function function Person () ( this.name = 'Sam' ) let person1 = new Person(); let person2 = new Person(); // adding new property to person1 person1.age = 20;
Теперь это ageсвойство уникально для person1объекта и недоступно для person2объекта.
Однако, если объект создан с помощью литерала объекта, и если переменная определена с этим значением объекта, любые изменения значения переменной изменят исходный объект. Например,
// 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
Когда объект создается с помощью литерала объекта, любая объектная переменная, производная от этого объекта, будет действовать как клон исходного объекта. Следовательно, любое изменение, внесенное вами в один объект, отразится и на другом объекте.
Добавление свойств и методов в объект
Вы можете добавить свойства или методы в объект следующим образом:
// 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();
Вывод
привет, Uncaught TypeError: person2.greet не является функцией
В приведенном выше примере к объекту добавляются новое свойство genderи новый метод .greet()person1
Однако это новое свойство и метод только добавляются в person1. Вы не можете получить доступ genderили greet()от person2. Следовательно, программа выдает ошибку, когда мы пытаемся получить доступperson2.greet();
Прототип объекта JavaScript
Вы также можете добавить свойства и методы к функции-конструктору, используя прототип . Например,
// 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
Чтобы узнать больше о прототипах, посетите JavaScript Prototype.
Встроенные конструкторы JavaScript
В JavaScript также есть встроенные конструкторы. Некоторые из них:
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
В JavaScript строки могут быть созданы как объекты:
const name = new String ('John'); console.log(name); // "John"
В JavaScript числа могут быть созданы как объекты:
const number = new Number (57); console.log(number); // 57
В JavaScript логические значения могут быть созданы как объекты:
const count = new Boolean(true); console.log(count); // true
Примечание : рекомендуется использовать примитивные типы данных и создавать их обычным способом, например const name = 'John';, const number = 57;иconst count = true;
Вы не должны объявлять строки, числа и логические значения как объекты, потому что они замедляют работу программы.
Примечание . В JavaScript ключевое слово classбыло введено в ES6 (ES2015), что также позволяет нам создавать объекты. Классы похожи на функции-конструкторы в JavaScript. Чтобы узнать больше, посетите классы JavaScript.
