JavaScript (3) (대상 / 원형 / 계승)

패 키 징: 속성 과 방법 을 대상 에 패 키 징 합 니 다.
구조 함수: 함수 에 this 지향 대상 이 있 습 니 다.

function Cat(name,color) {
this.name = name;
this.color = color;
}

구조 함수 에서 인 스 턴 스 생 성:

var cat1 = new Cat("  ","yellow");//this         
var cat2 = new Cat("  ","red");//this         

인 스 턴 스 를 생 성 할 때 모든 인 스 턴 스 에 내부 영역 을 엽 니 다.

cat1.name;//"  "
cat2.color;//"red"

인 스 턴 스 대상 에 constructor 속성 이 있 습 니 다. 기본 지향 구조 함수:

cat1.constructor === Cat;//true
cat2.constructor === Cat;//true

모든 인 스 턴 스 대상 은 하나의 메모리 영역 이 있 습 니 다. 인 스 턴 스 대상 간 에 공 통 된 속성 이 있 을 때 메모리 의 낭 비 를 초래 할 수 있 습 니 다.

function Cat(name,color) {
this.name = name;
this.color = color;
this.type = "cat";
this.eat = function() { console.log("eat"); };
}
var cat1 = new Cat("  ","yellow");//  cat                 ，    
var cat2 = new Cat("  ","red");

해결 방법: prototype: 구조 함수 의 prototype 속성 은 하나의 대상 이 고 이 대상 의 속성 과 방법 은 모두 인 스 턴 스 에 의 해 계승 된다.따라서 속성 치가 같은 속성 이나 방법 을 이 대상 에 게 줄 수 있 으 면 실례 대상 은 계승 하기 때문에 자연히 이러한 속성 과 방법 을 가지 게 된다.

function Cat(name,color) {
this.name = name;
this.color = color;
}
Cat.prototype.type = "cat";
Cat.prototype.eat = function() { console.log("eat"); };
var cat1 = new Cat("  ","yellow");
cat1.type;//"cat"
cat1.eat();//"eat"

이러한 속성 과 방법 은 prototype 대상 에 저 장 됩 니 다. 인 스 턴 스 는 이러한 속성 과 방법 을 계승 할 뿐 새로운 메모 리 를 사용 하지 않 아 도 메모리 공간 을 절약 할 수 있 습 니 다.모든 인 스 턴 스 의 type 속성 과 eat () 방법 은 같은 메모리 주소 로 prototype 대상 을 가리 키 기 때문에 운행 효율 을 높 였 습 니 다.프로 토 타 입 Of 는 프로 토 타 입 대상 과 인 스 턴 스 의 관 계 를 판단 합 니 다.

Cat.isPrototypeOf(cat1);//true

hasOwnProperty(); 어떤 속성 이 계승 속성 이 아니 라 자신의 속성 인지 판단 합 니 다.

cat1.hasOwnProperty("name");//true
cat1.hasOwnProperty("type");//false

in. 어떤 대상 에 게 이 속성 이 있 는 지 판단 합 니 다 (계승 한 것 포함).

"name" in cat1;//true
"type" in cat1;//true

구조 함수 의 계승 (다섯 가지 방법): 법 1: apply 방법

function Animal() {
this.type = "animal";
}
funciton Cat(name,color) {
Animal.apply(this,arguments);// Animal  this    Cat    ， Cat      Animal       
this.name = name;
this.color = color;
}
var cat1 = new Cat("  ","yellow");
cat1.type;//"animal"

법 2: prototype 은 인 스 턴 스 대상 을 가리 키 고 있 습 니 다.

function Animal() {
this.type = "animal";
}
funciton Cat(name,color) {
this.name = name;
this.color = color;
}
Cat.prototype = new Animal();//Cat  prototype               ，             ，Cat.prototype    ，  Cat   cat1  Cat.prototype        ，      Animal      
Cat.prototype.constructor === Animal;//true，   constructor      
Cat.prototype.constructor = Cat;// prototype   constructor       Cat
Cat.prototype.constructor === Cat;//true
var cat1 = new Cat("  ","yellow");
cat1.type;//"animal"
cat1.constructor === Cat;//true;

문제 가 있 습 니 다: 먼저 Animal 인 스 턴 스 를 생 성하 고 일정한 메모리 공간 을 차지 해 야 합 니 다.해결 방법: 법 3: prototype 직접 계승

function Animal() {};
Animal.prototype.type = "animal";
funciton Cat(name,color) {
this.name = name;
this.color = color;
}
Cat.prototype = Animal.prototype;
var cat1 = new Cat("  ","yellow");
cat1.type;//"animal"
Cat.prototype.constructor === Animal;//true   Cat.prototype  Animal.prototype 
cat1.constructor ===Animal;//true    constructor     
Cat.prototype.constructor = Cat;//     constructor           
Cat.prototype.constructor === Cat;//true;
cat1.constructor === Cat;//true;
Animal.prototype.constructor === Cat;//true   Cat constructor  ，Animal constructor     ，  Cat.prototype    Animal.prototype，  Cat.prototype constructor      Animal.prototype constructor  

해결 방법: 법 4: 빈 대상 을 중개 로 한다.

function Animal() {};
Animal.prototype.type = "animal";
function Cat(name,color) {
this.name = name;
this.color = color;
}
var F = function() {};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor === Animal;//true Cat.prototype  F   ，  Cat.prototype       F       ，F           F.prototype     ，  F.prototype  Animal.prototype，  F.prototype       Animal.prototype     ，  Cat.prototype       Animal
Cat.prototype.constructor = Cat;//             ，  Cat.prototype    F     ，      F       ，    F.prototype Animal.prototype     
Cat.prototype.constructor === Cat;//true
Animal.prototype.constructor === Animal;//true
var cat1 = new Cat("  ","yellow");
cat1.type;//"animal"

법 5: 복사 상속 부모 대상 의 모든 속성 과 방법 을 하위 대상 에 복사

function Animal(){}
Animal.prototype.species = "  ";
function extend2(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;
　}
function Cat(name,color) {
this.name = name;
this.color = color;
}
extend2(Cat, Animal);
var cat1 = new Cat("  ","  ");
alert(cat1.species);//"  "

Cat 는 Animal 의 구조 함수 중 속성 과 방법 을 계승 하지 않 고 Animal. prototype 의 속성 과 방법 만 계승 합 니 다.