면접 의 JS 편 - 원형 과 원형 체인

본문 주제

대상 을 만 드 는 데 몇 가지 방법 이 있다

원형, 구조 함수, 사례, 원형 체인 의 관계

instanceof 원리

실례 문제 (고찰)

대상 을 만 드 는 몇 가지 방법

//      
const obj1 = { name: 'guodada' }
const obj11 = new Object({ name: 'guodada' })

//       
function Pershon() {
  this.name = 'guodada'
}
const obj2 = new Pershon()

// Object.create
const obj3 = Object.create({ name: 'guodada' })

원형, 구조 함수, 실례, 원형 체인 간 의 관계
여기 서 원형, 구조 함수, 사례, 원형 체인 간 의 관 계 를 중점적으로 말한다. 이것 도 면접 에서 자주 묻 고 헷 갈 리 기 쉬 운 점 이기 때문이다.
구조 함수 와 new 는 무엇 을 했 습 니까?
함수 가 new 키워드 에 호출 될 때 구조 함수 입 니 다.new 키워드 의 내부 실현 체제 (예 를 들 어 설명):

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

const person = new Person('guodada')

새로운 대상 을 만 들 었 고 그 는 Person.prototype 에 계승 했다.

구조 함수 Person 이 실행 되 고 해당 하 는 매개 변수 가 들 어 오 며 컨 텍스트 (this) 는 이 새로운 인 스 턴 스 로 지 정 됩 니 다.

구조 함수 중의 코드 를 집행 한다.

새 대상 으로 돌아 가기

var obj = {} //        
obj.__proto__ = constructor.prototype //   __proto__   ，         prototype   。
constructor.call(this) //   this
return obj

(new 연산 자가 무엇 을 했 는 지 보고 돌아 오 는 것 을 권장 합 니 다...)
prototype
모든 함수 에는 prototype 속성 이 있 습 니 다.이 속성 은 함수 의 원형 대상 을 가리킨다.

Person.prototype // {constructor: Pershon(),__proto__: Object}

__proto__
그러면 우 리 는 실례 와 실례 원형 을 어떻게 표시 해 야 합 니까?
모든 JavaScript 대상 (null 제외) 이 가지 고 있 는 속성 은 __proto__ 이 라 고 합 니 다. 이 속성 은 대상 의 원형 을 가리 킵 니 다.

person.__proto__ === Person.prototype // true

constructor
인 스 턴 스 대상 과 구조 함수 가 모두 원형 을 가리 킬 수 있 는 이상 원형 은 속성 지향 구조 함수 나 인 스 턴 스 가 있 습 니까?

Person.prototype.constructor === Person

구조 함수, 실례 원형, 실례 간 의 관 계 를 정리 하 다

Person.prototype //     ['prototype']       
person.__proto__ === Person.prototype //   ['__proto__']       
Person.prototype.constructor === Person //     ['constructor']       

원형 체인
모든 인 스 턴 스 는 원형 대상 을 가리 키 는 __proto__ 지침 을 포함 하고 이 관계 에 의존 하여 층 층 이 들 어가 면 인 스 턴 스 와 원형 체인 이 형성 된다.

function Person() {}

Person.prototype.name = 'Kevin'

var person = new Person()

person.name = 'Daisy'
console.log(person.name) // Daisy

delete person.name
console.log(person.name) // Kevin

이 예 에서 우 리 는 인 스 턴 스 대상 person 에 name 속성 을 추가 했다. 우리 가 인쇄 person.name 할 때 결 과 는 자 연 스 럽 게 Daisy 이다.
그러나 우리 가 person 의 name 속성 을 삭 제 했 을 때 읽 기 person.name, person 대상 에서 name 속성 을 찾 지 못 하면 person 의 원형 즉 person.__proto__, 즉 Person.prototype 에서 찾 을 수 있 습 니 다. 다행히도 우 리 는 name 속성 을 찾 았 고 결 과 는 Kevin 입 니 다.
원형의 종점 은 null 인 데 null 속성 이 없 기 때문이다.
관계 도 는 다음 과 같이 업데이트 할 수 있 습 니 다.
참고 로 그림 에서 서로 관련 된 원형 으로 구 성 된 체인 구 조 는 바로 원형 체인, 즉 파란색 의 이 선 이다.
instanceof 원리
js 의 기본 유형 은 proto, String, Undefined, Boolean, Number, Null 가 있 습 니 다. 우 리 는 보통 Symbol 을 통 해 값 을 판단 할 수 있 는 유형 입 니 다.

typeof 1 === 'number'
typeof function() {} === 'function'
typeof null === 'object' //   ！

//       
typeof {} === 'object'
typeof [] === 'object'

인용 유형의 판단 은 typeof 을 통 해 실례 가 다른 대상 의 인용 인지 아 닌 지 를 판단 하 는 데 쓰 인 다.

person instanceof Person // true

원 리 는 바로 실례 ['proto'] = = 구조 함수 ['prototype'] 이지 만 주의해 야 할 것 은 instanceof 원형 체인 을 통 해 계속 아래 를 찾 을 수 있다 는 것 이다.

person instanceof Object // true

person.__proto__ === Person.prototype // true
person.__proto__.constructor === Person // true

고전 실례 문 제 는 다음 과 같다.

function A() {
  B = function() {
    console.log(10)
  }
  return this
}

A.B = function() {
  console.log(20)
}

A.prototype.B = function() {
  console.log(30)
}

var B = function() {
  console.log(40)
}

function B() {
  console.log(50)
}

A.B()
B()
A().B()
B()
new A.B()
new A().B()
//           

상술 한 문제 의 답 이 얼마 인지 여러분 이 한번 시험 해 보 세 요.더 보기 (ps 이 문 제 는 상하 문 을 실행 하 는 개념 인 함수 성명 과 함수 표현 식 을 고찰 했다)
정 답 은 필자 가 전에 쓴 글 에서 면접 문 제 를 통 해 원형 / 원형 체인 - 함수 성명 / 함수 표현 식 을 배운다.
생각 하고 답 을 발표 하 다.

instanceof = > A 원형 대상 에서 찾기 A.B() answer 20

A.B = function() { console.log(20) } = > 같은 이름 의 함수 표현 식 과 함수 성명 이 동시에 존재 할 때 항상 표현 식 answer 40

을 실행 합 니 다.

B()

A().B() 실행 함수 A = > 1. 변수 B 재 할당 함수 2. 이 (window)

를 되 돌려 줍 니 다.

A() 전체 국면 에서 B 함수 가 다시 할당 되 었 기 때문에 출력 10

.B() = > 위의 코드 가 A 함 수 를 실 행 했 습 니 다. 이때 전역 에서 B 함수 출력 10

B() = > new 가 실행 new A.B()

A.B = function () {console.log(20)};

new A().B() 구조 함수 A = > new

집행

objA.__proto__ = A.prototype A 의 원형 대상 에서 B 를 찾 습 니 다..B() 가리 키 는 함수 의 원형 대상

A.prototype 수출 30

A.B() // 20
B() // 40
A().B() // 10
B() // 10
new A.B() // 20
new A().B() // 30

잘못된 점 이 있 으 면 지적 해 주세요 ~
자 바스 크 립 트 를 참고 하여 원형 에서 원형 체인 으로 깊이 들 어가 기