JS: Прототипы

Теория: Функции как объекты

Один из самых важных фактов про JavaScript: функция здесь не только вызывается, но и ведет себя как объект.

Из-за этого многие конструкции, которые выглядят "классовыми", на деле опираются на функции.

Функция в JavaScript - объект

const f = name => `hello, ${name}`;

typeof f; // function
f instanceof Object; // true
f.length; // 1
f.toString(); // source code

Функция имеет свойства и может участвовать в той же объектной модели, что и остальные сущности языка.

Класс - это тоже функция

class Node {
  constructor(name) {
    this.name = name;
  }
}

typeof Node; // function

Синтаксис class делает код понятнее, но базовый механизм остается функциональным.

Конструктор и new

До class типы обычно задавали через функцию-конструктор:

function Node(name) {
  this.name = name;
}

const node = new Node('table');
node.name; // table

Важно: стрелочные функции не являются конструкторами.

new ((name) => { this.name = name; });
// TypeError

Функция и this - разные истории

Легко перепутать свойства функции и свойства созданного объекта:

function Node(name) {
  this.name = name;
}

const obj = new Node('table');

Node.name;   // имя функции
Node.length; // количество параметров
obj.length;  // undefined

Node и obj - разные объекты с разными свойствами.

Как работает привязка контекста

this задается контекстом вызова. Этим и пользуются call и apply.

function New(Constructor, args) {
  const obj = {};
  Constructor.apply(obj, args);
  return obj;
}

const node = New(Node, ['table']);
node.name; // table

call и apply делают одно и то же, различается только передача аргументов:

  • call(thisArg, a, b, c)
  • apply(thisArg, [a, b, c])

Итоги

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

Классы, конструкторы, new, call, apply, this - это связанная система, а не набор разрозненных трюков.

Рекомендуемые программы

Дальше

Завершено

0 / 10