JS의 OOP

패러다임은 코드 스타일, 코드 구성 방식을 나타냅니다. 일반적인 프로그래밍 패러다임은 OOP, Functional 등입니다. 개발자가 되려면 OOP를 잘 알아야 합니다.

앗

• 가장 인기 있는 엔터프라이즈 프로그래밍 패러다임
• 객체 기준
• 코드 정리를 목표로 개발
• 코드를 더욱 유연하고 유지 관리하기 쉽게 만듭니다.
• OOP 이전에는 코드가 구조 없이 전역 범위의 여러 fn에 분산되어 있었습니다. 그 스타일은 유지 관리가 매우 어려운 스파게티 코드라고 불리며, 새로운 기능을 추가하는 것을 잊어버리게 됩니다.
• 코드를 통해 객체를 생성하는 데 사용됩니다.
• 객체간 상호작용도 가능합니다.

API

• 객체 외부의 코드가 액세스하여 다른 객체와 통신하는 데 사용할 수 있는 메서드입니다.

수업

• 객체를 생성하기 위한 추상 청사진.
• 클래스에서 인스턴스화됩니다. 즉, 클래스 청사진을 사용하여 생성됩니다.
• 'new Class()' 구문을 사용하여 클래스에서 여러 객체가 생성됩니다

수업 디자인:

• OOP의 4가지 원리인 추상화, 캡슐화, 상속, 다형성을 사용하여 수행되었습니다
• 추상화: 최종 사용자에게 중요하지 않은 불필요한 세부정보를 숨깁니다.
• 캡슐화: 일부 속성-메서드를 비공개로 유지하여 클래스 내부에서만 액세스할 수 있게 하고 클래스 외부에서는 액세스할 수 없게 만듭니다. 외부 세계와 상호 작용하기 위한 공용 인터페이스 API로 몇 가지 메서드를 노출합니다. 따라서 외부 코드가 내부 상태[객체의 데이터]를 조작하는 것을 방지합니다. 이는 버그의 큰 소스가 될 수 있기 때문입니다. 공개 인터페이스는 비공개가 아닌 코드입니다. 메소드를 비공개로 설정하면 외부 종속성을 손상하지 않고 코드 구현을 더 쉽게 변경할 수 있습니다. 요약: 상태와 메서드를 훌륭하게 캡슐화하고 필수 메서드만 공개합니다.
• 상속: 중복된 코드는 유지 관리가 어렵습니다. 따라서 이 개념은 이미 작성된 코드를 상속함으로써 코드의 재사용성을 지원합니다. 하위 클래스는 상위 클래스의 모든 속성 및 메서드를 상속하여 상위 클래스를 확장합니다. 또한 하위 클래스는 상속된 기능과 함께 자체 데이터 기능을 구현합니다.
• 다형성: 하위 클래스는 상위 클래스에서 상속된 메서드를 덮어쓸 수 있습니다.

객체는 다음과 같습니다.

• 실제 세계 또는 추상적인 특징을 모델링하는 데 사용됩니다.
• 데이터(속성)와 코드(메서드)가 포함될 수 있습니다. 데이터와 코드를 하나의 블록에 담을 수 있도록 도와주세요
• 독립적인 코드 조각/블록.
• 앱의 구성 요소가 서로 상호작용합니다.
• 객체와의 상호작용은 공개 인터페이스 API를 통해 이루어집니다.
• 클래스에서 생성된 모든 개체를 해당 클래스의 인스턴스라고 합니다.
• 모든 객체는 서로 다른 데이터를 가질 수 있지만 모두 공통 기능을 공유합니다

고전적 상속:

• Java, C++, Python 등에서 지원
• 한 클래스가 다른 클래스에서 상속됨
• 메서드나 동작은 클래스에서 모든 인스턴스로 복사됩니다.

JS의 위임 또는 프로토타입 상속:

• 고전 언어와 마찬가지로 모든 OOP 원칙을 지원합니다.
• 클래스에서 상속되는 인스턴스.
• 프로토타입에는 해당 프로토타입에 연결된 모든 개체에 액세스할 수 있는 모든 메서드가 포함되어 있습니다. 프로토타입: 메서드 포함 object: proto 링크
를 사용하여 프로토타입 개체에 연결된 프로토타입의 메서드에 액세스할 수 있습니다.
• 객체는 프로토타입 객체에 정의된 속성과 메서드를 상속합니다.
• 객체는 동작을 프로토타입 객체에 위임합니다.
• 사용자 정의 배열 인스턴스는 Array.prototype.map()의 .map(), 즉 proto 링크를 통해 프로토타입 객체에 정의된 map()에 액세스합니다. 따라서 .map()은 인스턴스에 정의되지 않고 프로토타입에 정의됩니다.

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

프로토타입 객체:

• JS의 생성자 fn을 포함한 각 함수에는 프로토타입 객체라는 속성이 있습니다.
• 이 생성자 fn에서 생성된 모든 개체는 생성자 fn의 프로토타입 개체에 액세스할 수 있습니다. 전. 사람.프로토타입
• 다음을 통해 이 프로토타입 객체에 fn을 추가합니다. Person.prototype.calcAge = function(bYear){ console.log(2024 - 연도); };

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

• mike 개체에는 .calcAge()가 포함되어 있지 않지만 Person.prototype 개체에 정의된 proto 링크를 사용하여 액세스합니다.
• 'this'는 항상 함수를 호출하는 객체로 설정됩니다.

마이크.프로토; // { calcAge: [함수(익명)] }
모나.프로토; // { calcAge: [함수(익명)] }

mike.proto === Person.prototype; //참

• 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

위 내용은 JS의 OOP의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!