OOP in JS -

• JS-Klassen sind wie syntaktischer Zucker, nicht dasselbe wie Klassen anderer stark typisierter Sprachen.
• Fügt nur Syntax-Wrapping hinzu, um es Entwicklern aus anderen Sprachen vertraut zu machen.
• Klassen sind eine spezielle Art von Funktionen hinter den Kulissen und können daher sowohl als Klassenausdruck als auch als Klassendeklaration geschrieben werden.

## class expression:
const Person = class {
}

## class declaration:
class Person {
  constructor(fName, bYear){
   this.fName = fName;
   this.bYear = bYear;
  }
  calcAge(){
   console.log(2024 - this.bYear);
  }
}

- constructor is a method of this class. Pass values for properties to have in objects created using this fn.
- then set the properties of the object using this.xxx = xxx;
- On using 'new' operator, this constructor will be called automatically and return a new object which will be stored in LHS variable as shown below.
Ex. const ronald = new Person('ronald',1975); // Person { fName: 'ronald', bYear: 1975 }
- Methods are written outside the constructor fn and will be added to the prototype property of the object which can be verified using devConsole.
Ex. ronald.calcAge(); // 49

ronald.__proto__ === Person.prototype; // true

- No commas need to be added while adding multiple methods below the constructor fn inside the class.

## Hence, the above syntax works same as constructor fn syntax but with a familiar syntax of strongly typed class based languages.

## Adding a fn explicitly to the prototype:
Person.prototype.greet = function(){
console.log(`Hey ${this.fName}`);
}
ronald.greet(); // 'Hey ronald'

Einflusspunkte:

• Fn-Deklarationen werden angehoben, während Klassendeklarationen NICHT angehoben werden.
• Auch First-Class-Bürger, genau wie Fns, d. h. können an Fns weitergegeben und von diesen zurückgegeben werden.
• Der Hauptteil der Klasse wird immer im strikten Modus ausgeführt, unabhängig davon, ob wir den strikten Modus aktivieren oder nicht.
• Klassen sorgen dafür, dass der Code sauberer aussieht und das Zeichenrauschen reduziert wird, vorausgesetzt, Sie wissen, wie er unter der Haube implementiert wird. ** Um ein Experte für JS zu werden, müssen Sie die komplizierten Details der Sprachimplementierung wie bei Klassen verstehen.

Accessor-Eigenschaften: Getter und Setter, d. h. FNS, die den Wert abrufen und festlegen. Aber von außen sehen sie immer noch wie normale Immobilien aus.

Normale Eigenschaften werden Dateneigenschaften genannt.

• Getter und Setter sind allen Objekten in JS gemeinsam, d. h. jedes Objekt kann Getter- und Setter-Eigenschaften haben. Diese Getter-Setter werden als Accessor-Eigenschaften bezeichnet, während normale Eigenschaften als Dateneigenschaften bezeichnet werden.

- Getter und Setter sind FNS, die einen Wert abrufen und festlegen. Von außen sehen sie wie normale Eigenschaften aus.

const account = {
  owner: 'jonas',
  movements: [200,300,100,500],
  get latest(){
    // will return an array with last value. Hence, use pop to get the value.
    return this.movements.slice(-1).pop();
  },
  set latest(mov){
    this.movements.push(mov);
  }
}

account.latest; // 500
account.latest = 50; 
account.latest; // 50

Just like above, classes also support the getter-setter methods but acccessed like using a property syntax.

These are very useful for data validation.

Statische Methoden

Bsp. Array.from() = Konvertiert eine Array-ähnliche Struktur in ein Array.
Array.from(document.querySelector('h1'));
Array.from(document.querySelectorAll('h1'));

Bsp. .from ist an den Array-Konstruktor angehängt, nicht an die Prototypeigenschaft des Konstruktors. Daher erben nicht alle Arrays diese Fn.
[1,2,3].from(); // .from ist keine Funktion

Bsp. Number.parseFloat(12) ist eine statische Methode im Number-Konstruktor, die für Number-Variablen nicht verfügbar ist.

Erstellen einer statischen Methode.

// Static methods are not inherited. They are not added to prototype.
className.fnName = function(){
  console.log(this); // Entire constructor() which is calling the method
  console.log("JS is awesome")
};
className.fnName();

// Rule =  whatever object is calling the method, 'this' points to that object inside the fn. Hence its simply the entire constructor() above.

//Inside class, we need to use static keyword for adding a static method.
static fnName = function(){
  console.log(this); // can point to the entire class defn
  console.log("JS is awesome")
};

// Static methods and instance methods will be different from each other.
// instance methods will be prototype, hence all instances can have access to them

Object.create():

Wird manuell verwendet, um den Prototyp unseres Objekts auf ein beliebiges Objekt festzulegen.
Wird zur Implementierung von S/W-Vererbungsklassen verwendet.
Prototypische Vererbung. Implementiert mit dieser Fn.
Object.create gibt ein leeres Objekt zurück.
Funktioniert anders als Konstruktor-FNS und -Klassen.
Es besteht immer noch die Idee einer prototypischen Vererbung, auch ohne die Beteiligung von „Prototyp“, „Konstruktor()“ und „neuem“ Operator.

