JavaScript의 원형 상속

tl;dr: Understanding Prototypal inheritance, uses & specifics. Composed with code, console & explanatory approach.

Problems are understood crystal clear if seen from a right perspective. 같은 축에서 이동: 자바스크립트에서 개념을 계승하는 생물학적 시각을 고려한다.마이크 아빠 시켜.👨 조는 그의 아들이다👦. 생물학에 따르면 조는 자신도 모르게 아버지 마이크의 재산이나 이미지를 물려받는다.상위 객체에서 하위 객체로 상속되는 원본 복사본의 이미지나 속성 또는 버전은 원형 상속을 의미합니다.
...
Javascript는 상속 대상의 원형을 지원하기 때문에 원형을 기반으로 하는 언어입니다.Javascript는 해당 요소를 객체라고 합니다.기본 JS 객체에는 다른 객체에 의해 상속될 수 있는 자체 내장 속성 패키지가 있습니다.예를 들면 다음과 같습니다.console.log(Array.prototype); //brings all basic properties and methods associated with an Array Object and appends it to Array.prototype.

JS 인터뷰의 원형 유전과 관련된 용어 정의:

원형 계승은 대상과 방법이 한 대상에서 공유하고 확장하며 복사할 수 있다는 것을 의미한다.

원형은 속성 예비원으로 사용할 수 있는 또 다른 대상이다.

원형 체인은 대상의 속성을 찾는 메커니즘이다.객체의 등록 정보에 액세스하면 JavaScript가 먼저 객체 자체를 검색합니다.이 속성을 찾지 못하면 프로토 체인까지 올라갑니다. (심지어는 찾을 수 없습니다.)

몇 가지 실용적인 학습 코드 단계:
1. 구조 함수를 만들고 그 원형이 존재하는지 확인합니까?
언제든지 구조 함수를 만들면prototype이라는 속성 대상을 자동으로 만들고 함수 대상 (구조 함수) 에 추가합니다.
주의: 이 새 원형 대상은 본체 자바스크립트 대상이나 본체 자바스크립트 대상이 있는 내부 개인 링크를 가리킨다.
다음 예제에서는 구조 함수 Mike를 생성합니다.

function Mike () {
    this.name = 'Mike';
    this.skill = 'JavaScript';
}

//Mike inherits an Object prototype. The "prototype" gets created with function Mike declaration, automatically.

Mike.hasOwnProperty('prototype');
console.log(Mike.prototype);  

//paste above code on console.

The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as its own property (as opposed to inheriting it)~ MDN

2. 함수 원형에 속성을 추가합니다.
다음 구문은 속성 및 방법을 함수 원형에 지정하는 방법을 정의합니다.Syntax: function_name.prototype.property_name = property_value;

Mike.prototype.putName = function () {
    return 'My name is ' + this.name;
}
console.log(Mike.prototype);  //putName method added to Mike prototype

이것은putName 방법이 원형 방법으로 만들어져 이전 컨트롤러의 출력과 비교를 시도합니다.뭐가 달라요?
3. 부대에서 자대로 계승한다.
"new"키워드를 추가하여 부모 대상의 실례를 만들어서 속성을 계승합니다.
예를 들면 다음과 같습니다.

var Joe = new Mike();  
console.log(Joe);     //Son(joe) inherits father prototypal properties

막후에서 당신이 전화했을 때: var Joe = new Mike();JavaScript는 실제로 다음과 같은 작업을 수행합니다.

var Joe = new Object();
Joe.[[Prototype]] = Mike.prototype;
Mike.call(Joe);

4. 브라우저는 어떤 객체에 속하는 속성을 어떻게 찾습니까?
브라우저는 우선 하위 대상의 속성 [즉 자신의 실례 속성]을 검사합니다. 만약 찾지 못하면 계승된 원형 속성을 검색하고, 찾지 못하면 대상의 프로토를 한 단계로 옮겨다니며, 다시 찾지 못하면 프로토의 프로토를 사슬 단계가 끝날 때까지 옮겨다니며 검사합니다.
그런데 프로토가 뭐예요?
proto u는 객체와 원형을 연결하는 내부 속성입니다.

In layman terms, proto acts as a wormhole that references properties from one Object to another Object, during prototypal chain lookup mechanism.

예를 들면 다음과 같습니다.

Conside the Prototypal chain built using above code:
// Joe ---> Mike ---> Object.prototype ---> null

5. 왜 우리는 원형 유전(PI)이 필요한가?
PI는 DRY 원리를 객체 인스턴스에 적용하는 데 도움이 됩니다.또한 내부에서 속성 풀을 부모 대상에서 하위 대상으로 옮기는 데도 도움이 된다.그래서 사람들은 기능 공유 모델을 선호한다.
...
어떤 사람들은 원형 유전을 처리할 때 어떻게 처리하는지 안다.

반대.proptotype은 다양한 브라우저의 지원을 받아 속도가 매우 빠르다.그것도 실시간(JIT) 컴파일러로 본질적으로 최적화할 수 있다.

원형 계승은 모든 실례가 부모 원형에서 정의한 모든 속성을 효과적으로 공유할 수 있도록 합니다.부모 인스턴스 속성의 변경 사항은 모든 하위 인스턴스로 자동 완화됩니다.

널은 프로토타입이 없으므로 프로토타입 체인을 종료합니다.[P.S:typeof Null=object]

자바스크립트의 함수는 항상 기본'prototype'속성을 가지고 있습니다. 예외는 화살표 함수입니다.Arrow 함수에는 기본 prototype 속성이 없습니다.

원형 코드를 실행합니다.코드가 성능 제한을 받으면 원형 체인에서 속성을 찾는 시간에 부정적인 영향을 미칠 수 있습니다.범위 체인에서 깊이 들어갈수록 [[[Prototype]]을 차례로 볼 때 계산 비용이 커진다.검색 문제를 해결하기 위해 hasOwnProperty라는 내장 속성을 사용할 수 있습니다.그것은 대상 자체의 속성을 처리하고, 검색한 후에 브리 값을 되돌려주며, 원형 체인 전체를 훑어보지 않는다.개발자로서 원형 체인의 길이를 주의하고 필요할 때 이를 분리하여 가능한 성능 문제를 피하십시오.

객체를 확장하지 마십시오.비원시 속성을 추가하는 원형입니다.그것은 포장을 깨뜨리고 원숭이 패치 모드를 만들었다.

부모 대상에서 구조 함수의 초기화는 하위 대상에 불필요한 방법을 과부하할 수 있다.이 일을 할 때는 조심해야 한다.

이 주제에 대한 자세한 내용은 다음 참조 자료를 참조하십시오.

proto vs prototype

When Not to extend Prototypal chain

Prototype.js

MDN - prototypal inheritance

참고 자료: MDN, 스택 오버플로우, V8 - 블로그 및 인터넷 블로그.
원형 계승은 제가 개발에 관한 첫 번째 기사입니다. 변경 사항이나 건설적인 피드백은 모두 매우 환영을 받습니다:) 읽어 주셔서 감사합니다.❤️