Прототипы

Лекция 07

Прототип

  • объект имеет внутренюю ссылку на другой объект - прототип
  • у прототипа есть свой прототип, и т.д - пока не null
  • __proto__ / [[Prototype]]
  • динамическое наследование
  • поиск свойств/методов

Прототип - Поиск

const animal = {
  eats: true
};

const rabbit = {
  jumps: true
};

rabbit.__proto__ = animal;

console.log( rabbit.jumps ); // true
console.log( rabbit.eats ); // true

Прототип - Поиск

const animal = {
  eats: true
};

const rabbit = {
  jumps: true,
  eats: false
};

rabbit.__proto__ = animal;

console.log( rabbit.eats ); // false

Прототип - hasOwnProperty

const animal = {
  eats: true
};

const rabbit = {
  jumps: true,
  __proto__: animal
};

for (var key in rabbit) {
  console.log(`${key} = ${rabbit[key]}`);
}

// eats = true
// jumps = true

Прототип - hasOwnProperty

const animal = {
  eats: true
};

const rabbit = {
  jumps: true,
  __proto__: animal
};

for (var key in rabbit) {
  if (!rabbit.hasOwnProperty(key)) continue;

  console.log(`${key} = ${rabbit[key]}`);
}

// jumps = true

Конструктор

function Class(){/*поля*/}

Class.prototype = {/*Методы*/}

Конструктор

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

Men.prototype = {
  sayHi: function () {
    console.log(`Hi! I'm ${this.name}.`);
  },

  sleep: function () {
    console.log('Z-z-z');
  }
};

const rick = new Men('Rick');

rick.sayHi();

Наследование

function Xmen(name, power) {
  this.name = name;
  this.power = power;
}

Xmen.prototype = Object.create(Men.prototype);

Xmen.prototype.sayHi = function () {
  console.log(`
      Hi! I'm ${this.name}.
      My superpower is ${this.power}
  `);
}

const logan = new Xmen('Logan', 'Regeneration');

logan.sayHi();
logan.sleep();

Динамика

function Xmen(name, power) {...}

Xmen.prototype = Object.create(Men.prototype);

const logan = new Xmen('Logan', 'Regeneration');

logan.skeleton = 'adamantium';
logan.attac = function () {
  console.log(`${this.name} attac!`);
}

logan.sleep();

Динамика

function Xmen(name, power) {...}

Xmen.prototype = Object.create(Men.prototype);

const logan = new Xmen('Logan', 'Regeneration');

Men.prototype.sleep = function () {
  console.log(`${this.name}: Z-z-z`);
}

logan.sleep();

Конструктор предка

function Xmen(name, power) {
  Men.apply(this, arguments);

  this.power = power;
}

...

Классы

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

  sayHi() {
    console.log(`Hi! I'm ${this.name}.`);
  }

  sleep() {
    console.log('Z-z-z');
  }
}

Классы

class Xmen extends Men {
  constructor(name, power) {
    super(name);

    this.power = power;
  }

  sayHi() {
    console.log(`
      Hi! I'm ${this.name}.
      My superpower is ${this.power}
    `);
  }
}

const logan = new Xmen('Logan', 'Regeneration');
logan.sayHi();

instanceof

logan instanceof Xmen // true
logan instanceof Men // true
logan instanceof Object // true
logan instanceof Apple // false

favor composition over class inheritance