js 대상 상속 철저히 이해
11285 단어 js대상 을 향 하 다이어받다
나 하 js 에 서명 이 없 기 때문에 계승 만 실현 할 수 있 고 원형 체인 으로 이 루어 진 것 이다.다음은 정식으로 js 에서 그 걸 물 려 받 았 다 는 얘 기 를 해 보도 록 하 겠 습 니 다.
1.원형 체인
원형 체인:계승 을 실현 하 는 주요 방법 은 원형 을 이용 하여 하나의 인용 유형 으로 하여 금 다른 인용 유형의 속성 과 방법 을 계승 하 게 한다.
회고:구조 함수,원형,실례 삼자 의 관계
모든 구조 함수 에는 원형 대상(Person.prototype)이 있 습 니 다.원형 대상 은 구조 함 수 를 가리 키 는 지침(constructor)을 포함 합 니 다.모든 인 스 턴 스 에는 원형 대상 을 가리 키 는 지침 이 포함 되 어 있 습 니 다(보이 지 않 는proto_바늘귀
원형 체인 은 어떻게 생 겼 나 요?
어떤 구조 함수 의 원형 대상 은 다른 구조 함수 의 실례 이다.이 구조 함수 의 원형 대상 은 하나(보이 지 않 는proto_포인터)다른 구조 함수 의 원형 대상 을 가리킨다.
그러면 다른 원형 대상 이 다른 구조 함수 인 스 턴 스 가 어떻게 되 는 지 이렇게 층 층 이 들 어가 원형 체인 을 형성한다.구체 적 으로 한번 볼 게 요.
// ;
function SuperType(){
this.property=true;
}
SuperType.prototype.getSuperValue=function(){
return this.property
}
// ;
function SubType(){
this.subproperty=false
}
// SuperType;SubType SuperType ; SubType ; SuperType
SubType.prototype=new SuperType()
// ( subproperty, property); ( getSubValue, getSuperValue)
SubType.prototype.getSubValue=function(){
return this.subproperty
}
var instance=new SubType() //
console.log(instance.getSuperValue()) //true instance ; ， SubType ; ， SubType ; 1.1 완전한 원형
원형 부분 에서 이미 좀 언급 했 으 니 다시 한 번 말씀 드 리 는 것 이 좋 겠 습 니 다.완전한 원형 은 Object 를 포함한다.
모든 함수 의 기본 원형 은 Object 의 인 스 턴 스 입 니 다.기본 원형 마다proto_포인터 가 Object.prototype 을 가리 키 는 경우;따라서 사용자 정의 형식 은 toString,value Of 와 같은 방법 을 계승 합 니 다.
그리고 Object.prototype 의proto_포인터 가 null 을 가리 키 며 원형 체인 을 끝 냅 니 다.Person 구조 함 수 를 예 로 들 어 완전한 원형 체인 도 를 보 세 요.
1.2 원형 과 실례 의 관계 판단
첫 번 째 인 스 턴 스 of 연산 자 사용:인 스 턴 스 와 프로 토 타 입 체인 에 나타 난 구조 함수,결 과 는 true 입 니 다.
두 번 째 는 isPrototype Of()방법 을 사용 합 니 다.원형 체인 에 나타 난 원형 이 라면 모두 이 원형 체인 이 파생 된 사례 의 원형 이 라 고 할 수 있 습 니 다.
console.log(instance instanceof Object) // true
console.log(instance instanceof SuperType)
console.log(instance instanceof SubType)
console.log(Object.prototype.isPrototypeOf(instance)) // true
console.log(SuperType.prototype.isPrototypeOf(instance))
console.log(SubType.prototype.isPrototypeOf(instance))메모:원형 대상 에 게 방법 을 추가 하려 면 원형 을 교체 하 는 뒤에 두 어야 합 니 다.원형 을 교체 하기 전에 찾 을 수 없 기 때문에 원형 은 다시 쓸 수 있 습 니 다.
메모:원형 체인 을 통 해 계승 할 때 대상 의 글자 크기 로 원형 을 만 드 는 방법 을 사용 할 수 없습니다.원형 체인 도 다시 쓸 수 있 기 때 문 입 니 다.
function SuperType(){
this.property=true;
}
SuperType.prototype.getSuperValue=function(){
return this.property
}
function SubType(){
this.subproperty=false
}
// SuperType
SubType.prototype=new SuperType()
// , Object SuperType ,
SubType.prototype={
getSubValue:function(){
return this.subproperty;
},
somOtherMethod:function(){
return false
}
};
var instance=new SubType()
console.log(instance.getSuperValue()) //error1.인용 유형 값 을 포함 하 는 원형:인 스 턴 스 가 다른 함수 의 원형 일 때 인용 유형 값 은 원형 상의 속성 이 되 고 다른 함수 의 인 스 턴 스 에 의 해 공 유 됩 니 다.
function SuperType(){
this.colors=["yellow","red","olive"]
}
function SubType(){
}
SubType.prototype=new SuperType() //color
var instance1=new SubType()
instance1.colors.push("purple")
var instance2=new SubType()
console.log(instance1.colors==instance2.colors) //true2.구조 함수 의 도움 을 받는다.
원형 에 인용 유형 값 이 포 함 된 문 제 를 해결 하기 위해 구조 함 수 를 이용 하여 해결 합 니 다.
하위 형식 구조 함수 의 내부 호출 초 유형 구조 함수(함 수 는 특정 환경 에서 코드 를 실행 하 는 대상 이 므 로 apply 또는 call 을 통 해 호출 할 수 있 습 니 다)
function SuperType(){
this.color=["yellow","red","olive"]
}
function SubType(){
// SuperType
SuperType.call(this)
}
var instance1=new SubType()
instance1.color.push("purple")
var instance2=new SubType()
console.log(instance1.color) //["yellow","red","olive","purple"]
console.log(instance2.color) //["yellow","red","olive"]
//
function SuperType(name){
this.name=name
}
function SubType(){
SuperType.call(this,"double")
this.age=12
}
var instance1=new SubType()
console.log(instance1.name) //double
console.log(instance1.age) //123.조합 계승(자주 사용 하 는 것 은 조합 이 고 원형 과 구조 결합 과 같다)
function SuperType(name){
this.name=name;
this.color=["yellow","red","olive"];
}
SuperType.prototype.sayName=function(){
console.log(this.name);
}
function SubType(name,age){
// ,
SuperType.call(this,name);
this.age=age;
}
// ,
SubType.prototype=new SuperType();
alert(SubType.prototype.constructor) // SuperType
SubType.prototype.constructor=SubType; // constructor SubType
SubType.prototype.sayAge=function(){
console.log(this.age)
}
var instance1=new SubType("double",23)
instance1.color.push("pink")
console.log(instance1.color) //["yellow","red","olive","pink"]
instance1.sayName() //double
instance1.sayAge() //23
var instance2=new SubType("single",34)
console.log(instance2.color) //["yellow","red","olive"]
instance2.sayName() //single
instance2.sayAge() //341.원형 계승
크 록 포드 가 쓴 것;프로 토 타 입 을 통 해 기 존 대상 을 기반 으로 새 대상 을 만 들 수 있 으 며 사용자 정의 형식 을 만 들 필요 가 없습니다.
function object(o){ // object()
function F(){} //
F.prototype=o //
return new F() //
}
var person={
name:"double",
friends:["tom","jack","mike"]
}
var person1=object(person) //
person1.name="grey"
person1.friends.push("single")
console.log(person1.friends) //["tom", "jack", "mike", "single"]
var person2=object(person)
person2.name="red"
console.log(person2.friends) //["tom", "jack", "mike", "single"]
var person={
name:"double",
friends:["tom","jack","mike"]
}
var person1=Object.create(person)
person1.name="single"
person1.friends.push("singles")
var person2=Object.create(person)
console.log(person1.friends==person2.friends) //true
//Object.create() ， ，
var person={
name:"double",
friends:["tom","jack","mike"]
}
var person1=Object.create(person,{
name:{
value:"single" //
}
})사고방식 과 원형 식 계승 은 일맥상통 하여 계승 과정 을 봉인 하 는 함 수 를 만 들 고 내 부 는 방식 을 통 해 대상 을 강화 하고 대상 을 되 돌려 준다.주요 고려 대상 시 사용
function object(o){
function F(){}
F.prototype=o
return new F()
}
function createPerson(original){
var clone=object(original) //
clone.sayName=function(){
alert("name")
}
return clone
}
var person={
name:"double",
friends:["single","tom","jack"]
}
var person1=createPerson(person)
person1.sayName() //name 조합 계승 은 계승 에 자주 사용 되 지만 두 번 의 초 유형 구조 함 수 를 호출 합 니 다.기생 조합 상속 은 이 문 제 를 해결 하기 위 한 것 이다.
function object(o){
function F(){}
F.prototype=o
return new F()
}
function inheritPrototype(subType,superType){
var prototype=object(superType) // (superType )
prototype.constructor=subType //
subType.prototype=prototype // ( )
}
function SuperType(name,sex){
this.name=name
this.sex=sex
this.colors=["red"]
}
SuperType.prototype.sayName=function(){
alert(this.name)
}
function SubType(name,sex,age){
SuperType.call(this,name,sex)
this.age=age
}
inheritPrototype(SubType,SuperType) // subType.prototype
SubType.prototype.sayAge=function(){ // subType.prototype
alert(this.age)
}
var person1=new SubType("double","man",34)
console.log(person1.name) //SuperType Bug
console.log(person1.sex) //man
console.log(person1.colors) //["red"]
person1.sayAge() //34이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 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에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
