OOP

Object-Oriented Programming

What is OOP?

OOP is a programming paradigm based on the concept of objects
We use objects to model(describe) real-world or abstract features
Objects may contain data (properties) and code (methods). By using objects, we pack data and the corresponding behavior into one block.
In OOP, objects are self-contained pieces/blocks of code
Objects are building blocks of applications, and interact with one another
Interactions happen through a public interface(API): methods that the code out side of the object can access and use to communicate with the object;

Four Fundamental principles of OOP

abstraction
encapsulation
inheritance
polumorphism

OOP In JS

![93A0512868D930D5AD890F926DBB7C6D](C:\Users\name\Documents\Tencent Files\747417582\FileRecv\MobileFile\93A0512868D930D5AD890F926DBB7C6D.png)

Prototypes

// Prototypes
console.log(Person.prototype);

Person.prototype.calcAge = function () {
  console.log(2037 - this.birthYear);
};

jonas.calcAge();
matilda.calcAge();

console.log(jonas.__proto__);
console.log(jonas.__proto__ === Person.prototype);

console.log(Person.prototype.isPrototypeOf(jonas));
console.log(Person.prototype.isPrototypeOf(matilda));
console.log(Person.prototype.isPrototypeOf(Person));

// .prototyeOfLinkedObjects

Person.prototype.species = 'Homo Sapiens';
console.log(jonas.species, matilda.species);

console.log(jonas.hasOwnProperty('firstName'));
console.log(jonas.hasOwnProperty('species'));

![5E3F22E98E49E12A556E7822206F8C4D](C:\Users\name\Documents\Tencent Files\747417582\FileRecv\MobileFile\5E3F22E98E49E12A556E7822206F8C4D.png)

![BAEE3FFF41CE2088CBA7EC401A89B92A](C:\Users\name\Documents\Tencent Files\747417582\FileRecv\MobileFile\BAEE3FFF41CE2088CBA7EC401A89B92A.png)

// Prototypal Inheritance on Built-In Objects
console.log(jonas.__proto__);
// Object.prototype (top of prototype chain)
console.log(jonas.__proto__.__proto__);
console.log(jonas.__proto__.__proto__.__proto__);

console.dir(Person.prototype.constructor);

const arr = [3, 6, 6, 5, 6, 9, 9]; // new Array === []
console.log(arr.__proto__);
console.log(arr.__proto__ === Array.prototype);

console.log(arr.__proto__.__proto__);

Array.prototype.unique = function () {
  return [...new Set(this)];
};

console.log(arr.unique());

const h1 = document.querySelector('h1');
console.dir(x => x + 1);

ES6 Classes

Classes are NOT hoisted
Classes are first-class citizens
Classes are executed in strict mode

// ES6 Classes

// Class expression
// const PersonCl = class {}

// Class declaration
class PersonCl {
  constructor(fullName, birthYear) {
    this.fullName = fullName;
    this.birthYear = birthYear;
  }

  // Instance methods
  // Methods will be added to .prototype property
  calcAge() {
    console.log(2037 - this.birthYear);
  }

  greet() {
    console.log(`Hey ${this.fullName}`);
  }

  get age() {
    return 2037 - this.birthYear;
  }

  // Set a property that already exists
  set fullName(name) {
    if (name.includes(' ')) this._fullName = name;
    else alert(`${name} is not a full name!`);
  }

  get fullName() {
    return this._fullName;
  }

  // Static method
  static hey() {
    console.log('Hey there 👋');
    console.log(this);
  }
}

const jessica = new PersonCl('Jessica Davis', 1996);
console.log(jessica);
jessica.calcAge();
console.log(jessica.age);

console.log(jessica.__proto__ === PersonCl.prototype); // true

// PersonCl.prototype.greet = function () {
//   console.log(`Hey ${this.firstName}`);
// };
jessica.greet();

Setters and Getters

Static Methods and Instance Methods

Object.create()

// Object.create
const PersonProto = {
  calcAge() {
    console.log(2037 - this.birthYear);
  },

  init(firstName, birthYear) {
    this.firstName = firstName;
    this.birthYear = birthYear;
  },
};

const steven = Object.create(PersonProto);
console.log(steven);
steven.name = 'Steven';
steven.birthYear = 2002;
steven.calcAge();

console.log(steven.__proto__ === PersonProto); // true

const sarah = Object.create(PersonProto);
sarah.init('Sarah', 1979);
sarah.calcAge();

OOP