[JS 기초] 원형 대상 의 일 들 (하나)

js 의 기 초 를 말하자면 돌아 갈 수 없 는 고 비 는 바로 원형 체인, 역할 영역 체인, this (em... 그래, 그리고 폐쇄) 이다. 오늘 은 원형 대상 에 관 한 지식 을 정리 하여 자신 과 여러분 이 복습 할 수 있 도록 한다.
개념 적 이해
무엇이 원형 대상 입 니까?다음 과 같은 몇 가지 가 있다. 1. 구조 함 수 는 하나의 prototype 속성 이 있 고 구조 함수 의 원형 대상 을 가리킨다.인 스 턴 스 는 하나의 __proto__ 속성 이 있 고 원형 대상 을 가리킨다.
PS: 정확히 말 하면 인 스 턴 스 가 원형 대상 을 가리 키 는 것 은 [[Prototype]] 속성 이지 만 이것 은 암시 적 속성 이 므 로 스 크 립 트 에 접근 할 수 없습니다.따라서 브 라 우 저 업 체 는 원형 대상 을 명시 적 으로 가리 키 는 속성 __proto__ 을 제공 하지만 ECMA 규범 이 아 닙 니 다.
함수 에 주의 하 는 것 은 prototype 속성 입 니 다. 인 스 턴 스 는 __proto__ 속성 입 니 다. 틀 리 지 마 세 요.
밤 을 들 어 라. 우 리 는 구조 함수 Person 가 있다.

function Person(name) {
    this.name = name
}

이때, 우 리 는 Person 의 인 스 턴 스 person 를 만 듭 니 다.

var person = new Person("  ")

위의 이론 에 따 르 면 다음 과 같이 표시 할 수 있다.Person.prototype === person.__proto__
그들 이 가리 키 는 것 은 모두 원형 대상 이다.
2. 같은 구조 함 수 를 통 해 실례 화 된 여러 개의 실례 대상 은 같은 원형 대상 을 가진다.

var person1 = new Person("  ")
var person2 = new Person("  ")

person1.__proto__, person2.__proto__, Person.prototype 그들 은 서로 같다.
3. 원형 대상 은 하나의 constructor 속성 이 있 고 이 원형 대상 에 대응 하 는 구조 함 수 를 가리킨다.

Person.prototype.constructor === Person

person.__proto__.constructor === Person

4. 실례 대상 자 체 는 constructor 속성 이 없 지만 원형 대상 의 constructor 속성 을 계승 할 수 있다.

person1.constructor === Person
person2.constructor === Person

역할.
OK, 원형 이 무엇 인지 분명히 말 하면 이 물건 을 왜 사 용 했 는 지, 왜 구조 함수 에 이런 물건 을 넣 었 는 지 말 해 야 한다.
아니면 구조 함수 Person 를 예 로 들 어 조금 만 고 치 겠 습 니 다.

function Person(name) {
    this.name = name
    this.sayName = function() {
        console.log(this.name)
    }
}

var person1 = new Person("  ")
var person2 = new Person("  ")

우 리 는 구조 함수 Person 에 하나의 방법 sayName 을 추가 했다. 이렇게 Person 의 사례 person1, person2 는 각각 하나의 sayName 방법 이 있다.
주의 하 세 요. 제 가 말 한 것 은 각자 입 니 다. 무슨 뜻 입 니까?인 스 턴 스 를 만 들 때마다 메모리 에 sayName 방법 을 만들어 야 한 다 는 것 이다. 이 sayName 들 은 같은 sayName 이 아니다.

person1.sayName === person2.sayName 

-> false

여러 개의 실례 가 같은 방법 을 반복 해서 만 드 는 것 은 분명히 자원 을 낭비 하 는 것 이다.이때 우리 의 원형 대상 이 등장 했다.만약 구조 함수 중의 방법 을 우리 가 이렇게 쓴다 면:

function Person(name) {
    this.name = name
}

Person.prototype.sayName = function() {
    console.log(this.name)
}

var person1 = new Person("  ")
var person2 = new Person("  ")

이전 과 달리 우 리 는 구조 함수 에 쓰 는 것 이 아니 라 sayName 방법 을 구조 함수 의 원형 대상 에 썼 다.
여기 서 먼저 개념 을 제시 해 야 한다. 즉, 대상 이 속성 이나 방법 을 찾 을 때 먼저 자신 에 게 서 찾 고 찾 으 면 호출 하 는 것 이다.자신 에 게 서 찾 지 못 하면 그의 원형 대상 을 찾 을 것 이다.이것 이 바로 원형 체인 의 개념 입 니 다. 먼저 여기까지 누 르 면 여러분 이 이 일 을 알 면 됩 니 다.
전에 말 한 것 을 기억 하 십 니까?
같은 구조 함 수 를 통 해 실례 화 된 여러 실례 대상 은 같은 원형 대상 을 가지 고 있다person1 와 person2 에 서 는 분명히 방법 이 없 지만 그들의 원형 대상 은 있 습 니 다.
그래서 여기 sayName 와 person1.sayName 는 실제 적 으로 그의 원형 대상 person2.sayName 을 계승 하 는 방법 이다. 원형 대상 이 같은 것 이 라면 sayName 방법 도 똑 같 을 것 이다. 그래서 이때:

person1.sayName === person2.sayName   

-> true

공유 해 야 할 방법 과 속성 을 원형 대상 에 놓 고 인 스 턴 스 는 이러한 속성 과 방법 을 호출 할 때 매번 만 들 지 않 아 도 자원 을 절약 하 는 것 이 원형 대상 의 역할 이다.
고민
하지만 공유 인 만큼 문제 가 있 습 니 다. 아니면 sayName 구조 함수 입 니까? 다시 개조 해 보 겠 습 니 다.

    function Person(name) {
        this.name = name
    }
    
    Person.prototype.ageList = [12, 16, 18]
   
    var person1 = new Person("  ")
    var person2 = new Person("  ")

