Конструкторы JavaScript

Примечания

Считается хорошей практикой называть функции-конструкторы первой буквой в верхнем регистре.

Об этом

В функции-конструкторе this не имеет значения. Это замена нового объекта. Значение this станет новым объектом, когда создается новый объект.

Смотрите также:

это руководство по JavaScript

Типы объектов (чертежи) (классы)

Примеры из предыдущих глав ограничены. Они создают только отдельные объекты.

Иногда нам нужен «план» для создания множества объектов одного и того же «типа».

Способ создания «типа объекта» — использование функции конструктора объекта.

В приведенном выше примере function Person() является функцией конструктора объекта.

Объекты одного типа создаются путем вызова функции-конструктора с ключевым словом new:

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

Что это это?

В JavaScript ключевое слово this относится к объекту.

Какой объект зависит от того, как этот вызывается (используется или вызывается).

Ключевое слово this относится к разным объектам в зависимости от того, как оно используется:

В объектном методе this относится к объекту.
Само по себе это относится к глобальному объекту.
В функции this относится к глобальному объекту.
В функции в строгом режиме это имеет значение не определено.
В событии this относится к элементу, получившему событие.
Такие методы, как call(), apply() и bind() может ссылаться на this на любой объект.

Примечание

это не является переменной. Это ключевое слово. Вы не можете изменить значение this.

Смотрите также:

это руководство по JavaScript

Добавление свойства к объекту

Добавить новое свойство к существующему объекту легко:

Пример

myFather.nationality = "English";

Попробуйте сами →

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

Свойство будет добавлено в myFather. Не моей матери. (Ни одному другому человеку не возражает).

Добавление метода к объекту

Добавить новый метод к существующему объекту легко:

Пример

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

Попробуйте сами →

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

Метод будет добавлен в myFather. Не моей матери. (Ни одному другому человеку не возражает).

Добавление свойства в конструктор

Вы не можете добавить новое свойство в конструктор объекта так же, как вы добавьте новое свойство к существующему объекту:

Пример

Person.nationality = "English";

Попробуйте сами →

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

Чтобы добавить новое свойство в конструктор, вы должны добавить его в функция конструктора:

Пример

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

Попробуйте сами →

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

Таким образом, свойства объекта могут иметь значения по умолчанию.

Добавление метода в конструктор

Ваша функция-конструктор также может определять методы:

Пример

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

Попробуйте сами →

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

Вы не можете добавить новый метод в конструктор объекта так же, как вы добавляете новый метод для существующего объекта.

Добавление методов в конструктор объекта должно выполняться внутри функция конструктора:

Пример

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

Функция ChangeName() присваивает значение имени имени человека. свойство LastName.

Теперь вы можете попробовать:

myMother.changeName("Doe");

Попробуйте сами →

<!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 знает, какой вы человек говорим, «заменив» это на myMother.

Встроенные конструкторы JavaScript

В JavaScript есть встроенные конструкторы для собственных объектов:

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

Попробуйте сами →

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

Объект Math() отсутствует в списке. Math - это глобальный объект. Ключевое слово new нельзя использовать в Математика.

Вы знали?

Как вы можете видеть выше, в JavaScript есть объектные версии примитива. типы данных String, Number и Boolean . Но нет смысла создавать сложные объекты. Примитивные значения намного быстрее:

Используйте строковые литералы "" вместо new String().

Используйте числовые литералы 50 вместо new Number().

Используйте логические литералы true/false вместо new Boolean().

Используйте литералы объектов {} вместо new Object().

Используйте литералы массива [] вместо new Array().

Используйте литералы шаблона /()/ вместо new RegExp().

Используйте функциональные выражения () { вместо new Function().

Пример

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

Попробуйте сами →

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

Строковые объекты

Обычно строки создаются как примитивы: firstName="John"

Но строки также можно создавать как объекты с помощью ключевого слова new:
firstName=новая строка("Джон")

Узнайте, почему строки не следует создавать как объекты в главе. JS-строки.

Числовые объекты

Обычно числа создаются как примитивы: x=30

Но числа также можно создавать как объекты с помощью ключевого слова new:
x=новый Номер(30)

Узнайте, почему числа не следует создавать как объекты в этой главе. JS-числа.

Логические объекты

Обычно логические значения создаются как примитивы: x = ложь

Но логические значения также можно создавать как объекты с помощью ключевого слова new:
x=новое логическое значение (false)

Узнайте, почему логические значения не следует создавать как объект, в этой главе. JS Булевы значения.

Конструкторы JavaScript

Оглавление

Пример

Примечания

Об этом

Смотрите также:

Типы объектов (чертежи) (классы)

Что это это?

Примечание

Смотрите также:

Добавление свойства к объекту

Пример

Добавление метода к объекту

Пример

Добавление свойства в конструктор

Пример

Пример

Добавление метода в конструктор

Пример

Пример

Теперь вы можете попробовать:

Встроенные конструкторы JavaScript

Вы знали?

Пример

Строковые объекты

Числовые объекты

Логические объекты