Язык JavaScript стоит на двух столпах: Функциональное программирование и прототиповая делегация. Добавление Классы В JavaScript находится просто синтаксический сахар, чтобы дать ему объектно-ориентированное программирование: разверните их, и вы найдете функции внутри.
Прототиповая делегирование
Прототиповая делегация – это все о делегировании ответственности за прототипом выше в цепочке [[прототип]].
function foo(){}
Object.getPrototypeOf(foo) === Function.prototype; // true
Object.getPrototypeOf(Function.prototype) === Object.prototype; // true
Object.getPrototypeOf(Object.prototype); // null
Цепь прототипа будет выглядеть так:
foo -> Функция. Прототип -> Объект. Прототип -> NULL
Простые слова, если вы попытаетесь искать свойство, которая является не принадлежит объекту, двигатель JavaScript будет Проверьте Его прототип цепь, пока не найдет это. Давайте посмотрим пример, чтобы понять это.
const recipe = { name: "Garlic Naan" };
const recipeBook = {
getRecipeName() {
console.log(this.name);
},
};
// Set 'recipeBook' as the prototype of 'recipe'
Object.setPrototypeOf(recipe, recipeBook);
// Prototypal delegation in action
recipe.getRecipeName(); // prints 'Garlic Naan'
Цепь прототипа будет выглядеть так:
Рецепт -> Рецепт -> Объект. Прототип -> нулевой
Объект рецепт блюда не владеет getRecipename имущество. Но установив Recipebook Как его прототип, мы делегировали работу печати Имя к Recipebook пример. Это называется прототиповой делегированием.
Теперь, скажем, вы тоже хотите Рецепт делегировать задачу ordrecipe () в другой экземпляр приказ . Вы можете сделать это, расширив цепь прототипа, как:
const order = {
orderRecipe() {
console.log(`${this.name} ordered!`);
},
};
// Extending the prototype chain
Object.setPrototypeOf(recipeBook, order);
recipe.orderRecipe(); // prints 'Garlic Naan ordered!'
Цепь прототипов будет распространяться на это:
Рецепт -> Рецепт -> Заказ -> Объект. Прототип -> Нуль
Теперь я думаю, что это должно быть легко связать, почему вы можете вызвать Рецепт. HasownProperty () Несмотря на то, что ни один из объектных литералов мы не объявили собственного HasownProperty. . Это потому, что все объектные литералы неявно наследуют от Объект. Прототип , что означает HasownProptery () Задача была делегирована на Объект.protoype. .
Вот полный пример кода:
const recipe = { name: "Garlic Naan" };
const recipeBook = {
getRecipeName() {
console.log(this.name);
},
};
// Set 'recipeBook' as the prototype of 'recipe'
Object.setPrototypeOf(recipe, recipeBook);
const order = {
orderRecipe() {
console.log(`${this.name} ordered!`);
},
};
// Extending the prototype chain
Object.setPrototypeOf(recipeBook, order);
// Prototypal delegation in action
recipe.getRecipeName(); // prints 'Garlic Naan'
recipe.orderRecipe(); // prints 'Garlic Naan ordered!'
recipe.hasOwnProperty("name"); //true
Функция конструктора и новое ключевое слово
Прежде чем оставить вас с этой концепцией делегации, я также хочу поговорить о Конструктор функции И зачем вам использовать Новый Оператор при создании экземпляров. Я надеюсь, что с концепцией прототипа в стороне их должно быть легко демистифицировать их существование.
Каждая функция ( Кроме жирной стрелки ) в JavaScript имеет свойство под названием Прототип который просто простой объект с Конструктор имущество. Это отличается от внутреннего [[прототип]] отношений.
Давайте пересмотрим предыдущий Рецепт Пример и посмотрите, как вы можете установить те же прототиповые отношения с использованием функции конструктора.
// Constructor function 'Recipe'
function Recipe(name) {
this.name;
}
Recipe.hasOwnProperty("prototype"); // true
Recipe.prototype.constructor === Recipe; // true
Визуально он будет выглядеть похоже на диаграмму ниже:
Собственность (прототип) особенный, потому что когда вы вызываете Рецепт () используя Новый Оператор, новый оператор использует Рецепт. Прототип Как прототип для экземпляров он создает. Как только экземпляр создан, новый оператор передает этот экземпляр AS Это внутренне как один из параметров к Рецепт () Отказ
const recipe = new Recipe('Garlic Naan');
Теперь следует ясно, что нам нужно добавить свойства на Рецепт. Прототип : они становятся доступными на всех Рецепт экземпляры через прототиповую делегацию.
__ прото __ – псевдо имущество для доступа к прототипу объекта
// Adding properties to 'Recipe.prototype' will make them
// available on all `Recipe` instances.
Recipe.prototype.getRecipeName = function () {
console.log(this.name);
};
Точно так же мы можем продлить цепочку и делегировать задачу заказа рецепт к другому объекту, установив его как Рецепт. Прототип прототип.
// Order constructor
function Order() {}
Order.prototype.recipeOrder = {
recipeOrder() {
console.log(`${this.name} ordered!`);
},
};
// Setting up the delegation aka Prototypal inheritance
Object.setPrototypeOf(Recipe.prototype, Order.prototype);
recipe.orderRecipe(); // prints 'Garlic Naan ordered!'
Полный пример кода с использованием конструктора функций выглядит:
// Constructor function 'Recipe'
function Recipe(name){this.name}
Recipe.hasOwnProperty('prototype'); // true
Recipe.prototype.constructor === Recipe; // true
const recipe = new Recipe('Garlic Naan');
Recipe.prototype.getName = function () {
console.log(this.name);
};
// Order constructor
function Order() {}
Order.prototype.recipeOrder = {
recipeOrder() {
console.log(`${this.name} ordered!`);
},
};
// Setting up the delegation aka Prototypal inheritance
Object.setPrototypeOf(Recipe.prototype, Order.prototype);
// Prototypal delegation in action
recipe.getRecipeName(); // prints 'Garlic Naan'
recipe.orderRecipe(); // prints 'Garlic Naan ordered!'
recipe.hasOwnProperty("name"); //true
Вот как окончательный прототип цепь выглядит как:
Закрытие мыслей
Прототипы в JavaScript могут казаться пугающими, но я надеюсь, что эта статья ослабила ваш путь обучения. Понимание фундамента JavaScript является ключом, чтобы стать хорошим разработчиком. Если вы хотите больше исследовать о цепочке прототипа, то я настоятельно рекомендую прочитать это Глава доктором аксель. Спасибо за чтение 😍.
Оригинал: “https://dev.to/aman_singh/an-easy-explanation-to-prototypal-delegation-in-javascript-3ok2”