OOP dalam JS

Paradigma merujuk kepada gaya kod, cara ia disusun. Paradigma Pengaturcaraan biasa ialah: OOP, Fungsian dll. Untuk menjadi Dev, anda perlu mengetahui OOP dengan baik.

OOP

• paradigma pengaturcaraan perusahaan paling popular.
• berdasarkan objek
• dibangunkan dengan matlamat mengatur kod
• menjadikan kod lebih fleksibel, boleh diselenggara.
• Sebelum OOP, kod bertaburan merentasi berbilang fns dalam skop global tanpa sebarang struktur. Gaya itu dipanggil kod spageti yang sangat sukar untuk dikekalkan, lupakan tentang menambah fungsi baharu.
• digunakan untuk mencipta objek melalui kod.
• juga membolehkan interaksi objek antara satu sama lain.

API

• kaedah yang boleh diakses dan digunakan oleh kod di luar objek untuk berkomunikasi dengan objek lain.

Kelas

• cetak biru abstrak untuk mencipta objek.
• dimulakan daripada kelas iaitu dibuat menggunakan pelan tindakan kelas.
• berbilang objek dicipta daripada kelas menggunakan sintaks 'Kelas baharu()'

Reka bentuk kelas:

• Dilakukan menggunakan 4 prinsip OOP iaitu Abstraksi, Enkapsulasi, Pewarisan, Polimorfisme
• Abstraksi: Menyembunyikan butiran yang tidak perlu yang tidak penting bagi pengguna akhir.
• Encapsulation: Mengekalkan beberapa kaedah-sifat sebagai peribadi yang menjadikannya boleh diakses hanya dari dalam kelas dan menjadikannya tidak boleh diakses dari luar kelas. Dedahkan beberapa kaedah sebagai API antara muka awam untuk berinteraksi dengan dunia luar. Oleh itu, ia menghalang kod luaran daripada memanipulasi keadaan dalaman[data objek] kerana ini boleh menjadi sumber pepijat yang hebat. Antara muka awam ialah kod yang bukan peribadi. Menjadikan kaedah peribadi memudahkan kami menukar pelaksanaan kod tanpa memecahkan kebergantungan luaran. Ringkasan: Merangkum keadaan dan kaedah dengan baik dan hanya umumkan kaedah penting.
• Warisan: Kod pendua sukar dikekalkan. Oleh itu, konsep ini menyokong kebolehgunaan semula kod dengan mewarisi kod yang telah ditulis. Kelas anak memanjangkan kelas induk dengan mewarisi semua sifat & kaedah daripada kelas induk. Selain itu, kelas kanak-kanak melaksanakan fungsi datanya sendiri bersama-sama ciri yang diwarisi.
• Polimorfisme: Kelas anak boleh menulis ganti kaedah yang diwarisi daripada kelas induk.

Objek ialah:

• digunakan untuk memodelkan dunia sebenar atau ciri abstrak.
• mungkin mengandungi data(sifat) dan kod(kaedah). bantu kami untuk membungkus data & kod dalam satu blok
• kepingan/blok kod serba lengkap.
• blok binaan appln, berinteraksi antara satu sama lain.
• Interaksi b/b objek berlaku melalui API antara muka awam.
• semua objek yang dicipta daripada kelas dipanggil contoh kelas itu.
• semua objek boleh mempunyai data yang berbeza di dalamnya, tetapi semuanya berkongsi fungsi yang sama

Warisan Klasik:

• Disokong oleh Java, C++, Python dll
• satu kelas mewarisi kelas lain
• kaedah atau gelagat disalin dari kelas ke semua kejadian.

Perwakilan atau Warisan Prototaip dalam JS:

• Menyokong semua prinsip OOP seperti dalam bahasa klasik.
• contoh yang diwarisi daripada kelas.
• Prototaip mengandungi semua kaedah, yang boleh diakses oleh semua objek yang dipautkan kepada prototaip itu. prototaip: mengandungi kaedah objek: boleh mengakses kaedah prototaip, disambungkan kepada objek prototaip menggunakan pautan proto.
• objek mewarisi sifat & kaedah yang ditakrifkan pada objek prototaip.
• objek mewakilkan gelagat kepada objek prototaip.
• Contoh tatasusunan yang ditakrifkan pengguna mengakses .map() pada Array.prototype.map() iaitu map() yang ditakrifkan pada objek prototaip melalui pautan proto. Oleh itu, .map() tidak ditakrifkan pada contoh kami, sebaliknya ditakrifkan pada prototaip.

## 3 Ways to implement Prototypal Inheritance via:
1. Constructor Fn:
- To create objects via function.
- Only difference from normal fn is that they are called with 'new' operator.
- Convention: always start with a capital letter to denote constructor fn. Even builtins like Array, Map also follow this convention.
- An arrow function doesn't work as Fn constructor as an arrow fn doesn
t have its own 'this' keyword which we need with constructor functions.
- Produces an object. 
- Ex. this is how built-in objects like Array, Maps, Sets are implemented

2. ES6 Classes:
- Modern way, as compared to above method.
- Syntactic sugar, although under the hood work the same as above syntax.
- ES6 classes doesn't work like classical OOP classes.

3. Object.create()
- Way to link an object to its prototype
- Used rarely due to additional repetitive work.

