PROGRAMOWANIE JAVASCRIPT

Programowanie JavaScript 04

Javascript

Object

this

function Car(make, model, year) {
  this.make = make
  this.model = model
  this.year = year
}

myCar = new Car('Fiat', '126p', 1993);

function age() {
  return new Date().getFullYear() - this.year
}
myCar.age = age
myCar.age()

get vs set

let o = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) {
    this.a = x / 2;
  }
};

console.log(o.a);
console.log(o.b);
console.log(o.a);
o.c = 50;
console.log(o.a);
console.log(o.b);
o.c(100);
console.log(o.a);
let o = { a: 0 };

Object.defineProperties(o, {
    'b': { get: function() { return this.a + 1; } },
    'c': { set: function(x) { this.a = x / 2; } }
});

o.c = 10;
console.log(o.b);

Class

class Person {
  constructor() {
    this.name = '';
    this.year = 1920;
  }
}

function Person() {
    this.name = '';
    this.year = 1920;
}

function Person(name, year) {
    this.name = name || 'Joe Doe';
    this.year = year || 1920;
}

person = new Person()
person = new Person('Jane Doe', 2000)
person = new Person(null, 2000)
person = new Person(undefined, 2000)
person = new Person(, 2000)
person = new Person(2000)

Inheritance

function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
};

Person.prototype.greeting = function() {
  alert('Hi! I\'m ' + this.name.first + '.');
};
function Teacher(first, last, age, gender, interests, subject) {
  Person.call(this, first, last, age, gender, interests);

  this.subject = subject;
}

function Teacher(first, last, age, gender, interests, subject) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
  this.subject = subject;
}
function Brick() {
  this.width = 10;
  this.height = 20;
}

function BlueGlassBrick() {
  Brick.call(this);

  this.opacity = 0.5;
  this.color = 'blue';
}

ECMAScript 2015

class Person {
  constructor(first, last, age, gender, interests) {
    this.name = {
      first,
      last
    };
    this.age = age;
    this.gender = gender;
    this.interests = interests;
  }

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

  farewell() {
    console.log(`${this.name.first} has left the building. Bye for now!`);
  };
}
class Teacher extends Person {
  constructor(subject, grade) {
    this.subject = subject;
    this.grade = grade;
  }
}
class Teacher extends Person {
  constructor(subject, grade) {
    super()
    this.subject = subject;
    this.grade = grade;
  }
}
class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);

    this.subject = subject;
    this.grade = grade;
  }
}

get vs set

class Teacher extends Person {
  constructor(first, last, age, gender, interests, subject, grade) {
    super(first, last, age, gender, interests);
    // subject and grade are specific to Teacher
    this._subject = subject;
    this.grade = grade;
  }

  get subject() {
    return this._subject;
  }

  set subject(newSubject) {
    this._subject = newSubject;
  }
}

Ćwiczenie

  1. Dodać nową funkcje do obiektu myCar.
  2. Utworzyć klase Student i dodać atrybut courses.
  3. Dodać getter/setter dla klasy Student (np. nr indeksu) (wersja stara + wersja ECMAScript 2015).
  4. Nadpisać metode greeting dla Student.