Fyrirlestur – Hlutir

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

---

Hlutir og hjúpun

• Objects & encapsulation
• Ein af aðal hugmyndum hlutbundinnar forritunar er að skipta forritum upp og láta hvern hluta bera ábyrgð á eigin stöðu
• Hjúpum virkni og flækjustig, vinnum með í gegnum interface

---

Methods

• Method er fall á hlut
• Hvað ef við viljum nálgast gögn á hlutnum úr falli?
• Notum this

---

this

• this hagar sér öðruvísi í JavaScript en í öðrum málum
• Skilgreinist af því hvernig kallað er í fallið
• Utan hluta er this global hluturinn, þ.e. þar sem allt er geymt (í browser window)

---

function logThis() { console.log(this); }
const Obj = {
  logThis() { console.log(this); },
};
const btn = document.querySelector('button');
btn.addEventListener('click', logThis);

console.log(this); // window
logThis(); // window
Obj.logThis(); // {logThis: f}
btn.click(); // <button>

---

• this dæmi

---

const rabbit = {
  type: 'the',
};
rabbit.speak = (line) => {
  console.log(
    `${this.type} rabbit says '${line}'`
  );
};

rabbit.speak('I’m alive.');
// → undefined rabbit says 'I’m alive.'

---

const rabbit = {
  type: 'the',
  speak(line) {
    console.log(
      `${this.type} rabbit says '${line}'`
    );
  }
};

rabbit.speak('I’m alive.');
// → the rabbit says 'I’m alive.'

---

Apply & call

• Leyfir okkur að kalla í föll með ákveðnu this
• apply – köllum í fall með gefnu this og fylki af arguments
• call – köllum í fall með gefnu this og lista af arguments

---

function speak(line) {
  console.log(
    `${this.type} rabbit says ${line}`
  );
}
//  festum fallið á hlutinn 👇
const old = { type: 'old', speak };
const hungy = { type: 'hungry', speak };

old.speak('Oh my');
// old rabbit says Oh my
hungy.speak('I could use a carrot');
// hungry rabbit says I could use a carrot

---

function speak(line) {
  console.log(
    `${this.type} rabbit says ${line}`
  );
}

const old = { type: 'old' };

//    👇  köllum í fallið _með_ hlutnum
speak.apply(old, ['Oh my']);
// old rabbit says Oh my
speak.call({ type: 'hungry' }, 'Yum');
// hungry rabbit says Yum

---

Bind

• Leyfir okkur að festa, binda, this fyrir föll
• Kemur okkur ekki á óvart hvað this er
• Getum líka bundið argument…

---

Bind – dæmi

function speak(line) {
  console.log(
    `${this.type} rabbit says ${line}`
  );
}
const blueRabbit = { type: 'blue' };

// bindum fall v/hlut 👇 fáum nýtt fall!
const bound = speak.bind(blueRabbit);
bound('hi'); // blue rabbit says hi

// Getum kallað strax í fall 👇
speak.bind(blueRabbit, 'bye')();
// blue rabbit says bye

---

Arrow föll

• Arrow föll eru öðruvísi—endurskilgreina ekki this
• this er skilgreint eins og það var skilgreint í scope kringum fall

---

function normalize() {
  function inner(n) {
    //          👇 vísar í window! 🙀
    return n / this.length;
  }
  //           👇 vísar í „réttan“ hlut 🥴
  console.log(this.coords.map(inner));
}

const o = { coords: [0, 2, 3], length: 5 };

normalize.call(o);
// → [NaN, Infinity, Infinity]

---

function normalize() {
  console.log(
    // 👇 vísar í réttan hlut
    this.coords.map(
      //        👇 vísar í réttan hlut
      n => n / this.length
    )
  );
}

const o = { coords: [0, 2, 3], length: 5 };

normalize.call(o);
// → [0, 0.4, 0.6]

---

function normalize() {
  const inner = (n) => {
    //          👇 vísar í réttan hlut 😊
    return n / this.length;
  }
  console.log(this.coords.map(inner));
}

const o = { coords: [0, 2, 3], length: 5 };

normalize.call(o);
// → [0, 0.4, 0.6]

---

Prótótýpur

• Flestir hlutir hafa prótótýpu, hlutur sem geymir fleiri properties
  • Fyrir utan null og undefined
• Ef við biðjum um property á hlut sem er ekki skilgreint á hlut er leitað á prótótýpu hans

---

• Í grunninn höfum við Object
  • Eða nánar tiltekið Object.prototype
• Object.getPrototypeOf() skilar hvaða prótótýpu gildi hefur

---

const empty = {};
console.log(empty.toString);
// → function toString() { … }
console.log(empty.toString());
// → [object Object]

console.log(1.toString()); // → "1"

console.log(NaN.toString()); // → "NaN"

console.log(null.toString());
// → TypeError: null has no properties

---

Aðrar prótótýpur

• Aðrir hlutir hafa aðrar prótótýpur
  • [] hefur Array.prototype
  • Föll hafa Function.prototype
