Dziedziczenie

w JavaScript

Znajdź swoje korzenie

Agata Malec - Sromek

Jak myśleć po prototypowemu?

agatajs

Czym się zajmuję?

Mentoruję, programuję a także

opiekuję się kursem Front-end-owym w

Jesteś Bogiem.

 model dziedziczenia

 Klasyczny

 Klasa pochodna dziedziczy od klasy bazowej.

Obiekty są kopiami klas.

 model dziedziczenia

Prototypowy

 Nie ma klas, są obiekty.

Obiekty dziedziczą od innych obiektów.

Podstawy

var alien =  {   
   name: "jlSuDrup",  
   age: 14521,  
   sayHello: function () {      
        console.log("nuqneH"); 
  } 
};

var alien =  {   
   name: "jlSuDrup",  
   age: 14521,  
   sayHello: function () {      
        console.log("nuqneH"); 
  } 
};

Skąd tajemnicze

atrybuty?

var alien =  {   
   name: "jlSuDrup",  
   age: 14521,  
   sayHello: function () {      
        console.log("nuqneH"); 
  } 
};

Odwołanie do innego obiektu

[[Prototype]]

__proto__

własność obiektu wskazująca na inny obiekt

.. tak zapisujemy tą własność w specyfikacji

Jak wygląda zwykły obiekt?

Obiekty wbudowane + obiekt alien

Czym jest function?

Tak wygląda funkcja.

Object

Ojciec wszystkich ojców

Jakie gatunki mieszkają

na planecie Prototypia?

Typy dziedziczenia

Delegate prototype

1 typ

  var A = {};

Łączenie obiektów

var greenAlien = {
  sayHello: function() {
     return `Hello, my name is ${ this.name }`
  } 
}

Połączenie

Przy większej ilości obiektów pomoże nam Fabryka

Factory function

const alien = {
  sayHello () {
    return `Hello, my name is ${ this.name }`;
  }
};
const createAlien = (name) => { 
   return Object.assign(Object.create(alien), {
     name
  });
}
const clark = createAlien('Clark');
clark.sayHello();

Factory function

Factory function

Factory function

vs.

constructor function

function Alien(name) {
  this.name = name;
}
Alien.prototype.sayHello = function() {
  return `Hello, my name is ${ this.name }`;
}
let clark = new Alien('Clark');
console.log(clark.sayHello());

Constructor function

Musimy używać new

 wykorzystujące                             jest bardziej skomplikowane niż

wykorzystujące                          .

Prototypowe dziedziczenie

konstruktory

Prototypowe dziedziczenie

prototypy

Aadit M Shah

let clark = new Alien('Clark');

Problem z new

"new" is a remnant of the days where JavaScript accepted a Java like syntax for gaining "popularity"

Concatenative Inheritance 

2 typ

const alien = {
  sayHello () {
    return `Hello, my name is ${ this.name }`;
  }
};
const clark = Object.assign( 
    {}, 
    alien, 
    {name: 'Clark'}
);
clark.sayHello()

Concatenative / Cloning

Podsumowanie

const alien = {
  sayHello () {
    return "Hello";
  }
};

Jeden obiekt

  function createAlien() {
    return {
      name: 'Clark'
    };
  }
  var alienA = createAlien();

Wiele obiektów

const alienPrototype = {
      sayHello: function sayHello() { 
         return "Hello" 
      }
};
function createAlien() {
    return Object.create(alienPrototype);
}

const alienA = createAlien();

Dziedziczenie

 function Alien() { }

  Alien.prototype.sayHello = function sayHello() { 
    return "Hello" 
  }

  const alienB = new Alien();

tak nie róbmy

 function createBulb() {
    let isOn = false // private

    return {
      turnOn: function turnOn() {
        isOn = true
        return this;
      },
      turnOff: function turnOff() {
        isOn = false;
        return this;
      },
      isOn: function isOnMethod() {
        return isOn;
      }
    };
  }

  var bulb = createBulb();

Hermetyzacja

https://github.com/gnodi/danf

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext

Dobry kod gdzie nie ma new.

https://www.youtube.com/watch?v=ya4UHuXNygM&t=50m23s

Dlaczego David Crockford nie używa new?