패러다임은 코드 스타일, 코드 구성 방식을 나타냅니다. 일반적인 프로그래밍 패러다임은 OOP, Functional 등입니다. 개발자가 되려면 OOP를 잘 알아야 합니다.
앗
API
수업
수업 디자인:
객체는 다음과 같습니다.
## 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.
mike.calcAge(1970); // 54
mona.calcAge(1940); // 84
마이크.프로토; // { calcAge: [함수(익명)] }
모나.프로토; // { calcAge: [함수(익명)] }
mike.proto === Person.prototype; //참
Person.prototype.isPrototypeOf(mike); // true
Person.prototype.isPrototypeOf(Person); // false
Different properties for an object:
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:
Top Level Object in JS:
Object() - constructor fn
Object.prototype - Prototype
Object.prototype.proto // null
Object.prototype methods:
// 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
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 ]
위 내용은 JS의 OOP의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
