JavaScript 원형 대상,구조 함수 와 인 스 턴 스 대상 기능 및 용법 상세 설명

본 고의 실례 는 자 바스 크 립 트 원형 대상,구조 함수 와 실례 대상 의 기능 과 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
모두 가 알다 시 피 자 바스 크 립 트 에는 사실 클래스 의 개념 이 없다.그러나 구조 함수 와 원형 대상 으로 클래스 의 실현 을 모 의 할 수 있다.여기 서 먼저 류 라 는 단 어 를 엄밀 하 게 사용 하여 설명 하기 편리 하 다.
다음은 자바 script 의 구조 함수,원형 대상 및 인 스 턴 스 대상 에 대한 필 기 를 정리 하 였 으 며,잘못된 부분 이 있 으 면 지적 해 주 십시오.
먼저 한 장의 그림 으로 이 몇 사람의 관 계 를 간단하게 요약 한 다음 에 세분 화 한다.

구조 함수 와 인 스 턴 스 대상
구조 함 수 는 클래스 의 외재 적 표현 으로 구조 함수 의 이름 은 보통 클래스 이름 으로 쓰 인 다.
사실 구조 함수 즉 하나의 함수 입 니 다.다만 일반적인 함수 와 는 조금 다 릅 니 다.

표시 되 지 않 은 생 성 대상;

은 속성 과 방법 을 this 에 직접 부여 합 니 다.

에 return 문구 가 없습니다.

구조 함 수 는 새로운 대상 을 구성 하 는 데 쓰 인 다.이전 노트 에 서 는 new 키워드 로 구조 함 수 를 호출 하여 특정 유형의 새로운 대상 을 만 들 수 있다 고 언급 한 적 이 있다.예 를 들 어 Object 형식의 대상 인 스 턴 스 를 만 듭 니 다.

var o=new Object();

구조 함수 와 일반 함 수 를 구별 하기 위해 서 는 구조 함수 의 이름 이니셜 대문자,일반 함수 의 이름 이니셜 소문 자 를 규정 합 니 다.물론 필요 한 것 은 아니 지만 좋 은 습관 이다.
구조 함수 로 만 들 고 초기 화 된 속성 은 인 스 턴 스 속성 입 니 다.인 스 턴 스 속성 이란 이 구조 함 수 를 통 해 만 든 모든 대상 이 인 스 턴 스 속성 을 가 진 단독 복사 입 니 다.이 속성 들 은 모두 인 스 턴 스 를 통 해 접근 합 니 다.값 은 모든 인 스 턴 스 가 정의 하 는 것 을 기준 으로 합 니 다.인 스 턴 스 에 정의 되 지 않 으 면 구조 함수 가 초기 화 될 때의 기본 값 입 니 다.예 를 들 어 보 겠 습 니 다.

function Person(name,age){
  this.name=name;
  this.age=age;
  this.friends=["Tom","Boo"];
}
var p1=new Person("Lily",20);
var p2=new Person("Sam",30);
alert(p1.name); //Lily
alert(p2.name); //Sam
p1.friends.push("Susan");
alert(p1.friends); //Tom,Boo,Susan
alert(p2.friends); //Tom,Boo

위의 예 는 Person 구조 함 수 를 정의 하고 name,age,friends 세 가지 속성 을 초기 화 했 습 니 다.이 어 p1 과 p2 로 두 개의 인 스 턴 스 대상 을 만 들 었 다.이 예 를 살 펴 보면 모든 속성 은 각자 가 가 진 것 이 고 서로 영향 을 주지 않 는 다.이것 은 모든 실례 대상 이 속성의 던 전 을 가지 고 있 기 때문이다.
모든 인 스 턴 스 대상 은 구조 함 수 를 가리 키 는 속성 이 있 습 니 다.이 속성 은 constructor 입 니 다.

function Person(name,age){
  this.name=name;
  this.age=age;
}
var p1=new Person("Lily",20);
var p2=new Person("Sam",30);
alert(p1.constructor==Person); //true
alert(p2.constructor==Person); //true

구조 함 수 는 프로 토 타 입 속성 이 있 으 며 원형 대상 을 가리 키 고 있 습 니 다.
원형 대상 과 실례 대상
javascript 에 서 는 대상 마다 이와 관련 된 대상 이 있 습 니 다.그것 이 바로 원형 대상 입 니 다.클래스 의 모든 인 스 턴 스 대상 은 원형 대상 에서 속성 을 계승 합 니 다.
원형 대상 은 클래스 의 유일한 표지 이다.두 대상 이 같은 원형 대상 에서 계승 할 때 만 같은 클래스 에 속 하 는 실례 이다.
앞에서 언급 한 바 와 같이 구조 함 수 는 prototype 속성 을 가지 고 원형 을 가리킨다.다시 말 하면 대상 의 원형 은 구조 함수 의 prototype 속성의 값 입 니 다.함수 가 정의 되 었 을 때 prototype 값 을 자동 으로 만 들 고 초기 화 합 니 다.대상 입 니 다.이때 이 대상 은 하나의 속성 만 있 습 니 다.그것 은 바로 constructor 입 니 다.원형 과 연 결 된 구조 함 수 를 말 합 니 다.예 를 들 어:

function Person(name,age){
  this.name=name;
  this.age=age;
}
alert(Person.prototype); //[object Object]
alert(Person.prototype.constructor==Person); //true

