(3) [원형 과 대상]

전단 개발 을 한 지 꽤 되 었 습 니 다. 많은 난관 을 겪 었 습 니 다. 선후 순 서 를 배출 하려 면 JavaScript 의 원형 과 대상 은 절대 TOP 3 에서 벗 어 날 수 없습니다.
앞부분 이 바다 라면, 자 바스 크 립 트 는 바다의 물이 다.
지금까지 글 을 써 서 이 부분 을 정리 하고 자신의 이 해 를 깊이 있 게 하기 위해 후발 주자 들 이 빨리 구 덩이 를 빠 져 나 갈 수 있 도록 도와 주 고 싶 었 지만 적당 한 착안점 이 부족 해서 독자 들 이 딱딱 한 교과서 가 아니 라 뚜렷 한 경 로 를 볼 수 있 도록 했다.최근 에 '좋 은 문 제 는 요리사 의 칼 과 같 아서 현상 을 쉽게 절개 하여 본질 에 이 르 게 해 줄 수 있다' 는 말 을 보 았 기 때문에 본 고 는 층 층 이 탐문 하고 해답 하 는 방식 으로 이해 하기 쉬 운 각 도 를 제공 하려 고 한다.
현재 의 소프트웨어 개발 은 대상 을 대상 으로 하지 않 는 것 이 매우 드물다. 그러면 자 바스 크 립 트 는 어떻게 대상 을 만 듭 니까?
1. 대상 을 만 드 는 방법
전통 적 인 대상 프로 그래 밍 언어 (예 를 들 어 C + +, 자바 등) 에 서 는 정의 류 의 키워드 class 를 사용 하여 먼저 하나의 종 류 를 설명 한 다음 에 클래스 인 스 턴 스 를 통 해 대상 인 스 턴 스 를 만 듭 니 다.그러나 JavaScript 에서 이러한 논리 적 대상 을 만 들 려 면 대표 적 인 구조 함 수 를 정의 한 다음 new 연산 자 를 통 해 구조 함수 인 스 턴 스 를 실행 하여 대상 을 만들어 야 합 니 다.

대상 글자 의 양

var object1 = { name: "object1" }

구조 함수 법

var ClassMethod = function() {
    this.name = "Class"
}
var object2 = new ClassMethod()
//             
var object3 = new Object({ name: "object3" })

여기 서 언급 한 new 연산 자 는 나중에 상세 하 게 설명 할 것 이다

.

Object.create(proto) 새로운 대상 을 만 들 고 입 참 proto 대상 을 사용 하여 새로 만 든 대상 __proto__ 을 제공 합 니 다. 또한 입 참 대상 이 새로 만 든 대상 의 원형 대상 입 니 다.

var Parent = { name: "Parent" }
var object4 = Object.create(Parent)

JavaScript 원형 계승 의 작은 나방 을 알 고 싶 으 면 원형 대상, 사례 대상, 구조 함수 와 원형 체인 의 개념 과 관 계 를 알 아야 합 니 다. 그 다음 에 저 는 표현 하 는 구조 가 뚜렷 하고 간단명료 해 야 합 니 다.
2. 원형 계승
원형 체인 을 잠시 내 버 려 두 고 나 는 먼저 나머지 세 가지 개념의 문 도 를 분명히 말 하 겠 다. 만약 에 네 손 에 종이 와 펜 이 있 으 면 머 릿 속 에서 상상 하지 않 아 도 복잡 하지 않다.

등변 삼각형 을 그리고 정점 에서 시계 방향 으로 각 번호 (1), (2), (3)

그 중에서 (1) 옆 에 '원형 대상', (2) 구조 함수, (3) 인 스 턴 스 대상

이 라 고 표시 되 어 있다.

