JS Internship 1.4

OOP in JS

ES5

What is this

  • Default Binding

  • Implicit Binding

  • Explicit Binding

  • New Binding

Default Binding

Implicit Binding

Explicit Binding

  • call
  • apply
  • bind

New Binding

function Person(info) {
    this.name = info.name;
    this.age = info.age;

    this.whoAmI = function() {
        return `Hi I am ${this.name}, ${this.age} years old.`;
    };
}

let myPerson = new Person({
    name: 'Narek',
    age: 20
});

myPerson.whoAmI();
// Hi I am Narek, 20 years old.

this in closure

function Person(info) {
    this.name = info.name;
    this.age = info.age;

    this.whoAmI = function(cb) {
        setTimeout(function() {
	    cb(`Hi I am ${this.name}, ${this.age} years old.`);
        }, 2000);
    };
}

let myPerson = new Person({
    name: 'Narek',
    age: 20
});

myPerson.whoAmI((str) => {
    console.log(str);
});
// Hi I am , undefined years old.
function Person(info) {
    this.name = info.name;
    this.age = info.age;

    this.whoAmI = function(cb) {
        let self = this;
        setTimeout(function() {
	    cb(`Hi I am ${self.name}, ${self.age} years old.`);
        }, 2000);
    };
}

let myPerson = new Person({
    name: 'Narek',
    age: 20
});

myPerson.whoAmI((str) => {
    console.log(str);
});
// Hi I am Narek, 20 years old.

Old way

function Person(info) {
    this.name = info.name;
    this.age = info.age;

    this.whoAmI = function(cb) {
        let self = this;
        setTimeout(() => {
	    cb(`Hi I am ${this.name}, ${this.age} years old.`);
        }, 2000);
    };
}

let myPerson = new Person({
    name: 'Narek',
    age: 20
});

myPerson.whoAmI((str) => {
    console.log(str);
});
// Hi I am Narek, 20 years old.

New way

*ES6

What is __proto__?

let head = {
  glasses: 1
};

let table = {
  pen: 3
};

table.__proto__ = head;

What is prototype?

function sayHi() {
    return 'Hello';
}

function Person(info) {
    this.name = info.name;
    this.age = info.age;

    this.__proto__ = {
        sayHi // *es6 feature
    };
}

let myPerson = new Person({
    name: 'Narek',
    age: 20
});

myPerson.sayHi();
// Hello
function sayHi() {
    return 'Hello';
}

function Person(info) {
    this.name = info.name;
    this.age = info.age;
}

Person.prototype.sayHi = sayHi;

let myPerson = new Person({
    name: 'Narek',
    age: 20
});

myPerson.sayHi();
// Hello

Inheritance of classes

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

Animal.prototype.run = function() {
  console.log(this.name);
}

function Rabbit(name) {
  Animal.apply(this, arguments);
}

Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;

Rabbit.prototype.run = function() {
  Animal.prototype.run.apply(this);
};

let rabbit = new Rabbit('myRabbit');
rabbit.run();
Rabbit.prototype = Object.create(Animal.prototype);
Rabbit.prototype.constructor = Rabbit;

Rabbit.prototype = new Animal();
Rabbit.prototype.constructor = Rabbit;

ES6/ES2015

Class

class Rectangle extends Sprite {
  constructor(height, width) {
    super(height, width);

    this.height = height;
    this.width = width;
  }

  getSize() {
    const { width, height } = this;
    super.someMethod();
    return {
      width,
      height
    };
  }

  static getType() {
    return 'Rectangle type';
  }
}

getters/setters

// ES6 get and set
class Person {
    constructor(name) {
        this._name = name;
    }
  
    get name() {
        return this._name.toUpperCase();
    }
  
    set name(newName) {
        // validation could be checked here such as only allowing non numerical values
        this._name = newName;
    }
  
    walk() {
        console.log(this._name + ' is walking.');
    }
}
         
let bob = new Person('Bob');
console.log(bob.name);  // Outputs 'BOB'

We don't have privates :)

Thank you!

nairi.harutyunyan@optym.com

nairihar99@gmail.com

@nairihar

Optym Internship 1.4

By Nairi Harutyunyan

Made with Slides.com

Optym Internship 1.4

OOP in JavaScript

  • 282

More from Nairi Harutyunyan