const PersonProto = {
  // This method will be looked up using __proto__ link
  calcAge(){
    console.log(2024 - this.bYear);
  }
};

// baba will be created, with its prototype set to PersonProto object.
const baba = Object.create(PersonProto);
baba;

baba.name = 'Roger';
baba.bYear = '2000';
baba.calcAge();

Konstruktor Fn --(.prototype)--> Person.prototype
Objektinstanz --(proto)--> Person.prototype

Funktioniert genauso wie bei FN-Konstruktoren oder in Klassen
Um dieses Ziel zu erreichen, ist keine Konstruktor()- oder .prototype-Eigenschaft erforderlich.

const PersonProto = {
  // This method will be looked up using __proto__ link
  calcAge(){
    console.log(2024 - this.bYear);
  },
  // Noting special with init name, its a normal fn here.
  // This has nothing to with ES6 constructor()
  // Manual way of initialzing an object.
  init(fName, bYear){
    this.fName = fName;
    this.bYear = bYear;
  }
};

// baba will be created, with its prototype set to PersonProto object.
const baba = Object.create(PersonProto);
baba;

baba.name = 'Roger';
baba.bYear = '2000';
baba.calcAge();

baba.__proto__;    // { calcAge: [Function: calcAge] }
baba.__proto__ === PersonProto; //true


const alice = Object.create(PersonProto);
alice.init("alice", 2000);
alice;   // { fName: 'alice', bYear: 2000 }  

Möglichkeiten zur Erstellung einer prototypischen Vererbung:
Konstruktor Fn
ES6-Klassen
Object.create

Vererbung zwischen Klassen mit Konstruktor():

Alle diese Techniken ermöglichen es einem Objekt, in seinem Prototyp nach Methoden zu suchen.
Echte Klassen gibt es in JS nicht.

const Person = function(firstName, bYear){
  this.firstName = firstName;
  this.bYear = bYear;
};

Person.prototype.calcAge = function(){
  console.log(2024 - this.bYear);
};

const Student = function(firstName, bYear, course){
  // This is the duplicate code, any change in Person won't be reflected here.
  this.firstName = firstName;
  this.bYear = bYear;
  this.course = course;
};

Student.prototype.introduce = function(){
  console.log(`My name is ${this.firstName} and I study ${this.course}`);
}

const matt = new Student("Matt", 2000, "CSE");
matt.introduce(); //  'My name is Matt and I study CSE'

Entfernen von redundantem Code aus dem obigen Beispiel:

const Person = function(firstName, bYear){
  this.firstName = firstName;
  this.bYear = bYear;
};

Person.prototype.calcAge = function(){
  console.log(2024 - this.bYear);
};

const Student = function(firstName, bYear, course){
  // Person(firstName, bYear); -> This doesn't work because we are calling it as a regular fn call. 'new' has to be used to call this fn constructor. This fn call is simply a regular fn call, in which 'this' is set 'undefined'. Hence, an error as it cannot set firstName on undefined.
  // We want to set the 'this' inside this fn to be same as inside Person above.
  Person.call(this, firstName, bYear);
  this.course = course;
};

Student.prototype.introduce = function(){
  console.log(`My name is ${this.firstName} and I study ${this.course}`);
}

const matt = new Student("Matt", 2000, "CSE");
matt.introduce(); //  'My name is Matt and I study CSE'

'new' stellt über proto
automatisch eine Verknüpfung zwischen der Objektinstanz und ihrem Prototyp her Die gesamte Idee der Vererbung besteht darin, dass die untergeordnete Klasse das Verhalten der übergeordneten Klassen in der Prototypenkette teilen kann.
Prototype[Object.prototype] = null; // Sitzt an der Spitze der Prototypenkette.

const Person = function(firstName, bYear){
  this.firstName = firstName;
  this.bYear = bYear;
};

Person.prototype.calcAge = function(){
  console.log(2024 - this.bYear);
};

const Student = function(firstName, bYear, course){
  Person.call(this, firstName, bYear);
  this.course = course;
};

// Student.prototype = Person.prototype; => This doesn't work because we won't get the prototype chain, rather we will get 
// Constructor fn[i.e Person()]    --------------> Person.prototype
// Constructor fn[i.e Student()]   --------------> Person.prototype
// Object [Matt] __proto__: Student.prototype ---> Person.prototype

// Student.prototype manually linked for lookup to Person.prototype.
// This has to be done here and not after else Object.create will overwrite any of the existing methods like introduce() on it.
Student.prototype = Object.create(Person.prototype);

Student.prototype.introduce = function(){
  console.log(`My name is ${this.firstName} and I study ${this.course}`);
}

const matt = new Student("Matt", 2000, "CSE");
matt.introduce(); //  'My name is Matt and I study CSE'
matt.calcAge();    // 24

matt.__proto__;                   // Person { introduce: [Function (anonymous)] }
matt.__proto__.__proto__;        // { calcAge: [Function (anonymous)] }
matt.__proto__.__proto__.__proto__;   // [Object: null prototype] {}

Student.prototype.constructor = Student;   // [Function: Student]

matt instanceof Student; // true
matt instanceof Person; // true
matt instanceof Object; // true

Das obige ist der detaillierte Inhalt vonOOP in JS -. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!