자바 스 크 립 트 구조 함수,인 스 턴 스,원형 대상 및 원형 체인

개술
ES6,전 칭 ECMAScript 6.0,2015.06 발.ES6 이전에 대상 은 클래스 를 기반 으로 만 든 것 이 아니 라 구조 함수 라 는 특수 함수 로 대상 과 그들의 특징 을 정의 했다.
2 구조 함수
구조 함 수 는 특수 한 함수 로 대상 을 초기 화 하 는 데 사 용 됩 니 다.즉,대상 구성원 변수 에 초기 값 을 부여 하고 항상 new 와 함께 사용 합 니 다.우 리 는 대상 중의 일부 공공 속성 과 방법 을 추출 한 후에 이 함수 에 밀봉 할 수 있다.

 //           
  function Person(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function() {
      console.log('    ');
    }
  }
  var ldh = new Person('   ', 18);
  var zxy = new Person('   ', 19);
  console.log(ldh);
  ldh.sing();
  zxy.sing();

JS 에서 구조 함 수 를 사용 할 때 다음 과 같은 두 가 지 를 주의해 야 한다.
구조 함 수 는 특정한 대상 을 만 드 는 데 사용 되 는데 그 이니셜 은 대문자 구조 함수 가 new 와 함께 사용 해 야 의미 가 있다.
(1)구조 함수 실행 과정
new 는 실행 할 때 네 가지 일 을 합 니 다.
① 메모리 에 새 빈 대상 을 만 듭 니 다.
② this 로 하여 금 이 새로운 대상 을 가리 키 게 한다.
③ 구조 함수 에 있 는 코드 를 실행 하여 이 새로운 대상 에 게 속성 과 방법 을 추가 합 니 다.
④ 이 새로운 대상 을 되 돌려 줍 니 다(따라서 구조 함수 에 return 이 필요 없습니다).
(2)구조 함수 의 구성원
JavaScript 의 구조 함수 에 일부 구성원 을 추가 할 수 있 고 구조 함수 자체 에 추가 할 수도 있 으 며 구조 함수 내부 의 this 에 추가 할 수도 있 습 니 다.이 두 가지 방식 으로 추 가 된 구성원 을 정적 구성원 과 인 스 턴 스 구성원 이 라 고 합 니 다.

정적 구성원:구조 함수 본 에 추 가 된 구성원 을 정적 구성원 이 라 고 부 르 고 구조 함수 자체 에서 만

을 방문 할 수 있 습 니 다.

//                   sex       
//                
Person.sex = ' ';
 console.log(Person.sex);

인 스 턴 스 구성원:구조 함수 내부 에서 만 든 대상 구성원 을 인 스 턴 스 구성원 이 라 고 부 르 고 사례 화 된 대상 에서 만

을 방문 할 수 있 습 니 다.

function Person(uname) {
      this.uname = uname;
      }

3 구조 함수 원형 prototype
구조 함수 가 원형 을 통 해 분 배 된 함 수 는 모든 대상 이 공유 하 는 것 이다.
JavaScript 는 모든 구조 함수 에 하나의 prototype 속성 이 있 고 다른 대상 을 가리 키 도록 규정 하고 있 습 니 다.이 prototype 은 하나의 대상 입 니 다.이 대상 의 모든 속성 과 방법 은 구조 함수 에 의 해 가지 게 됩 니 다.
우 리 는 모든 대상 의 인 스 턴 스 를 공유 할 수 있 도록 변 하지 않 는 방법 을 prototype 대상 에 직접 정의 할 수 있 습 니 다.

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
    // this.sing = function() {
    //   console.log('    ');
    // }
  }
  //      ,                ,                
  Person.prototype.sing = function() {
    console.log('    ');
  }
  var ldh = new Person('   ', 18);
  var zxy = new Person('   ', 19);
  console.log(ldh.sing === zxy.sing); //true
  ldh.sing();
  zxy.sing();

원형 은 무엇 입 니까?

개의 대상 을 우 리 는 prototype 을 원형 대상 이 라 고도 부른다.

원형 의 역할 은 무엇 입 니까?

공유 방법.

4 개체 원형 __proto__ 대상 은 모두 하나의 속성 __proto__ 이 구조 함 수 를 가리 키 는 prototype 원형 대상 이 있 을 것 이다.우리 대상 이 구조 함수 prototype 원형 대상 의 속성 과 방법 을 사용 할 수 있 는 이 유 는 대상 이 __proto__ 원형 이 존재 하기 때문이다.

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  Person.prototype.sing = function() {
    console.log('    ');
  }
  var mingo = new Person('  ', 18);
  var zxy = new Person('   ', 19);
  mingo.sing();
  console.log(mingo); //              __proto__               prototype
  console.log(mingo.__proto__ === Person.prototype); //true

__proto__ 대상 원형 과 원형 대상 prototype 은 등가 의

이다.

(그림 화살표 가 가리 키 는 바 와 같이 mingo 는 Person 구조 함수 가 만 든 대상 인 스 턴 스 입 니 다.이 대상 인 스 턴 스 의 원형(__proto__)은 Person 구조 함수 의 원형 대상 prototype 입 니 다.)

