Прототип JavaScript объяснил примерами

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

Прототипы

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

Прототип объекта

Ради ясности, давайте рассмотрим следующий пример:

function Point2D(x, y) {
  this.x = x;
  this.y = y;
}

Как Point2D Функция объявлена, свойство по умолчанию называется Прототип будет создан для него (обратите внимание, что в JavaScript функция также является объектом). Прототип Свойство – это объект, который содержит Конструктор Собственность и его значение – Point2D Функция: Point2d.prototype.Constructor Отказ И когда вы звоните Point2D с Новый ключевое слово, Недавно созданные объекты наследуют все свойства от Point2d.prototype Отказ Чтобы проверить это, вы можете добавить метод с именем Переместить в Point2d.prototype следующим образом:

Point2D.prototype.move = function(dx, dy) {
  this.x += dx;
  this.y += dy;
}

var p1 = new Point2D(1, 2);
p1.move(3, 4);
console.log(p1.x); // 4
console.log(p1.y); // 6

Point2d.prototype называется Прототип объекта или Прототип P1 объект и для любого другого объекта, созданного с Новый Point2D (...) синтаксис. Вы можете добавить больше свойств в Point2d.prototype объект, как вам нравится. Общий рисунок объявляет методы Point2d.prototype И другие свойства будут объявлены в функции конструктора.

Встроенные объекты в JavaScript построены аналогичным образом. Например:

• Прототип объектов, созданных с Новый объект () или {} Синтаксис это Объект. Прототип Отказ
• Прототип массивов, созданных с Новый массив () или [] Синтаксис это Array.Prototype Отказ
• И так далее с другими встроенными объектами, такими как Дата и Regexp Отказ

Объект. Прототип Унаследован всеми объектами, и у него нет прототипа (его прототип – это нулевой ).

Цепь прототипа

Механизм цепи прототипа прост: при доступе к недвижимости P на объекте obj Двигатель JavaScript ищет это свойство внутри obj объект. Если двигатель неисправен, он продолжает поиск в прототипе obj Объект и так далее до достижения Объект. Прототип Отказ Если после окончания поиска и ничего не нашел, результат будет undefined Отказ Например:

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = Object.create(obj1);
obj2.a = 2;

console.log(obj2.a); // 2
console.log(obj2.b); // 2
console.log(obj2.c); // undefined

В приведенном выше фрагменте, заявление var.create (Obj1) создаст obj2 объект с прототипом obj1 объект. Другими словами, obj1 становится прототипом obj2 вместо Объект. Прототип по умолчанию. Как вы можете видеть, B не является собственностью obj2 Вы все еще можете получить доступ через цепь прототипа. Для C свойство, однако, вы получаете undefined ценность, потому что его нельзя найти в obj1 и Объект. Прототип Отказ

Классы

В ES2016 мы теперь используем Класс Ключевое слово, а также методы, упомянутые выше, чтобы манипулировать Прототип Отказ JavaScript Класс Обращается к разработчикам из фонов ООП, но это по сути делает то же самое, что и выше.

class Rectangle {
  constructor(height, width) {
    this.height = height
    this.width = width
  }

  get area() {
    return this.calcArea()
  }

  calcArea() {
    return this.height * this.width
  }
}

const square = new Rectangle(10, 10)

console.log(square.area) // 100

Это в основном так же, как:

function Rectangle(height, width) {
  this.height = height
  this.width = width
}

Rectangle.prototype.calcArea = function calcArea() {
  return this.height * this.width
}

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

Больше информации о прототипах JS:

• Все, что вам нужно знать, чтобы понять прототип JavaScript