JavaScript의 OOP#1. 건축사와 원형

소개하다.
안녕하세요!오늘 나는 시리즈를 시작할 것이다. 그 중에서 나는 자바스크립트의 OOP에 대해 토론할 것이다.나는 구조 함수와 원형을 설명하는 것부터 시작할 것이다.

JavaScript의 OOP
OOP는 객체 개념을 기반으로 한 프로그래밍 패러다임(코드 스타일)입니다.
JS의 OOP은 고전의 OOP과 다르다.

고전적인 OOP에서 우리는 유형에서 실례화된 대상이 있다.

JS OOP에서 우리는 대상을 만들고 그것을 원형 대상에 연결한다(모든 방법을 얻었다). 그리고 대상은 원형의 모든 방법을 계승한다(원형은 방법을 대상에게 위탁한다고 할 수도 있다).

우리는 어떻게 대상, 그것들의 원형을 만들고 그것들을 한데 연결합니까?
JS에는 다음과 같은 세 가지 방법이 있습니다.
1. 구조 함수.
2-ES6 과정
3 - 대상.생성().
오늘 우리는 첫 번째: 구조 함수를 토론할 것이다.

구조 함수
우리가 구조 함수를 만들 때, 약속은 대문자로 시작한다.
Arrow 함수는 자체 this 키워드가 없으므로 구조 함수로 사용할 수 없습니다.
이 구조 함수는 임의의 수량의 대상을 생성하는 데 쓸 수 있다.

호출 구조 함수와 호출 일반 함수의 차이점:
구조 함수를 호출할 때 new 키워드를 사용합니다.
예:

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

// Making an instance of the constructor function
const Abdelrahman = new Person ('Abdelrahman', 2001);
const Abdelrahman = new Person ('Habiba', 2003);

구조 함수를 호출하면 다음과 같은 상황이 발생합니다.

빈 대상을 만들었습니다. (빈 대상은 속성도 방법도 없다는 것을 의미합니다.)

We can add some properties for that empty object in the constructor function’s body using the this keyword (just like we did in the previous example).

this 키워드는 새로 만든 빈 대상을 가리킵니다.

새로 만든 대상이 원형에 연결됩니다. 이것은

A- 객체에 대한 새; 속성을 작성합니다.
B-를 구조 함수의 prototype 속성으로 설정합니다.

이 빈 대상은 구조 함수에서 되돌아온다.

만약 네가 이것이 받아들이기 어렵다고 생각한다면 걱정하지 마라!나를 따라오기만 하면, 내가 원형에 대해 이야기하기 시작할 때, 너는 모든 것을 알게 될 것이다.

원형에 대한 수요
만약 우리가 대상에게 몇 가지 방법을 추가하고 싶다면.
그것들을 구조 함수 함수체에 추가하는 것은 나쁜 방법이다. 왜냐하면 이 방법들은 모든 실례와 공유될 것이고, 우리는 항상 이 방법들을 공유할 필요가 없기 때문이다.성능에 영향을 미칩니다!
예:

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

    // Bad Practice (methods inside constructor function)
    this.calcAge = function () {
        console.log(2037 - this.birthYear);
    }
}

이전 문제의 해결 방안은 원형을 사용하는 것이다.

원형
JS의 각 함수(구조 함수 포함)에는 prototype이라는 속성이 있습니다.
우리가 구조 함수의prototype 속성에 방법(또는 속성)을 추가할 때, 이 방법의 복사본만 생성하여 모든 실례가 잠시 후에 사용할 수 있도록 합니다.
모든 대상 (실례) 은prototype 속성에 정의된 모든 방법을 계승합니다.이것은 원형 유전이라고 불린다.
객체에서 등록 정보나 메서드를 호출할 때 객체 자체에서 찾을 수 없으면 JS는 해당 원형에서 해당 객체를 검색합니다.
다음 예제에서는 함수를 구성하는 prototype 속성에 추가하는 방법을 보여 줍니다.

Person.prototype.calcAge = function () {
    console.log(2037 - this.birthYear);
}

Abdelrahman.calcAge ();

모든 대상은 원형에서 접근할 수 있는 방법과 속성입니다.이를 위해 모든 JS 객체에 사용할 수 있는 특수 속성 proto 을 사용합니다.

Remember: __proto__ used to access the prototype for any object. The prototype property is for the constructor function.

구조 함수의prototype 속성은 구조 함수 자체의 원형을 생성하는 데 사용되지 않고 이 구조 함수에서 생성된 모든 대상의 원형을 생성하는 데 사용됩니다.

Note: prototype is a property, but constructorFunction.prototype is an object.

앞서 설명한 내용을 예로 들면 다음과 같습니다.

console.log(Abdelrahman.__proto__ === Person.prototype);  // true
console.log(Person.prototype.isPrototypeOf (Abdelrahman)); // true
console.log(Person.prototype.isPrototypeOf (Person));   // false

Note: We used the isPrototypeOf method (for the prototype property) to check whether the constructor function’s prototype is the prototype of the object passed or not.

구조 함수의 원형에 속성을 추가하다
많은 경우, 이것은 실제적이지 않다. 왜냐하면 모든 실례가 이 속성에 대해 같은 값을 공유하기 때문이다.

Person.prototype.species = "Homo Species";
console.log(Abdelrahman.species, habiba.species);  // Homo Species Homo Species

우리는 모든 대상에게hasOwnProerty 방법을 사용하고 대상 속성 (문자열) 을 전달할 수 있습니다.전달된 속성이 원형 속성이 아니라면true를 되돌려줍니다.

console.log(Abdelrahman.hasOwnProperty ('species'));   // false

원형 체인
이것은 원형 링크를 사용하는 대상 간의 일련의 링크이다.
JS에서 작성된 각 객체는 객체 구조 함수의 인스턴스일 뿐입니다.
우리가 권곡 {}을 사용하여 대상 문자를 작성할 때, 이것은 새로운 대상 구조 함수를 작성하는 것과 같다.
모든 대상의 원형은 그 대상을 만드는 구조 함수입니다.우리가 대상에 도착했을 때, 그것은 원형 체인의 맨 위에 있고, 부모 대상이 없기 때문에, 원형은 비어 있을 것이다.

console.log(Abdelrahman.__proto__.__proto__);  // Object.prototype
console.log(Abdelrahman.__proto__.__proto__.__proto__);    // null

우리가 배운 것을 응용하다
우리는 우리가 수조 구조 함수에서 배운 지식을 응용할 수 있다.
네모난 괄호[]를 사용하여 그룹을 만드는 것은 새로운 그룹 구조 함수를 사용하여 그룹을 만드는 것과 같다.

const arr = [1, 3, 1, 3, 6, 6, 5, 6, 1];
console.log(arr.__proto__ === Array.prototype); // true

우리는 수조 구조 함수 원형에 방법을 추가할 수 있다. (모든 수조 대상은 그것을 계승할 것이다.)

const arr = [1, 3, 1, 3, 6, 6, 5, 6, 1];
Array.prototype.unique = function () {
    return [...new Set (this)];
};
console.log(arr.unique ()); // Array(4) [ 1, 3, 6, 5 ]

오늘은 여기까지!나는 네가 그 속에서 교훈을 받아들일 수 있기를 바란다.곧 당신을 만날 것을 기대합니다!