온고 js 시리즈 (15) - 원형 & 원형 체인 & 원형 계승

전단 학습: 튜 토리 얼 & 개발 모듈 화 / 규범화 / 공정 화 / 최적화 & 도구 / 디 버 깅 & 주목 할 만 한 블 로그 / Git & 면접 - 전단 자원 집합
issues 도끼 정: 원형 & 원형 체인 & 원형 계승
JavaScript - 원형 & 원형 체인 & 원형 계승
JavaScript 의 원형 은 중요 한 지식 점 으로 많은 확장 응용 은 원형 에서 출발 합 니 다.원형 을 말 하려 면 함수 생 성 과정 을 간단하게 말 합 니 다.지난 글 은 폐쇄 적 인 실현 류 와 계승 에서 원형 계승 을 사 용 했 는데 오늘 은 원형 계승 에 대해 이야기 하 겠 습 니 다.더 많은 계승 은 뒤의 글 에서 갱신 된다.
함수 생 성 과정

function Xzavier() {};

1. 대상 (constructor 속성 및 [Prototype] 속성 이 있 음) 을 만 듭 니 다. 그 중에서 [Prototype] 속성 은 접근 할 수 없고 셀 수 없습니다.2. 함수 (name, prototype 속성 이 있 음) 를 만 들 고 prototype 속성 을 통 해 1 단계 로 만 든 대상 을 참조 합 니 다.3. 변수 Xzavier 를 만 들 고 함수 의 인용 값 을 변수 Xzavier 에 부여 합 니 다.
구조 함수
구조 함 수 는 새로운 대상 을 새로 만 들 고 초기 화 하 는 함수 이기 때문에 모든 함수 가 구조 함수 일 수 있 습 니 다.다만 우 리 는 코드 를 쓸 때 일반적으로 이니셜 을 대문자 로 구분 해서 사용한다.
원형
모든 함수 가 생 성 될 때 js 는 자동 으로 prototype 속성 을 추가 합 니 다. 이것 이 바로 함수 의 원형 입 니 다. 원형 은 함수 의 속성 이 고 포인터 와 유사 합 니 다.프로 토 타 입 은 함수 생 성 과정 에서 js 컴 파일 러 가 자동 으로 추 가 됩 니 다.

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}
// A    
Xzavier.age = 23;
// A         
Xzavier.prototype.sports = function() {console.log('basketball')}
Xzavier.prototype = {
    hobbit1: function() {console.log('basketball');},
    hobbit2: function() {console.log('running');}
}; 