이때 우 리 는 Person 에서 조작 을 했다.

person1.ageList.push(30)

이때 person1 가 무엇 인지 보 세 요.

person2.ageList 

-> [12, 16, 18, 30]

좀 재미 있어 요. person2.ageList 에 있 는 person2 도 30 이 많아 졌어 요.
그 이 유 는 사실 공유 때문이다.
공유 가 좋 지 않 은 점 은 인 스 턴 스 가 인용 유형 (배열, 대상, 함수) 의 속성 을 수정 하면 원형 대상 의 속성 수정 (사실은 원형 대상 의 속성 을 수정 하고 인 스 턴 스 는 이 속성 이 없 음) 을 초래 하여 모든 인 스 턴 스 에서 이 속성 이 바 뀌 었 습 니 다!
대부분의 경우 우 리 는 공유 하 는 것 을 좋아 하고 자원 을 절약 할 수 있 음 이 분명 하 다.그러나 모든 인 스 턴 스 가 영향 을 받 는 것 을 좋아 하지 않 습 니 다. 아니면 다른 인 스 턴 스 를 만들어 서 무엇 을 합 니까? 하 나 를 사용 하면 되 지 않 겠 습 니까?
따라서 우 리 는 공유 해 야 할 속성 과 방법 을 원형 대상 에 써 야 하고 모든 인 스 턴 스 는 서로 영향 을 주지 않 으 려 는 속성 을 구조 함수 에 써 야 한다.이와 유사 하 다.

function Person(name) {
    this.name = name
    this.ageList = [12, 16, 18]
}

var person1 = new Person("  ")
var person2 = new Person("  ")

person1.ageList.push(30)

person1.ageList 
-> [12, 16, 18, 30]

person2.ageList 
-> [12, 16, 18]

이곳 에 구덩이 가 있다
원형 대상 에 대해 서 는 두 개의 구덩이 가 있 으 니 여러분 께 말씀 드 려 야 합 니 다.
1.

    function Person(name) {
        this.name = name
    }
    
    Person.prototype.ageList = [12, 16, 18]
   
    var person1 = new Person("  ")
    var person2 = new Person("  ")
    
    person1.ageList.push(30)
    
    person2.ageList 
    -> [12, 16, 18, 30]

이것 은 문제 가 없 지만 만약 내 가 조작 ageList 을 person1.ageList.push(30) 으로 바 꾸 면 결 과 는 어떻게 될 까?

person2.ageList 

-> [12, 16, 18]

여기 가 이상 하 다. 모두 person1.ageList = [1, 2, 3] 를 조작 하 는데 왜 다 르 지?
그 이 유 는 person1.ageList 할당 작업 이기 때문이다.
우 리 는 person1.ageList = [1, 2, 3] 자체 가 person1 속성 이 없 으 며, 할당 작업 은 ageList 자신의 person1 속성 을 증가 시 킬 것 이 라 고 말 했다.자신 이 있 는 이상 원형 대상 을 찾 지 않 아 도 된다.이때 원형 대상 ageList 은 사실 변화 가 없다.그리고 ageList 자신의 person2 속성 이 없 기 때문에 ageList 원형 을 계승 하 는 것 이 바로 person2.ageList 이다.
2.

    function Person(name) {
        this.name = name
    }
    
    Person.prototype = {
        ageList : [12, 16, 18]
    }
   
    var person1 = new Person("  ")
    var person2 = new Person("  ")
    
    person1.ageList.push(30)
    
    person2.ageList -> [12, 16, 18, 30]

여 기 는 여전히 문제 가 없 지만 문법 에 변화 가 있다. 우 리 는 더 이상 [12, 16, 18] 의 형식 으로 값 을 부여 하지 않 고 Person.prototype.ageList = [12, 16, 18] 에 대상 을 부여 했다. 대상 중 에는 Person.prototype 이 있다.
이렇게 보면 문제 가 없 는 것 같 습 니 다. 사용 해도 똑 같 습 니 다. 변화 ageList, person1.ageList t 도 변 했 습 니 다. 이 는 person2.ageLis 와 person1.ageList 가 같은 원형 대상 에서 계승 되 었 음 을 설명 합 니 다.
하지만 여기 문제 가 있 습 니 다. 전에 우리 가 말 했 습 니 다.
실례 대상
자체person2.ageList 속성 이지 만 원형 대상 을 계승 할 수 있 습 니 다.constructor 속성
하지만 이때

person1.constructor === Person 
-> false

person2.constructor === Person 
-> false

왜 일 까요?constructor 에 하나의 대상 을 부여 함으로써 원형 대상 의 방향 을 수 정 했 기 때문에 이때 원형 대상 의 Person.prototype 은 내장 구조 함수 constructor 를 가리 키 고 사용 Object 의 형식 으로 값 을 부여 하면 이런 문제 가 발생 하지 않 을 것 이다.
따라서 원형 대상 에 게 새로운 대상 을 할당 할 때 원형 대상 Person.prototype.ageList = [12, 16, 18] 을 원래 구조 함수 로 되 돌려 주 는 것 을 기억 하 세 요.

Person.prototype.constructor = Person

이상 은 이번 공 유 된 내용 입 니 다. 원형 대상 에 대한 다른 지식 은 다음 편 JS 기초 - 원형 대상 에 대한 이야기 (2) 에서 말씀 드 리 겠 습 니 다.
ps: 수 다스 럽 게 써 서 귀 찮 게 보 실지 모 르 겠 어 요.......................................................