에서 (2) 구조 함수 (예 를 들 어 위의 예 에서 ClassMethod 가 가리 키 는 (3) 인 스 턴 스 대상 (위의 예 에서 object2 에 화살표 가 있 는 선 을 그립 니 다.온라인 표시 new 연산 자, 표시 var object2 = new ClassName().

구조 함수 가 가리 키 는 (1) 원형 대상 에서 화살표 가 있 는 선 을 그립 니 다.온라인 레이 블 prototype 은 이 구조 함수 의 원형 대상 이 ClassName.prototype 과 같다 는 것 을 나타 낸다.(함수 모두 prototype 속성 이 있 고 원형 대상 을 가리 키 고 있 습 니 다)

인 스 턴 스 대상 에서 (1) 원형 대상 을 가리 키 며 화살표 가 있 는 선 을 그립 니 다.온라인 레이 블 __proto__ 은 이 인 스 턴 스 대상 의 원형 대상 이 object2.__proto__ 과 같다 는 것 을 나타 내 고 4 단계 와 결합 하면 ClassName.prototype === object2.__proto__ 이 있다.

원형 대상 에서 (2) 구조 함수 에 화살표 가 있 는 선 을 그립 니 다.온라인 레이 블 constructor 은 이 원형 대상 의 구조 함수 가 ClassName === object2.__proto__.constructor 와 같다 는 것 을 나타 낸다.

자 바스 크 립 트 함수 와 대상 이 가지 고 있 는 속성 에 대해 중점 을 두 어야 할 말 이 있 습 니 다. 모든 대상 은 하나의 __proto__ 속성 이 원형 대상 을 가리 키 고 모든 함수 가 prototype 속성 이 있 으 며 원형 대상 을 가리 키 고 있 습 니 다.함수 도 사실은 하나의 대상 이다. 그러면 함 수 는 두 개의 원형 대상 이 있다.평소에 대상 이 __proto__ 속성 에 따라 가리 키 는 원형 대상 으로 구 성 된 원형 체인 에 더욱 관심 을 가지 기 때문에 함수 의 두 가지 원형 을 구분 하기 위해 __proto__ 가 가리 키 는 원형 대상 을 암시 적 원형 이 라 고 부 르 고 prototype 가 가리 키 는 원형 대상 을 디 스 플레이 원형 이 라 고 부른다.
여기 서 보면 원형 대상, 사례 대상, 구조 함수 와 원형 체인 이 무엇 인지 이미 알 고 있 을 것 이다. 그러나 왜 이러 는 지 에 대해 서 는 아직 어 리 석 을 것 이다. 왜냐하면 나 도 그 랬 기 때문이다. 예전 의 유형 과 대상, 아버지 류 와 서브 류 의 개념 으로 원형 과 사례 를 대조 하고 익숙 한 관 계 를 찾 아 자신 이 이해 할 수 있 도록 하려 고 한다.
사람들 은 항상 익숙 한 사물 을 통 해 낯 선 사물 을 유추 하여 인식 하 는 습관 이 있다.이것 은 아마도 빠 른 방식 일 것 이다. 그러나 이것 은 결코 효과 적 인 방식 이 아니다.유추 는 항상 우리 로 하여 금 논리 적 추 리 를 경시 하 게 한다
3. instanceof 에서 원형 체인 을 본다.
문법 형식 은 object instanceof constructor 이 고 글자 적 으로 이해 instanceof 하 며 object 구조 함수 인 스 턴 스 화 된 대상 인지 판단 하 는 데 사용 된다.그러나 이 밖 에 구조 함수 가 가리 키 는 디 스 플레이 원형 대상 constructor 이 constructor.prototype 의 원형 체인 에 존재 하면 결 과 는 모두 object 이다.
글자 의 이해 가 다소 어 긋 날 수 있 으 니, 제때에 MDN 문 서 를 찾 아 보 세 요.
프로 토 타 입 체인 은 자 바스 크 립 트 관련 대상 간 에 true 속성 이 순서대로 인용 하여 형 성 된 방향 관계 체인 으로 프로 토 타 입 대상 의 속성 과 방법 은 인 스 턴 스 대상 에 의 해 사용 할 수 있다.(이런 지향 적 인 부자 관계 체인 은 계승 을 실현 하 는 특성 을 가진다)
연산 자__proto__ 집행 과정 에서 무슨 일이 일 어 났 습 니까?
다음 세 단계:

계승 new 의 새로운 대상 을 만 듭 니 다.

구조 함수 new Foo() 를 실행 하고 Foo.prototype 지침 을 새로 만 든 대상 에 연결 합 니 다.

구조 함수 가 한 대상 에 게 돌아 가면 이 대상 은 Foo 연산 자가 실행 한 결과 이다.대상 을 되 돌려 주지 않 으 면 첫 번 째 로 만 든 새 대상 을 사용 합 니 다.

직관 적 인 이 해 를 위해 함수 this 를 사용자 정의 하여 연산 자 를 모 의 합 니 다.

function myNew(Foo){
    var tmp = Object.create(Foo.prototype)
    var ret = Foo.call(tmp)
    if (typeof ret === 'object') {
        return ret
    } else {
        return tmp
    }
}

5. 상속 실현
ES6 에서 더욱 직관 적 인 문법 사탕 형식 이 나 타 났 다.new 그러나 여기 서 우 리 는 이전에 이런 문법 사탕 이 없 었 던 것 이 어떻게 실현 되 었 는 지 만 볼 수 있다.나 는 줄곧 한 가지 체험 을 해 왔 다.
한 가지 사물 을 빨리 이해 하려 면 그 기원 과 변 화 를 알 아야 한다.
우선 부모 클래스 Parent 와 속성 name 을 정의 합 니 다.

function Parent() {
    this.name = 'parent'
}

다음은 계승 myNew 의 하위 클래스 new 를 어떻게 정의 합 니까?

구조 함수 방식

function Child() {
    Parent.call(this)
    this.type = 'subClass' // ...                
}

이런 방식 의 결함 은 부모 류 원형 체인 의 속성 과 방법 이 하위 류 에 의 해 계승 되 지 않 는 다 는 것 이다.

원형 체인 방식

function Child() {
    this.type = 'subClass'
}
Child.prototype = new Parent()

은 하위 클래스 가 부모 클래스 의 원형 체인 의 속성 과 방법 을 계승 하지 못 하 는 결함 을 보완 하 는 동시에 새로운 문 제 를 도입 했다. 부모 클래스 의 대상 이나 배열 속성 은 하위 클래스 에 전달 하 는 인 스 턴 스 를 참조 할 것 이다.예 를 들 어 부모 클래스 에 하나의 배열 속성 class Child extends Parent{} 이 있 는데 현재 Parent 인 스 턴 스 를 통 해 두 개의 인 스 턴 스 대상 Child 과 arr 을 화 시 켰 다. 그러면 new Child() 속성 에 대한 조작 은 동시에 c1 의 변 화 를 일 으 킬 수 있다. 이것 은 당연히 우리 가 원 하 는 것 이 아니다.

조합 방식 (1, 2 두 가지 방식 을 종합)

function Child() {
    Parent.call(this)
    this.type = 'subClass'
}
Child.prototype = new Parent()

은 상기 문 제 를 해결 하 였 으 나 여기 구조 함수 가 두 번 실 행 된 것 을 분명히 보 았 고 약간 여분 이 있 었 다.

조합 최적화 방식

function Child() {
    Parent.call(this)
    this.type = 'subClass'
}
Child.prototype = Parent.prototype

은 불필요 한 부모 구조 함수 호출 을 줄 였 으 나 하위 클래스 의 디 스 플레이 원형 은 덮어 씁 니 다.이 예 에서 하위 구조 함 수 를 통 해 하나의 대상 을 예화 할 수 있다. c2 인 스 턴 스 대상 의 원형 대상 을 검증 할 수 있 고 부모 구조 함수 의 디 스 플레이 원형 이다. c1 이런 방식 은 여전히 완벽 하지 않다.

최종 방식

function Child() {
    Parent.call(this)
    this.type = 'subClass'
}
Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

인 스 턴 스 대상 의 arr 속성 치 는 항상 이 인 스 턴 스 대상 의 구조 함수 c2.arr 속성 이다.여기 서 구조 함수 의 종속 관계 에 대해 헷 갈 리 기 쉬 운 점 이 존재 합 니 다. 저 는 몇 마디 를 더 해서 이것 을 분명하게 말 하려 고 합 니 다. 위 에 우리 가 그린 삼각형 도 기억 합 니까?세 개의 각 은 구조 함수, 사례 대상 과 원형 대상 을 대표 하고 세 개의 방향 변 은 각각 대표 var cObj = new Child(), cObj.__proto__.constructor === Parent, __proto__ 가 있 으 며 prototype 에 따라 방향 변 으로 연결 되 는 체인 이 바로 원형 체인 이다.
구조 함수 의 종속 관 계 를 명확 하 게 설명 하려 면 우 리 는 먼저 위 에 그 려 진 원형 체인 삼각형 중의 모든 삼각형 에 방향 변 을 추가 해 야 한다. 원형 대상 에서 구조 함 수 를 가리 키 는데 이것 은 원형 대상 이 하나 있다 는 것 을 나타 낸다.new 속성 은 구조 함 수 를 가리 키 고 이 구조 함수 의__proto__ 속성 은 이 구조 함 수 를 가리 키 기 때문에 국부 적 으로 방향 고리 가 형성 되 었 다.
지금 은 모든 것 이 조 화 롭 습 니 다. 유독 한 가지 더 있 습 니 다. 바로 원형 체인 말단 의 인 스 턴 스 대상 구조 함수 의 지향 입 니 다. prototype 연산 자 를 통 해 만 든 인 스 턴 스 대상 __proto__ 속성 이 든 모두 원형 대상 constructor 과 같 습 니 다.그래서 일치 성 을 유지 하기 위해 위의 그 문장 prototype 이 있 습 니 다. 한 대상 이 어떤 구조 함수 에서 예화 되 었 는 지 알 고 싶 으 면 new 에 따라 얻 을 수 있 습 니 다.

다 상속

function Child() {
    Parent1.call(this)
    Parent2.call(this)
}
Child.prototype = Object.create(Parent1.prototype)
Object.assign(Child.prototype, Parent2.prototype)
Child.prototype.constructor = Child

은 Object.create 방법 으로 constructor 원형 상의 방법 을 constructor 원형 으로 복제 했다.