• Þessar prótótýpur hafa sínar eigin prótótýpur!
  • Mynda prótótýpu keðju

---

const empty = Object.getPrototypeOf({});
console.log(
  empty === Object.prototype
);
// → true

console.log(
  Object.getPrototypeOf(Object.prototype)
);
// → null

---

const funcProto = Object.getPrototypeOf(
  Math.max
);

console.log(
  funcProto === Function.prototype
);
// → true

console.log(
  Object.getPrototypeOf(funcProto) ===
    Object.prototype
);
// → true

---

const array = Object.getPrototypeOf([]);

console.log(
  array === Array.prototype
);
// → true

---

const objProto = Object.getPrototypeOf({});
console.log(
  Object.getPrototypeOf(objProto)
);
// → null
// keðjan endar á Object prototype!

---

Prótótýpu keðjan

• Hlutir fá eigindi frá prótótýpunni en eigindi á hlutnum hafa aldrei áhrif á keðjuna
  • Getum ekki skrifað yfir hluti á prótótýpu
• Að setja eigindi á hlut setur það alltaf á honum sjálfum

---

• Ef við biðjum um eigindi á hlut er reglan:
  • Ef skilgreint beint á hlut er því skilað
  • Ef ekki förum við upp prótótýpu keðjuna og leitum þar
  • Ef finnst hvergi er undefined skilað

---

Hlutir með ákveðna prótótýpu

• Object.create() býr til hlut með ákveðinni prótótýpu
• Leið til að hópa saman föllum
• Prótótýpan geymir sameiginlegu föllin

---

const protoRabbit = {
  speak(line) {
    console.log(
      `${this.type} rabbit says '${line}'`
    );
  }
};
const killer = Object.create(protoRabbit);

killer.type = 'killer';
//    👇 speak fall kemur frá prototype
killer.speak('SKREEEE!');
// → killer rabbit says 'SKREEEE!'

---

Klasar (classes)

• Í JavaScript höfum við ekki klasa eins og í klassískum hlutbundnum málum
• Notum prótótýpu til að erfa frá öðrum hlutum

---

• Í klassískum erfðum
  • Hlutir eru tilvik af klösum
  • Klasar erfa frá öðrum klösum
• Með prótótýpum
  • Engir klasar
  • Hlutir erfa frá öðrum hlutum

---

Smiðir og new

• Í JavaScript eru smiðir föll, skýrð með stórum staf (hefð, ekki krafa)
• Þegar við notum new og tilgreinum fall búum við til nýjan hlut þar sem this bendir á hlutinn
• Skilar sjálfkrafa this sem hlut vegna new ef engu er skilað
• Bætum við prótótýpu til að bæta við sameiginlegum föllum

---

function Rabbit(type) {
  this.type = type;
}
Rabbit.prototype.speak = function (line) {
  console.log(
    `The ${this.type} rabbit says ${line}`
  );
};

const weirdRabbit = new Rabbit('weird');
console.log(weirdRabbit);
// Rabbit {type: "weird"}
weirdRabbit.speak('🐰');
// The weird rabbit says '🐰'

---

Yfirskrifuð eigindi

• Að setja eigindi á hlut setur það alltaf á honum sjálfum
• Getum nýtt til að yfirskrifa eigindi frá prótótýpu
  • T.d. toString() til að skila sértæku gildi fyrir okkar hlut

---

Rabbit.prototype.teeth = 'small';
const killerRabbit = new Rabbit('killer');
console.log(killerRabbit.teeth);
// → small

killerRabbit.teeth = 'long, sharp, bloody';
console.log(killerRabbit.teeth);
// → long, sharp, and bloody

---

---

function Rabbit(type) {
  this.type = type;
}

const fooRabbit = new Rabbit('foo');
console.log(fooRabbit.toString());
// "[object Object]"

Rabbit.prototype.toString = function () {
  return `Rabbit of type ${this.type}`;
};

console.log(fooRabbit.toString());
// "Rabbit of type foo"

---

Classes

• Í ECMAScript 6 er class skilgreint
• Syntactic sugar til að herma eftir klassískum OO hlutum með prótótýpum
  • Undirliggjandi skilgreining notar áfram prótótýpur
• extends, constructor, super, static og getters og setters

---

class Rabbit {
  constructor(type) {
    this.type = type;
  }
  speak(line) {
    console.log(
      `${this.type} rabbit says '${line}'`
    );
  }
  toString() {
    return `Rabbit of type ${this.type}`;
  }
}

const killerRabbit = new Rabbit('killer');

---

class Foo {
  constructor(name) {
    this._name = name;
  }

  hi() { return 'hi!'; }

  static bar() { return 1; }

  get name() { return this._name; }

  set name(value) { this._name = value; }
}

---

const foo = new Foo('Asdf');
foo.hi(); // "hi!"
foo.name = 'bar';
foo.name; // "bar"

Foo.bar(); // 1