원형 체인
자 바스 크 립 트 에 서 는 대상 마다 [Prototype] 속성 이 있 으 며, 저 장 된 주 소 는 대상 을 구성 합 니 다.[[Prototype] 속성 은 js 컴 파일 러 가 대상 이 생 성 될 때 자동 으로 추 가 됩 니 다. 그 수 치 는 new 연산 자의 오른쪽 매개 변수 에 의 해 결 정 됩 니 다.글자 의 양 을 재 는 방식 은 new Obejct(); 으로 바 꿀 수 있다.

var x = new Xzavier();
vae o = {};  //var o = new Obejct();

대상 의 [Prototype] 을 통 해 다른 대상 에 대한 인용 을 저장 하고 이 인용 을 통 해 속성 을 찾 습 니 다. 이것 이 바로 입 니 다.
대상 은 특정한 속성 을 찾 을 때 자신의 속성 을 먼저 옮 겨 다 니 며 없 으 면 계속 찾 습 니 다 [[Prototype]] 인용 대상 이 없 으 면 계속 찾 습 니 다 [[Prototype]].[[Prototype]] 인용 대상 을 차례대로 유추 합 니 다 [[Prototype]].….[[Prototype]] 가 undefined 일 때 까지.

var str = new String('xzavier');
str

Object.prototype 의 [[Prototype]] 는 바로 undefined 이다.

function Xzavier() {
    this.name = 'xzavier';
}
var x = new Xzavier();
x.age = 23;

console.log(x.job);  //   x job   undefined

1. x 대상 자 체 를 옮 겨 다 니 며 결과 x 대상 자 체 는 job 속성 2 가 없고 x 의 [Prototype] 을 찾 았 습 니 다. 즉, 해당 하 는 대상 Xzavier. prototype 을 찾 아 옮 겨 다 니 는 것 입 니 다.Xzavier. prototype 도 job 속성 이 없습니다. 3. Xzavier. prototype 대상 을 찾 은 [Prototype] 은 해당 대상 Object. prototype 을 가리 키 고 있 습 니 다.Object. prototype 도 job 속성 이 없습니다. 4. Object. prototype 의 [[Prototype] 속성 을 찾 아 undefined 로 돌아 갑 니 다.
함수 의 변수 와 내부 함수
함수 의 원형 체인 을 말 했 습 니 다. 여기 서 말 해 야 할 변수 와 내부 함수 입 니 다.
개인 변수 와 내부 함수
개인 구성원, 즉 함수 내부 의 변수 나 함 수 를 정의 합 니 다. 외부 에 접근 할 수 없습니다.

function Xzavier(){
    var name = "xzavier"; //    
    var sports = function() {console.log('basketball')}; //     
}
var x = new Xzavier();
x.name;  //undefined

방문 하려 면 대외 적 으로 인 터 페 이 스 를 제공 해 야 한다.

function Xzavier(){
    var name = "xzavier"; //    
    var sports = function() {console.log('basketball')}; //    
    return{
        name: name,
        sports: sports
    }
}
var x = new Xzavier();
x.name;  //"xzavier"

정적 변수 와 내부 함수
점 연산 자 로 정 의 된 정적 변수 와 내부 함 수 는 인 스 턴 스 가 접근 할 수 없 는 변수 와 내부 함수 입 니 다.자신 을 통 해서 만 방문 할 수 있다.

function Xzavier(){
    Xzavier.name = "xzavier"; //    
    Xzavier.sports = function() {console.log('basketball')}; //     
}
Xzavier.name; //"xzavier"
var x = new Xzavier();
x.name;  //undefined

인 스 턴 스 변수 와 내부 함수
this 를 통 해 인 스 턴 스 에 사용 할 속성 과 방법 을 정의 합 니 다.

function Xzavier(){
    this.name = "xzavier"; //    
    this.sports = function() {console.log('basketball');}; //     
}
Xzavier.name; //undefined
var x = new Xzavier();
x.name;  //"xzavier"

원형 체인 계승
원형 체인 이 있 으 면 원형 체인 을 통 해 계승 을 실현 할 수 있다.

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}

function X() {};

X 의 원형 X. prototype 원형 자체 가 Object 대상 입 니 다.F12 콘 솔 입력 함 수 를 열 고 인쇄 X.prototype:

Object {
    constructor: X()
    __proto__: Object
}

prototype 자 체 는 Object 대상 의 인 스 턴 스 이기 때문에 원형 체인 은 Object 의 원형 을 가리킨다.
X.prototype = Xzavier.prototype

X.prototype = Xzavier.prototype;

이렇게 하면 X 의 prototype 을 Xzavier 의 prototype 에 가리 키 는 것 과 같다.이 는 Xzavier 의 prototype 방법 만 계승 하고 Xzavier 의 사용자 정의 방법 은 계승 하지 않 습 니 다.

X.prototype.love = "dog";

이렇게 하면 Xzavier 의 prototype 도 바 뀌 기 때문에 기초 가 좋 지 않다.
X.prototype = new Xzavier()

X.prototype = new Xzavier();

이렇게 하면 Xzavier 의 인 스 턴 스 를 만 들 고 X 의 원형, 즉 X. prototype 은 대상 에 해당 합 니 다.

{
    name: "xzavier", 
    sex: "boy", 
    job: "jser",
    [[Prototype]] : Xzavier.prototype
}

이렇게 하면 Xzavier 의 원형 을 X. prototype. [Prototype] 라 는 대상 속성 을 통 해 저장 하여 원형 링크 를 구성 합 니 다.그러나 이렇게 X 가 발생 하 는 대상 의 구조 함수 가 바 뀌 었 습 니 다. X 에 constructor 속성 이 없 기 때문에 원형 체인 에서 Xzavier. prototype 을 찾 아 constructor: Xzavier 를 읽 을 수 밖 에 없습니다.

var x = new X;
console.log(x.constructor);

  ：
Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}

