Давайте демистифицировать ключевое слово JavaScript '' New '

Автор оригинала: FreeCodeCamp Community Member.

Cynthia Lee.

На выходных я закончил, будет endance’s JavaScript: жесткие части Отказ Это может не звучать как самый славный способ провести выходные, но я действительно нашел это довольно весело и расслабиться, чтобы завершить курс. Он коснулся функционального программирования, функций высшего порядка, закрывающихся и асинхронных JavaScript.

Для меня основной момент курса было то, как он расширился на подходах JavaScript к объектно-ориентированному программированию (OOP) и демистифицировал магию за Новый оператор. Теперь у меня всестороннее понимание того, что происходит под капотом, когда Новый Оператор используется.

Объектно-ориентированное программирование в JavaScript

Объектно-ориентированное программирование (OOP) – это парадигма программирования, основанная на концепции «объектов». Данные и функции (атрибуты и методы) входят в комплект объекта.

Объект в JavaScript – это коллекция пар клавишных значений. Эти пары ключевых ценностей являются свойствами объекта. Свойство может быть массивом, функцией, самой объектом или любым примитивным типом данных, такими как строки или целые числа.

Какие методы у нас в нашем наборе инструментов JavaScript для создания объекта?

Предположим, что мы создаем пользователей в игре, которую мы только что спроектировали. Как мы будем хранить детали пользователей, такие как их имена, точки и методы реализации, такие как приращение в пунктах? Вот два варианта создания основных объектов.

Вариант 1 – объектный буквальный обозначение

let user1 = {
  name: "Taylor",
  points: 5,
  increment: function() {
    user1.points++;
  }
};

Объект JavaScript Listal – это список пар именных пар, завернутых в фигурных скобках. В приведенном выше примере создается объект «User1», и связанные данные хранятся внутри нее.

Вариант 2 – Object.Create ()

Object.Create (Прото, [PropertaphyObject])

Object.Create Методы принимают два аргумента:

Прото: объект, который должен быть прототипом вновь созданного объекта. Это должно быть объектом или нулевым.
SomportsObject: свойства нового объекта. Этот аргумент является необязательным.

В основном вы переходите в Object.Create Объект, от которого вы хотите наследовать, и он возвращает новый объект, который наследует от объекта, который вы передали в него.

let user2 = Object.create(null);

user2.name = "Cam";
user2.points = 8;
user2.increment = function() {
  user2.points++;
}

Основные варианты создания объектов выше повторяются. Это требует, чтобы каждый был создан вручную.

Как мы преодолеем это?

Растворы

Решение 1 – генерировать объекты с использованием функции

Простое решение – написать функцию для создания новых пользователей.

function createUser(name, points) {
  let newUser = {};
  newUser.name = name;
  newUser.points = points;
  newUser.increment = function() {
    newUser.points++;
  };
  return newUser;
}

Чтобы создать пользователь, теперь вы введете информацию по параметрам функции.

let user1 = createUser("Bob", 5);
user1.increment();

Однако функция приращения в приведенном выше примере является просто копией исходной функции приращения. Это не хороший способ написать свой код, так как любые потенциальные изменения функции должны быть выполнены вручную для каждого объекта.

Решение 2 – используйте прототипную природу JavaScript

В отличие от объектно-ориентированных языков, таких как Python и Java, JavaScript не имеет классов. Он использует концепцию прототипов и прототипов цепочки для наследства.

Когда вы создаете новый массив, вы автоматически получаете доступ к встроенным методам, таким как Array.join , Array.sort и Array.Filter Отказ Это связано с тем, что объекты массива наследуют свойства от Array.Prototype.

Каждая функция JavaScript имеет свойство прототипа, который по умолчанию пуст. Вы можете добавить функции в этот прототип свойства, а в этой форме он известен как метод. Когда наследуемая функция выполнена, значение этой точки указывает на нанесение объекта.

function createUser(name, points) {
  let newUser = Object.create(userFunction);
  newUser.name = name;
  newUser.points = points;
  return newUser;
}

let userFunction = {
  increment: function() {this.points++};
  login: function() {console.log("Please login.")};
}

let user1 = createUser("Bob", 5);
user1.increment();

Когда User1 Объект был создан, была сформирована прототип цепной связи с пользовательской функцией.

Когда user1.increment () находится в стеке вызова, интерпретатор будет искать пользователя1 в глобальной памяти. Далее он будет искать функцию увеличения, но не найдет ее. Переводчик будет смотреть на следующий объект до цепочки прототипа и найдет там функцию приращения.

Решение 3 – новые и это ключевые слова

Новый Оператор используется для создания экземпляра объекта, который имеет функцию конструктора.

Когда мы называем функцию конструктора с новыми, мы автоматизируем следующие действия:

Новый объект создан
Это связывает это к объекту
Прототип функции конструктора становится свойством __PROTO__ нового объекта
Возвращает объект из функции

Это фантастическое, потому что автоматизация приводит к меньшему повторяющему коду!

function User(name, points) {
 this.name = name; 
 this.points = points;
}
User.prototype.increment = function(){
 this.points++;
}
User.prototype.login = function() {
 console.log("Please login.")
}

let user1 = new User("Dylan", 6);
user1.increment();

Используя образец прототипа, каждый способ и свойство добавляют непосредственно на прототип объекта.

Переводчик будет подняться на прототиповую цепочку и находить функцию приращения под свойством прототипа пользователя, который сам также является объектом с информацией внутри нее. Помните – Все функции в JavaScript также являются объектами Отказ Теперь, когда переводчик нашел то, что ему нужно, он может создать новый локальный контекст выполнения для запуска user1.increment () Отказ

Боковая заметка: разница между __Proto__ и прототипом

Если вы уже запутались в отношении __proto__ и прототипа, не волнуйтесь! Вы далеко не единственный, кто будет путать об этом.

Прототип является свойством функции конструктора, которая определяет, что станет свойством __PROTO__ на построенном объекте.

Итак, __proto__ – это эталон, созданная, и эта ссылка известна как прототип цепной связи.

Решение 4 – ES6 «синтаксический сахар»

Другие языки позволяют нам написать наши общие методы в объекте «Конструктор». Ecmascript6 представил Класс Ключевое слово, которое позволяет нам писать классы, которые напоминают нормальные классы других классических языков. На самом деле это синтаксический сахар по поводу прототипового поведения JavaScript.

class User {
  constructor(name, points) {
    this.name = name;
    this.points = points;
  }
  increment () {
    this.points++;
  }
  login () {
    console.log("Please login.")
  }
}

let user1 = new User("John", 12);
user1.increment();

В растворе 3 связанные методы были точно реализованы с использованием User.prototype.fuctlename Отказ В этом решении достигаются те же результаты, но синтаксис выглядит очистителем.

Заключение

Теперь мы узнали больше о различных вариантах, которые мы имеем в JavaScript для создания объектов. В то время как Класс Декларации и Новый Оператор относительно прост в использовании, важно понимать, что автоматически.

Рекомендовать, следующие действия автоматизированы, когда функция конструктора называется Новый :

Новый объект создан
Это связывает это к объекту
Прототип функции конструктора становится свойством __PROTO__ нового объекта
Возвращает объект из функции

Спасибо, что читая мою статью и хлопать, если вам понравилось! Проверьте мои другие статьи, такие как Как я построил свое приложение Pomodoro Clock, а уроки, которые я узнал по пути Отказ