원형 을 통 해 속성 과 방법 을 만 들 수도 있 습 니 다.프로 토 타 입 을 통 해 만 든 속성 과 방법 은 모든 인 스 턴 스 에 의 해 공 유 됩 니 다.즉,하나의 인 스 턴 스 에서 이 속성 이나 방법의 값 을 수정 하면 모든 인 스 턴 스 의 속성 이나 방법 값 이 영향 을 받 습 니 다.

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.friends=["Tom","Sam"];
var p1=new Person("Lily",24);
var p2=new Person("Susan",20);
alert(p1.friends); //Tom,Sam
alert(p2.friends); //Tom,Sam
p1.friends.push("Bill");
alert(p1.friends); //Tom,Sam,Bill
alert(p2.friends); //Tom,Sam,Bill

위의 예 를 통 해 알 수 있 듯 이 원형 으로 정 의 된 속성 은 모든 인 스 턴 스 에 의 해 공유 된다.p1 에 친 구 를 추가 하여 p2 에 도 이 친 구 를 추가 하 였 습 니 다.
사실 이런 현상 은 우리 가 보고 싶 은 것 이 아니다.그렇다면 언제 구조 함수 로 속성 과 방법 을 초기 화하 고 언제 원형 대상 에 의 해 정의 해 야 합 니까?
일반적으로 구조 함수 에서 일반 구성원 을 정의 하 는 것 을 권장 합 니 다.즉,그 값 은 모든 인 스 턴 스 에서 다 를 것 입 니 다.특히 대상 이나 배열 형식의 값 입 니 다.프로 토 타 입 대상 에 서 는 모든 인 스 턴 스 가 공유 하 는 속성 을 정의 합 니 다.즉,모든 인 스 턴 스 에서 그 값 은 같은 속성 일 수 있 습 니 다.
구조 함수 로 실례 를 만 들 때 실례 의 내부 에 도 구조 함수 의 원형 대상 을 가리 키 는 지침 이 포함 되 어 있다.일부 브 라 우 저 에 서 는 내부 지침 을 표시 하 는 속성 __proto__ 을 지원 합 니 다.

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.sayName=function(){
  alert(this.name);
}
var p1=new Person("Lily",24);
alert(p1.__proto__.sayName); //function (){alert(this.name);}
alert(p1.__proto__.constructor==Person); //true

ECMAscript 5 에 Object.getPrototypeOf() 방법 이 추가 되 었 습 니 다.앞에서 언급 한 인 스 턴 스 대상 내부 에서 원형 을 가리 키 는 지침 의 값 을 되 돌려 줄 수 있 습 니 다.

function Person(name,age){
 this.name=name;
 this.age=age;
}
var p1=new Person("Lily",24);
alert(Object.getPrototypeOf(p1)==Person.prototype); //true

isPrototypeOf() 방법 은 실례 대상 과 그 원형 간 의 이러한 관 계 를 확정 하 는 데 도 사용 할 수 있다.

function Person(name,age){
  this.name=name;
  this.age=age;
}
var p1=new Person("Lily",24);
alert(Person.prototype.isPrototypeOf(p1)); //true

원형 문법
앞에서 원형 대상 이 인 스 턴 스 대상 과 구조 함수 의 관 계 를 소개 하면 우 리 는 원형 대상 에 속성 과 방법 을 추가 하 는 것 을 이미 알 고 있다.이렇게 정의 하면 Person.prototype=name 이다.
그러면 Person 의 속성 을 정의 할 때마다 Person.prototype 을 한 번 두 드 려 야 합 니까?정 답 은 부정 적 입 니 다.대상 글자 로 대상 을 만 드 는 것 처럼 원형 대상 을 만 들 수도 있 습 니 다.

function Person(){
}
Person.prototype={
  name:"Tom",
  age:29
}
var p1=new Person();
alert(p1.name); //Tom
alert(p1.age); //29

한 가지 주의해 야 할 것 은 이 방법 은 전체 원형 대상 을 다시 쓴 것 과 같 기 때문에 구조 함수 와 의 관 계 를 끊 었 습 니 다.이때 Person.prototype.constructor 은 Person 을 가리 키 지 않 습 니 다.

function Person(){
}
Person.prototype={
  name:"Tom",
  age:29
}
var p1=new Person();
alert(Person.prototype.constructor==Person); //false
alert(Person.prototype.constructor==Object); //true

따라서 Person 을 다시 가리 키 려 면 할당 을 표시 할 수 있 습 니 다.

function Person(){
}
Person.prototype={
 constructor:Person,
 name:"Tom",
 age:29
}
var p1=new Person();
alert(Person.prototype.constructor==Person); //true
alert(Person.prototype.constructor==Object); //false

총결산
마지막 으로 우 리 는 예 를 들 어 구조 함수,원형 대상 과 사례 대상 간 의 관 계 를 정리 합 니 다.

function Person(name,age){
  this.name=name;
  this.age=age;
}
Person.prototype.sayName=function(){
  alert(this.name);
}
var p1=new Person("Tom",20);
alert(Person.prototype); //object
alert(Person.prototype.constructor==Person); //true
alert(p1.constructor==Person); //true
alert(p1.__proto__==Person.prototype); //true
alert(p1.__proto__.__proto__==Object.prototype); //true
alert(p1.__proto__.__proto__.constructor==Object); //true
alert(Person.constructor==Function); //true
alert(Object.prototype.constructor==Object);

위의 그림 은 이 예 에서 원형,구조 함수 와 인 스 턴 스 속성의 관 계 를 설명 한다.
자 바스 크 립 트 와 관련 된 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.