Слышали ли вы о прототипах и прототипическом наследовании в JavaScript?

Сначала они могут показаться сложными, но на самом деле они необходимы для понимания того, как работает JavaScript.

Итак, давайте узнаем о прототипах и прототипном наследовании в JavaScript с помощью Smoothies 🍓

Хотите примеры кода?

Найдите его в конце статьи.

Сначала (краткое введение)..

В JavaScript все объекты имеют прототип.

Прототип – это объект, который используется в качестве шаблона для создания новых объектов.

Прототипное наследование — это способ, которым объекты JavaScript наследуют свойства и методы от своих прототипов.

Все еще трудно понять?

Не волнуйтесь. Давайте лучше разберемся на примере.

Думайте о прототипе как о смузи-баре.

Каждый смузи, который делает бар, основан на шаблоне или прототипе, который содержит основные ингредиенты и инструкции по приготовлению смузи.

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

А теперь давайте подробнее рассмотрим прототипы в JavaScript.

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

Если свойство или метод не найдены в объекте, JavaScript ищет его в прототипе объекта. Если свойство или метод по-прежнему не найдены, JavaScript продолжает цепочку прототипов, пока не достигнет базового объекта.

Если он не может найти его, он возвращает значение undefined.

Чтобы лучше понять прототипное наследование, давайте снова воспользуемся нашим примером со смузи-баром.

Представлять себе…

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

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

Функция-конструктор — это специальная функция, которая используется для создания объектов с определенным прототипом. Когда новый объект создается с помощью функции-конструктора, он наследует все свойства и методы от прототипа функции-конструктора.

// Define a constructor function for creating a person object
function Smoothie(flavour,topping) {
  this.flavour = flavour;
  this.topping = topping;
}

// Add a method to the Smoothie prototype
Smoothie.prototype.make = function() {
  console.log(`Making${this.flavour} with ${this.topping}`);
};

// Create a new person object using the constructor function and the new keyword
const strawberry= new Person('strawberry','chocolate');

// Call the make method on the strawberry object
strawberry.make(); // Output: Making strawberry with chocolate.

Теперь, когда у вас есть общее представление о прототипах и прототипическом наследовании в JavaScript, давайте рассмотрим реальный пример того, как они работают вместе.

Представлять себе..

В смузи-баре есть специальный блендер, который можно использовать для приготовления разных видов смузи.

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

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

Пример кода:

// Define a prototype object
var smoothiePrototype = {
  init: function (flavour, toppings) {
    this.flavour= flavour;
    this.toppings = toppings;
  },
  getSmoothie: function () {
    return "This " + this.flavour " "+"topping:" this.toppings" "+"smoothie";
  }
};

// Create a new object that inherits from the prototype
var smoothie1= Object.create(smoothiePrototype);

// Initialize the strawberry object
smoothie1.init("strawberry", "chocolates");

// Call a method on the smoothie1 object
console.log(smoothie1.getSmoothie()); // Output: "This stawberry topping: chocolates smoothie."

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.