소개하다.

Prototype은 JavaScript의 중요한 구성 요소로서 객체가 다른 객체로부터 속성과 방법을 상속할 수 있도록 합니다.종류는 계승을 더욱 쉽게 한다. 왜냐하면 그것은 더욱 간단한 문법을 제공하기 때문이다.
우리 조사해 보자...
그러면 원형은 어디에 있습니까? 원형은 어떠한 대상의 속성에서도 찾을 수 있습니다.
다음 예제 console.log()을 사용하면 원형이 하나의 속성임을 알 수 있습니다.

const myObj = {
    x: 100,
    y: 200,
}

console.log(myObj);

원형은 우리가 방금 만든 __proto__: Object 대상의 또 다른 속성이지만 위의 예시와 같이 __proto__에 값이 표시되어 있는데 이것이 바로 Object.prototype이다.그러나 어떻게 들어갔을까? 대상 내부를 살펴보면 기본적으로 Object.prototype에서 계승되는 다른 속성과 방법을 볼 수 있다.이것은 원형 체인이라고 불린다.

원형 체인이란?

대상마다 __proto__이라는 속성이 있는데 이 속성은 다른 대상을 원형으로 하는 링크를 가리킨다.이 속성은 원형에 사용된 대상의 모든 속성과 방법을 계승합니다.위의 예를 계속합시다.
여기서 우리는 Object.create()을 사용하여 다른 대상을 만들 것입니다. 대상을 만들고 원형을 매개 변수로 전달하는 대상으로 설정합니다.그리고 새로 만든 대상에 z에서 50의 속성을 설정합니다.

const myObj = {
    x: 100,
    y: 200,
}

const anotherObj = Object.create(myObj);
anotherObj.z = 50;

console.log(anotherObj);

객체를 작성하면 원형 체인이 설정됩니다.개발자 도구에서 __proto__ 속성을 확장함으로써 다른 대상에서 x과 y 속성을 정확하게 계승한 것이 분명하다.다음 그림을 보십시오.

원형 체인에서 다른 대상이 여전히 Object.prototype에서 계승된 것을 볼 수 있다.
이는 Object.protoype이 원형 계승체인의 꼭대기에 위치하고 __proto__의 Object.prototype이 null이라는 것을 의미하기 때문이다.Object.create()을 사용하여 대상을 만드는 방법은 다른 대상을 원형으로 사용하지만 상속 대상의 원형을 만들 수 있는 다른 방법도 있다.

ES5 및 ES6

이제 우리는 원형에 대해 더 잘 이해했다. ES5와 ES6에서 창설 대상과 원형 계승의 두 가지 방법을 살펴보자.

건설자

우리는 클래스에서 구조 함수나 구조 함수 방법을 사용하여 대상을 만들 수 있다.대상 실례를 만들기 위해서, 우리는 반드시 new 키워드를 사용해야 한다.

// ES5
function MyObj() {
    this.x = 100;
    this.y = 200
}

const obj1 = new MyObj();

console.log(obj1)

// ES6
class MyObj {
    constructor() {
        this.x = 100;
        this.y = 200
    }
}

const c1 = new MyObj();

console.log(c1);

상기 두 예시 모두 같은 결과를 얻었지만 새로 만든 대상의 구조 함수 지향류 중의 constructor function 또는 constructor() 방법일 뿐이다

상속권

이제 구조 함수 ES5를 사용하여 다른 객체에서 속성과 방법을 상속하는 절차를 살펴보겠습니다.

부모 구조 함수를 만듭니다.

function MyObj(x, y) {
    this.x = x;
    this.y = y;
}

구조 함수 원형에 필요한 방법을 추가합니다.

MyObj.prototype.sum = function() {
    return this.x + this.y;
}

에서 서브구조 함수를 만들고 MyObj.call(this, x, y)을 사용하여 서브구조 함수에서 부구조 함수를 실행합니다

function AnotherObj(x,y,z) {
    MyObj.call(this, x, y);
    this.z = z;
}

서브구조 함수에서 부구조 함수를 집행하는 또 다른 방법은 다음과 같다.그러나 이것은 작용할 뿐이다. 왜냐하면 이따가 우리는 서브구조 함수를 호출할 것이다.

function AnotherObj(x,y,z) {
    Object.getPrototypeOf(AnotherObj.prototype).constructor.call(this, x ,y)
    this.z = z;
}

은 부모 구조 함수에 추가된 방법을 계승하기 위해 하위 대상의 원형을 부모 대상으로 설정합니다.

AnotherObj.prototype = Object.create(MyObj.prototype);

은 서브구조 함수를 자신으로 초기화합니다.

AnotherObj.prototype.constructor = AnotherObj;

하위 객체의 새 인스턴스를 작성합니다.

const anotherObj1 = new AnotherObj(100, 200, 50);

우리가 컨트롤러에 실례를 기록할 때, 우리는 원형 체인에서 다음과 같은 구조를 얻는다.이것은 우리가 아버지 대상으로부터 속성과 방법을 계승했음을 나타낸다.

console.log(anotherObj1);

우리는 ES6 과정을 통해 이를 더욱 효과적으로 할 수 있다.

은 구조 함수와 방법을 사용하여 부류를 만든다.

class MyObj {
    constructor() {
        this.x = 100;
        this.y = 200
    }

    sum() {
        return this.x + this.y;
    }
}

하위 클래스 생성 및 호출super(x,y) .

class AnotherObj extends MyObj {
    constructor(x,y,z) {
        super(x,y);
        this.z = z;
    }
}

인스턴스 작성

const anotherObj1 = new AnotherObj(100, 200, 50);

일단 우리가 새로 만든 대상을 기록하면, 우리는 같은 결과를 볼 수 있다

console.log(anotherObj1)

유일한 차이점은 구조 함수는 클래스이지 함수 구조 함수가 아니다.

나는 그것이 나에게 유용하길 바란다. 왜냐하면 그것은 나에게 이 화제에 대해 더욱 깊이 이해하도록 도움이 되기 때문이다.읽어주셔서 감사합니다.당신의 피드백을 공유합니다.만약 당신이 뭔가 이상하다고 느낀다면 나에게 말해 주세요.즐거운 코딩!