## What does 'new' operator automates behind the scene?
1. Create an empty object {} and set 'this' to point to this object.
2. Create a __proto__ property linking the object to its parent's prototype object.
3. Implicit return is added, i.e automatically return 'this {} object' from the constructor fn.

- JS doesn't have classes like classical OOP, but it does create objects from constructor fn. Constructor fn have been used since inception to simulate class like behavior in JS.
Ex. validate if an object is instance of a constructor fn using "instanceOf" operator.

const Person = function(fName, bYear) {
  // Instance properties as they will be available on all instances created using this constructor fn.
  this.fName = fName;
  this.bYear = bYear;

  // BAD PRACTICE: NEVER CREATE A METHOD INSIDE A CONSTRUCTOR FN.
  this.calcAge = function(){
console.log(2024 - this.bYear);
}
};

const mike = new Person('Mike', 1950);
const mona = new Person('Mona', 1960);
const baba = "dog";

mike; // Person { fName: 'Mike', bYear: 1950 }
mona; // Person { fName: 'Mona', bYear: 1960 }

mike instanceof Person; // true
baba instanceof Person; // true


If there are 1000+ objects, each will carry its own copy of fn defn.
Its a bad practice to create a fn inside a contructor fn as it would impact performance of our code.

Objek prototaip:

• Setiap fungsi, termasuk pembina fn dalam JS mempunyai sifat yang dipanggil objek prototaip.
• Setiap objek yang dicipta daripada pembina fn ini, akan mempunyai akses kepada objek prototaip pembina fn. Cth. Orang.prototaip
• Tambah fn pada objek prototaip ini melalui: Person.prototype.calcAge = function(bYear){ console.log(2024 - mengikutTahun); };

mike.calcAge(1970); // 54
mona.calcAge(1940); // 84

• objek mike tidak akan mengandungi .calcAge() tetapi ia akan mengaksesnya menggunakan pautan proto yang ditakrifkan pada objek Person.prototype.
• 'ini' sentiasa ditetapkan kepada objek yang memanggil fungsi.

mike.proto; // { calcAge: [Fungsi (tanpa nama)] }
mona.proto; // { calcAge: [Fungsi (tanpa nama)] }

mike.proto === Orang.prototaip; // benar

• Person.prototype here serves as prototype for all the objects, not just this single object created using Person constructor fn.

Person.prototype.isPrototypeOf(mike); // true
Person.prototype.isPrototypeOf(Person); // false

• prototype should have been better named as prototypeOfLinkedObjects generated using the Constructor fn.
• Not just methods, we can create properties also on prototype object. Ex. Person.prototype.creatureType = "Human"; mike.creatureType; // Human mona.creatureType; // Human

Different properties for an object:

• Own property and properties on constructor fn accessbile via proto link of objects.

• To check own property for objects, use:
  mike.hasOwnProperty('fName'); // true
  mona.hasOwnProperty('creatureType'); // false

• Two way linkage:
  Person() - constructor fn
  Person.prototype - Prototype

Person() constructor fn links to Person.prototype via .prototype
Person.prototype prototype links back to Person() constructor fn via .constructor to Person() itself.

proto : always points to Object's prototype for all objects in JS.
newly created object is automatically returned, unless we explicitly return something else and stored in the LHS variable declared.

Prototype Chain:

• Similar to scope chain. Look for variable in the scope level
• Prototype chain has to lookup for finding properties or methods.
• All objects in JS has a proto link Person Person.proto Person.proto.proto; // [Object: null prototype] {}

Top Level Object in JS:
Object() - constructor fn
Object.prototype - Prototype
Object.prototype.proto // null

Object.prototype methods:

• constructor: f Object()
• hasOwnProperty
• isPrototypeOf
• propertyIsEnumerable
• toLocaleString
• toString
• valueOf
• defineGetter etc

// Takes to constructor fn prototype
mike.proto === Person.prototype; // true
// Takes to parent of constructor fn's prototype i.e Object fn
mike.proto.proto; // [Object: null prototype] {}
// Takes to parent of Object fn i.e end of prototype chain
mike.proto.proto.proto; // null

• All fns in JS are objects, hence they also have a prototype
• console.dir(x => x+1);
• Fns are objects, and objects have prototypes. So a fn prototype has methods which can be called.

• const arr = [2,4,21]; // is same as using 'new Array' syntax
  arr.proto; // shows fns on array's prototype

• Each array doesn't have all of these methods, its able to use it via proto link.

• arr.proto === Array.prototype; // true

const arr = [2,4,21];
arr.proto; // Array prototype
arr.proto.proto; // Object prototype
arr.proto.proto.proto; // null

## If we add a fn to Array.prototype, then all newly created arrays will inherit that method. However extending the prototype of a built-in object is not a good idea. Incase new version of JS adds a method with the same name, will break your code. Or in case multiple Devs create similar fnality with different names will add an unnecessary overhead.
Ex. Add a method named unique to get unique values
const arr = [4,2,4,1,2,7,4,7,3];
Array.prototype.uniq = function(){
return [...new Set(this)];
}
arr.uniq(); // [ 4, 2, 1, 7, 3 ]

• All DOM elements behind the scene are objects.
• console.dir(h1) // will show you it in object form
• Prototype chain: h1 -> HTMLHeadingElement -> HTMLElement -> Element -> Node -> EventTarget -> Object

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