수 동 수정:

X.prototype.constructor = X;

이것 은 X 의 원형 에 속성 constructor 가 추가 되 어 X 를 가리 키 고 있 습 니 다.이렇게 하면 OK.

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}

function X(){}
X.prototype = new Xzavier();
var x = new X()
x.name  // "xzavier"

[[Prototype]]，__proto__，prototype
우리 가 자주 만 나 는 것 에 대해 [[Prototype]]，__proto__，prototype:
콘 솔 에서 인쇄 var str = new String('xzavier') 를 하고 속성 을 볼 때 __proto__ 만 볼 수 있 기 때문에 __proto__ 역할 을 합 니 다. __proto__ 는 대상 의 내 장 된 속성 으로 대상 마다 있 는 속성 입 니 다. 그러나 이 속성 은 표준 에 맞지 않 기 때문에 직접 사용 하 는 것 을 권장 하지 않 습 니 다.그러나 우리 의 원형 체인 은 __proto__ 에 기초 한 것 이다.구조 함 수 를 통 해 얻 은 실례 적 인 __proto__ 속성 은 그 에 대응 하 는 원형 대상 String.prototype 을 가리킨다. 이것 은 글 에서 우리 가 인쇄 한 var str = new String('xzavier') 에서 본 것 과 같다.[[Prototype]] 은 숨겨 진 속성 으로 이 대상 의 원형 을 가리킨다.거의 모든 대상 에 게 하나의 [[prototype]] 속성 이 있다.
한편, prototype 은 모든 함수 대상 이 가지 고 있 는 속성 으로 원형 대상 을 가리킨다. 만약 에 원형 대상 이 속성 과 방법 을 추가 하면 해당 하 는 구조 함수 가 만 든 인 스 턴 스 는 prototype 상의 속성 과 방법 을 계승 할 것 이다. 이것 도 우리 가 코드 에서 자주 만 나 는 것 이다.구조 함수 가 인 스 턴 스 를 만 들 때 인 스 턴 스 는 원형 대상 에 대응 하 는 constructor 를 통 해 해당 하 는 구조 함수 대상 에 접근 합 니 다.그래서 우리 가 계승 한 사례 는 흔히 constructor 가 없고 원형 체인 을 통 해 찾 으 면 우 리 는 착각 을 하 게 되 고 본 시리즈 의 원형 체인 글 을 참조 할 수 있다.
hasOwnProperty
hasOwnProperty 는 Object. prototype 의 한 방법 으로 대상 이 원형 체인 의 속성 이 아 닌 사용자 정의 속성 을 포함 하 는 지 판단 합 니 다.hasOwnProperty 는 JavaScript 에서 유일한 처리 속성 이지 만 원형 체인 을 찾 지 않 는 함수 입 니 다.

function Xzavier() {
    this.name = 'xzavier';
    this.sex = 'boy';
    this.job = "jser";
}
// A         
Xzavier.prototype.sports = function() {console.log('basketball');};

var x = new Xzavier();
x.name; // 'xzavier'
'sex' in x; // true

x.hasOwnProperty('job'); // true
x.hasOwnProperty('sports'); // false

대상 에 있 는 속성 이 존재 하 는 지 확인 할 때 hasOwnProperty 는 매우 추천 하 는 방법 입 니 다.
상속 은 js 에서 자주 사용 된다.ES6 도 개발 자가 사용 할 수 있 도록 전문 적 인 CLASS 문법 사탕 을 설계 했다.더 많은 계승 방법 이 새로운 글 에서 업데이트 되 었 습 니 다.
모처럼 주말 운동 O (∩ ∩) O ~ 농구, 운동, 코드, 농구, 생활.오랫동안 어깨 를 움 직 이지 않 으 니 정말 아프다.프로그래머 들 이 모두 건강 하 기 를 바 랍 니 다!!