Saturday, September 10, 2022

Object-oriented programming in JavaScript

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_programming

Objects are self-contained blocks of code. Objects are building blocks of application and interact with one another. Interactions happen through application programming interface (API).

OOP paradigm is designed to organize and maintain code.

Class - blueprint for creating new objects - instances. Instance - object, created from class.

Class => (instantiation) => Instance

Abstraction - ignoring and hiding details that don't matter...

Encapsulation - keeping properties and methods private inside the class, so they aren't accessible outside. Some methods can be exposed as API.

Inheritance - all properties and methods of parent class available to child class.

Polymorphism - child class can overwrite method, inherited from parent class.

JavaScript Object => (prototypal inheritance) => Prototype.

JavaScript Object delegates methods to Prototype.

How to create prototypes? Constructor functions - poplar used technique, ES6 Classes - "syntactic sugar" using constructor functions, Object.create() - simple and straightforward way.

prototype basically is prototype of linked objects, NOT prototype of Person => Person.prototype

Person.prototype is prototype of all objects, created with Person constructor function.

const Person = function (firstName, birthYear) { // constructor function

  this.firstName = firstName;   // instance property

  this.birthYear = birthYear;  // instance property

  this.calcAge = function () {   // Never create methods in constructor functions!!!

   console.log(2022 - this.birthYear);

  };

};

const john = new Person('John', 1991);

console.log(john);

// 1. New {} is created

// 2. function is called, this = {}

// 3. {} linked to prototype => __proto__ for example console.log(john.__proto__);

// 4. function automatically return {}

Person.prototype.calcAge = function () { // prototypal inheritance

  console.log(2022 - this.birthYear);

};

john.calcAge();

isPrototypeOf , hasOwnProperty

Classes are: 1) not hoisted, 2) first-class citizens, 3) executed in strict mode.

const Person = class {} // class expression

// class declaration

class Person {

constructor(firstName, birthYear) {

          this.firstName = firstName;   // instance property

          this.birthYear = birthYear;  // instance property

    }

    calcAge() {

        console.log(2022 - this.birthYear);

    }

    otherMethod() {

        console.log(`${someMethod}`);

    }

}

const john = new Person('John', 1991);

// Object.create()

const PersonProto = {

    calcAge() {

        console.log(2022 - this.birthYear);

        },

    init(firstName, birthYear) {

          this.firstName = firstName;   // instance property

          this.birthYear = birthYear;  // instance property

        },

};

const john = Object.create(PersonProto);

john.init('John', 1991);

john.calcAge();

No comments:

Post a Comment