OOP dalam JS -

• Kelas JS adalah seperti gula sintaksis, tidak sama dengan kelas bahasa lain yang ditaip kuat.
• Hanya menambah pembalut sintaks untuk menjadikannya biasa bagi pembangun yang datang dari bahasa lain.
• kelas ialah jenis fungsi khas di belakang tabir, oleh itu boleh ditulis sebagai ekspresi kelas serta pengisytiharan kelas.

## 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'

Mata Impt:

• Pengisytiharan Fn dinaikkan manakala pengisytiharan Kelas TIDAK dinaikkan.
• Juga warganegara kelas pertama seperti Fns iaitu boleh dihantar-ke & dikembalikan-daripada fns.
• Badan kelas sentiasa dilaksanakan dalam mod ketat sama ada kita mengaktifkan mod ketat atau tidak.
• Kelas menjadikan kod kelihatan lebih bersih, dengan pengurangan hingar watak dengan syarat anda tahu cara ia dilaksanakan di bawah hud. ** Untuk menjadi pakar dalam JS, anda perlu memahami butiran pelaksanaan bahasa yang rumit seperti dengan kelas.

Sifat Aksesor: Getters & Setters iaitu fns yang mendapat & menetapkan nilai. Tetapi pada luaran, ia masih kelihatan seperti sifat biasa.

Sifat Normal dipanggil Sifat Data.

• Getters & Settters adalah biasa kepada semua objek dalam JS iaitu setiap objek boleh mempunyai sifat getter dan setter. Penetap pengambil ini dipanggil sebagai sifat pengakses, manakala sifat biasa dipanggil sebagai sifat data.

- Getter & setter ialah fn yang mendapat dan menetapkan nilai, dari luar kelihatan seperti sifat biasa.

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.

Kaedah Statik

Cth. Array.from() = Menukar struktur seperti tatasusunan kepada tatasusunan.
Array.from(document.querySelector('h1'));
Array.from(document.querySelectorAll('h1'));

Cth. .from dilampirkan pada konstruktor Tatasusunan, bukan pada sifat prototaip pembina. Oleh itu semua tatasusunan tidak mewarisi fn ini.
[1,2,3].daripada(); // .from bukan fungsi

Cth. Number.parseFloat(12) ialah kaedah statik pada pembina Nombor, tidak tersedia pada pembolehubah nombor.

Mencipta kaedah statik.

// 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():

Digunakan secara manual untuk menetapkan prototaip objek kita kepada mana-mana objek yang kita mahu.
Akan digunakan untuk melaksanakan kelas b/w warisan.
Warisan Prototaip Dilaksanakan menggunakan fn ini.
Object.create mengembalikan objek kosong.
Berfungsi dengan cara yang berbeza di mana fns pembina dan kelas berfungsi.
Masih terdapat idea tentang warisan prototaip, walaupun tanpa penglibatan 'prototaip', 'pembina()', pengendali 'baharu'.

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();

Pembina Fn --(.prototaip)--> Orang.prototaip
Contoh Objek --(proto)--> Orang.prototaip

Berfungsi sama seperti ia berfungsi untuk pembina fn atau dalam kelas
Tidak memerlukan sifat constructor() atau .prototype untuk mencapai matlamat ini.

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 }  

Cara untuk mencipta Warisan Prototaip:
Pembina Fn
Kelas ES6
Object.create

Warisan antara Kelas menggunakan constructor():

Semua teknik ini membenarkan objek mencari kaedah pada prototaipnya.
Kelas sebenar tidak wujud dalam JS.

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'

Mengalih keluar kod berlebihan daripada contoh di atas:

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'

'baru' membuat pautan secara automatik antara contoh objek dan prototaipnya melalui proto
Idea keseluruhan pewarisan ialah kelas anak boleh berkongsi tingkah laku daripada kelas induk sehingga rantai prototaip.
Prototaip[Object.prototype] = null; // Duduk di atas rantai prototaip.

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

Atas ialah kandungan terperinci OOP dalam JS -. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!