__proto__ 대상 의 원형 적 의 미 는 대상 의 검색 체제 에 방향 을 제공 하거나 하나의 노선 을 제공 하 는 데 있다.그러나 이것 은 비 표준 속성 이기 때문에 실제 개발 에서 이 속성 을 사용 할 수 없다.이것 은 내부 지향 원형 대상 prototype

5constructor 구조 함수
대상 원형 __proto__ 과 구조 함수 prototype 원형 대상(사실은 같은 것 을 가리 키 는 것)안에 속성 constructor 속성 이 있 습 니 다.constructor 는 구조 함수 라 고 부 릅 니 다.구조 함수 자 체 를 가리 키 기 때 문 입 니 다.

constructor 는 이 대상 이 어떤 구조 함수 에 인용 되 었 는 지 기록 하 는 데 사 용 됩 니 다.원형 대상 이 원래 의 구조 함 수 를 다시 가리 킬 수 있 습 니 다.
일반적인 상황 에서 대상 의 방법 은 구조 함수 의 원형 대상 에 설정 된다.만약 에 여러 대상 의 방법 이 있다 면 우 리 는 원형 대상 에 게 대상 형식 으로 값 을 부여 할 수 있 습 니 다.그러나 이렇게 하면 구조 함수 원형 대상 의 원래 내용 을 덮어 씁 니 다.이렇게 수 정 된 원형 대상 constructor 는 현재 구조 함 수 를 가리 키 지 않 습 니 다.
이 때,우 리 는 수 정 된 원형 대상 에 constructor 가 원래 의 구조 함 수 를 가리 키 는 것 을 추가 할 수 있 습 니 다.

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  //      ,         constructor               
  Person.prototype = {
    //               ,             ,        constructor         
    constructor: Person,
    sing: function() {
      console.log('    ');
    },
    movie: function() {
      console.log('     ');
    }
  }
  var mingo = new Person('  ', 18);
  var zxy = new Person('   ', 19);
  console.log(Person.prototype);
  console.log(mingo.__proto__);
  console.log(Person.prototype.constructor);
  console.log(mingo.__proto__.constructor);

6 원형 체인
모든 구조 함수 에는 원형 대상 이 있 고 원형 대상 은 구조 함 수 를 가리 키 는 지침 을 포함 하 며 인 스 턴 스 는 원형 대상 을 가리 키 는 내부 지침 을 포함한다.만약 우리 가 원형 대상 을 다른 유형의 실례 와 같 게 한다 면 결 과 는 어떻게 될 까?분명 한 것 은 이때 의 원형 대상 은 다른 원형 을 가리 키 는 지침 을 포함 하고 이에 따라 다른 원형 에 도 다른 구조 함 수 를 가리 키 는 지침 이 포함 되 어 있다.만약 다른 원형 이 또 다른 유형의 실례 라면 상술 한 관 계 는 여전히 성립 된다.이렇게 층 층 이 들 어가 면 실례 와 원형의 체인 을 구성한다.이것 이 바로 원형 체인 의 기본 개념 이다.《자 바스 크 립 트 고급 프로 그래 밍》에서 발췌 하 다.

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  Person.prototype.sing = function() {
    console.log('    ');
  }
  var mingo = new Person('  ', 18);
  // 1.        __proto__   ,       
  console.log(Person.prototype);
  console.log(Person.prototype.__proto__ === Object.prototype);//true
  // 2.  Person       __proto__       Object.prototype
  console.log(Object.prototype.__proto__);
  // 3.   Object.prototype       __proto__       null
  console.log(Object);

Object 는 JavaScript 에서 가장 높 은 대상 입 니 다.다른 모든 대상 은 그것 을 기반 으로 합 니 다.당신 이 만 든 함 수 를 포함 합 니 다.

7JavaScript 의 구성원 찾기 메커니즘(원형 체인 규칙 기반)
① 한 대상 의 속성(방법 포함)에 접근 할 때 먼저 이 대상 자체 에 이 속성 이 있 는 지 찾 습 니 다.
② 없 으 면 원형 을 찾 아 라(즉 __proto__ 이 가리 키 는 prototype 원형 대상).
③ 아직 없 으 면 원형 대상 의 원형(Object 의 원형 대상)을 찾 습 니 다.
④ 이러한 유추 에 따라 Object 를 찾 을 때 까지(null).
⑤ __proto__ 대상 의 원형 의 미 는 대상 구성원 의 검색 체제 에 방향 을 제공 하거나 노선 을 말 하 는 데 있다.
8 원형 대상 this 지향
1 구조 함수 중의 this 는 우리 의 실례 대상 을 가리킨다
2.원형 대상 에 넣 는 것 은 방법 입 니 다.이 방법 에서 this 는 이 방법의 호출 자 를 가리 키 고 있 습 니 다.즉,이 인 스 턴 스 대상 입 니 다.

 function Person(uname, age) {
    this.uname = uname;
    this.age = age;
  }
  var that;
  Person.prototype.sing = function() {
    console.log('    ');
    that = this;
    console.log(this);
    
  }
  var mingo = new Person('  ', 18);
  // 1.       ,  this         mingo
  // 2.         this            mingo
  mingo.sing();
  console.log(that === mingo); //true

총결산
자 바스 크 립 트 구조 함수,인 스 턴 스,원형 대상 및 원형 체인 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.자 바스 크 립 트 구조 함수,인 스 턴 스,원형 대상 및 원형 체인 내용 에 대해 서 는 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!