자 바스 크 립 트 의 원형 대상 을 철저히 이해 하도록 하 겠 습 니 다.
원형 은 자 바스 크 립 트 의 계승 기초 이 고 자 바스 크 립 트 의 계승 은 원형 을 바탕 으로 하 는 계승 이다.
1.1 함수 의 원형 대상
JavaScript 에서 우 리 는 함수 A(하나의 함 수 를 설명 하 는 것)를 만 듭 니 다.그러면 브 라 우 저 는 메모리 에 대상 B 를 만 듭 니 다.그리고 모든 함수 가 기본적으로 하나의 속성 prototype 이 이 대상 을 가리 키 고 있 습 니 다(즉,prototype 의 속성 값 은 이 쌍 입 니 다).이 대상 B 는 함수 A 의 원형 대상 으로 함수 의 원형 이 라 고 약칭 한다.이 프로 토 타 입 대상 B 는 기본적으로 하나의 속성 constructor 가 이 함수 A 를 가리 키 고 있 습 니 다.
다음 코드 보기:
<body>
<script type="text/javascript">
/*
， prototype 。
， ，prototype 。
constructor
： ：constructor。 Object ， 。
*/
function Person () {
}
</script>
</body>
1.2 구조 함수 로 대상 만 들 기
하나의 함 수 를 구조 함수(이론 적 으로 모든 함수 가 구조 함수 로 사용 할 수 있 음)로 new 생 성 대상 을 사용 할 때 이 대상 은 기본 적 인 보이 지 않 는 속성 이 존재 하여 구조 함수 의 원형 대상 을 가리킨다.이 보이 지 않 는 속성 은 일반적으로[prototype]으로 표시 합 니 다.다만 이 속성 은 직접 접근 할 수 없습니다.
다음 코드 보기:
<body>
<script type="text/javascript">
function Person () {
}
/*
， [[prototype]],
。
*/
var p1 = new Person();
</script>
</body>
설명:
1.위의 그림 에서 보 듯 이 p1 대상 을 만 드 는 것 은 Person 구조 함 수 를 사용 하지만 대상 이 만들어 진 후에 이 p1 대상 은 Person 구조 함수 와 아무런 관계 가 없습니다.p1 대상 의[prototype]속성 은 Person 구조 함수 의 원형 대상 을 가리 키 고 있 습 니 다.
2.new Person()을 사용 하여 여러 대상 을 만 들 면 여러 대상 이 Person 구조 함수 의 원형 대상 을 동시에 가리킨다.
3.우 리 는 이 원형 대상 에 속성 과 방법 을 수 동 으로 추가 할 수 있 습 니 다.그러면 p1,p2,p3...이 대상 들 은 원형 에 추 가 된 속성 과 방법 을 공유 합 니 다.
4.p1 의 속성 name 에 접근 하면 p1 대상 에서 찾 으 면 바로 돌아 갑 니 다.p1 대상 에서 찾 지 못 하면 p1 대상 의[prototype]속성 이 가리 키 는 원형 대상 에서 찾 고 찾 으 면 되 돌려 줍 니 다.(원형 에서 도 찾 지 못 하면 원형 인 원형 체인 을 계속 위로 찾 아 라.뒷말 을 하 다.
5.p1 대상 을 통 해 속성 name 을 추가 하면 p1 대상 에 게 원형 속성 name 을 차단 합 니 다.다시 말 하면 p1 에서 원형의 속성 name 에 접근 할 수 없습니다.
6.p1 대상 을 통 해 원형 에 있 는 속성 name 의 값 만 읽 을 수 있 고 원형 에 있 는 속성 name 의 값 을 수정 할 수 없습니다.p1.name="이사";원형 에 있 는 값 을 수정 한 것 이 아니 라 p1 대상 에 속성 name 을 추가 하 였 습 니 다.
다음 코드 보기:
<body>
<script type="text/javascript">
function Person () {
}
// Person.prototype
// Person name " "
Person.prototype.name = " ";
Person.prototype.age = 20;
var p1 = new Person();
/*
p1 name， p1 name，
p1 [[prototype]] name ， name
。
： p1 name ， p1 。
*/
alert(p1.name); //
var p2 = new Person();
alert(p2.name); // ， 。
alert(p1.name === p2.name); // true
// ， p1 name， p1
// 。
p1.name = " ";
alert("p1：" + p1.name);
// p2 name ， p2 。
alert("p2:" + p2.name); //
</script>
</body>
2.원형 과 관련 된 몇 가지 속성 과 방법
2.1 프로 토 타 입 속성
prototype 은 구조 함수 에 존재 합 니 다.
앞의 설명도 참조.
2.2 생 성자 속성
constructor 속성 은 원형 대상 에 존재 합 니 다.그 는 구조 함 수 를 가 리 켰 습 니 다.
다음 코드 보기:
<script type="text/javascript">
function Person () {
}
alert(Person.prototype.constructor === Person); // true
var p1 = new Person();
// instanceof 。
//typeof 。 instanceof， typeof object。
alert(p1 instanceof Person); // true
</script>
하지만 이 럴 때 문제 가 있 습 니 다.새로운 대상 의 constructor 속성 은 Person 구조 함 수 를 가리 키 지 않 습 니 다.
다음 코드 보기:
<script type="text/javascript">
function Person () {
}
// Person 。 constructor Person
Person.prototype = {
name:" ",
age:20
};
var p1 = new Person();
alert(p1.name); //
alert(p1 instanceof Person); // true
alert(Person.prototype.constructor === Person); //false
// constructor ， Person.prototype ：
/*
Person.prototype = {
constructor : Person // constructor Person
}
*/
</script>
구조 방법 으로 새로운 대상 을 만 든 후,이 대상 에는 기본적으로 접근 할 수 없 는 속성[prototype]이 있 습 니 다.이 속성 은 구조 방법의 원형 대상 을 가리 키 고 있 습 니 다.
그러나 개별 브 라 우 저 에서 도 이 속성[prototype]에 대한 접근(chrome 브 라 우 저 와 불 여우 브 라 우 저 를 제공 합 니 다.ie 브 라 우 저 는 지원 되 지 않 습 니 다).접근 방식:p1.proto__
그러나 개발 자 는 이런 방식 으로 접근 하지 않 으 려 고 합 니 다.조작 이 부주의 하면 이 대상 의 계승 원형 체인 을 바 꿀 수 있 기 때 문 입 니 다.
<script type="text/javascript">
function Person () {
}
// Person 。 constructor Person
Person.prototype = {
constructor : Person,
name:" ",
age:20
};
var p1 = new Person();
alert(p1.__proto__ === Person.prototype); //true
</script>
우리 가 한 대상 의 속성 을 방문 할 때 이 속성 은 대상 자체 에서 나 올 수도 있 고 이 대상 의[prototype]속성 이 가리 키 는 원형 에서 나 올 수도 있다 는 것 을 잘 알 고 있 습 니 다.
그렇다면 이 대상 의 출처 를 어떻게 판단 할 것 인가?
hasOwnProperty 방법 은 하나의 속성 이 대상 자체 에서 왔 는 지 판단 할 수 있 습 니 다.
<script type="text/javascript">
function Person () {
}
Person.prototype.name = " ";
var p1 = new Person();
p1.sex = " ";
//sex p1 ， true
alert("sex ：" + p1.hasOwnProperty("sex"));
// name ， false
alert("name ：" + p1.hasOwnProperty("name"));
// age ， false
alert("age ：" + p1.hasOwnProperty("age"));
</script>
즉,원형 에 있 는 속성 과 존재 하지 않 는 속성 은 모두 fasle 로 돌아 간 다 는 것 이다.
어떻게 하나의 속성 이 원형 에 존재 하 는 지 판단 합 니까?
2.5 in 연산 자
in 연산 자 는 속성 이 이 대상 에 존재 하 는 지 여 부 를 판단 하 는 데 사 용 됩 니 다.그러나 이 속성 을 찾 을 때 현재 대상 자체 에서 찾 습 니 다.대상 이 찾 지 못 하면 원형 에서 찾 습 니 다.대상 과 원형 중 한 곳 에 이 속성 이 존재 하면 트 루 로 돌아 가 는 것 이다.
<script type="text/javascript">
function Person () {
}
Person.prototype.name = " ";
var p1 = new Person();
p1.sex = " ";
alert("sex" in p1); // ， true
alert("name" in p1); // ， true
alert("age" in p1); // ， false
</script>
만약 하나의 속성 이 존재 하지만 대상 자체 에 존재 하지 않 는 다 면 반드시 원형 에 존재 할 것 이다.
<script type="text/javascript">
function Person () {
}
Person.prototype.name = " ";
var p1 = new Person();
p1.sex = " ";
//
function propertyLocation(obj, prop){
if(!(prop in obj)){
alert(prop + " ");
}else if(obj.hasOwnProperty(prop)){
alert(prop + " ");
}else {
alert(prop + " ");
}
}
propertyLocation(p1, "age");
propertyLocation(p1, "name");
propertyLocation(p1, "sex");
</script
3.1 원형 모델 생 성 대상 의 결함
원형 중의 모든 속성 은 공 유 됩 니 다.즉,같은 구조 함수 로 만 든 대상 으로 프로 토 타 입 의 속성 을 방문 할 때 모두 가 같은 대상 을 방문 하고 한 대상 이 프로 토 타 입 의 속성 을 수정 하면 모든 대상 에 반영 된다.
그러나 실제 사용 에 서 는 대상 마다 속성 이 다르다.장삼 의 성명 은 장삼 이 고 이사 의 성명 은 이사 이다.
**그러나 이 공유 특성 은 방법(속성 값 은 함수 의 속성)에 매우 적합 합 니 다.**모든 대상 공유 방법 이 최상의 상태 다.이러한 특성 은 c\#와 자바 에 타고 난 것 이다.
3.2 구조 함수 모델 생 성 대상 의 결함
구조 함수 에 추 가 된 속성 과 방법 은 대상 마다 자신 만 의 것 이 있 기 때문에 공유 하지 않 습 니 다.이 특성 은 속성 에 비교적 적합 하지만 방법 에 도 그다지 적합 하지 않다.모든 대상 에 게 그들의 방법 은 한 몫 이면 충분 할 것 이기 때문에 모든 사람 이 한 몫 씩 메모리 의 낭비 와 성능 의 저 하 를 초래 할 필요 가 없다.
<script type="text/javascript">
function Person() {
this.name = " ";
this.age = 20;
this.eat = function() {
alert(" ");
}
}
var p1 = new Person();
var p2 = new Person();
//
alert(p1.eat === p2.eat); //fasle
</script>
<script type="text/javascript">
function Person() {
this.name = " ";
this.age = 20;
this.eat = eat;
}
function eat() {
alert(" ");
}
var p1 = new Person();
var p2 = new Person();
// eat ， true
alert(p1.eat === p2.eat); //true
</script>
3.3 조합 모델 로 상기 두 가지 결함 을 해결한다.
원형 모델 은 포장 방법 에 적합 하고 구조 함수 모델 은 포장 속성 에 적합 하 며 두 가지 모델 의 장점 을 종합 하면 조합 모델 이 있다.
<script type="text/javascript">
//
function Person(name, age) {
this.name = name;
this.age = age;
}
//
Person.prototype.eat = function (food) {
alert(this.name + " " + food);
}
Person.prototype.play = function (playName) {
alert(this.name + " " + playName);
}
var p1 = new Person(" ", 20);
var p2 = new Person(" ", 30);
p1.eat(" ");
p2.eat(" ");
p1.play(" ");
p2.play(" ");
</script>
앞에서 말 한 조합 모델 도 완벽 하지 않 고 완벽 하지 않다.구조 방법 과 원형 을 나 누 어 쓰 면 불편 하고 구조 방법 과 원형 을 함께 포장 해 야 하기 때문에 동적 원형 모델 이 생 겼 다.
동적 원형 모델 은 모든 속성 과 방법 을 구조 방법 에 밀봉 하고 필요 할 때 만 구조 방법 에서 원형 을 초기 화하 고 구조 함수 와 원형 을 동시에 사용 하 는 장점 을 유지 했다.
다음 코드 보기:
<script type="text/javascript">
//
function Person(name, age) {
//
this.name = name;
this.age = age;
/*
this.eat function， function ，
funcion 。
function， ， 。
perfect！ 。
*/
if(typeof this.eat !== "function"){
Person.prototype.eat = function () {
alert(this.name + " ");
}
}
}
var p1 = new Person(" ", 40);
p1.eat();
</script>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
