js 객체지향 상속 지식에 대한 자세한 설명
- 小云云원래의
- 2018-02-05 09:35:231426검색
이 상속에 대해 말하면 객체 지향을 아는 친구들은 대부분의 oo 언어에 두 가지 유형이 있다는 것을 알고 있습니다. 하나는 인터페이스 상속(메서드 서명만 상속)이고 다른 하나는 구현 상속(실제 메서드 상속)입니다. 이 글은 js 객체지향 상속과 관련된 지식을 소개하고, 이 지식 포인트를 이해하는데 있어 독자들의 학습 경험을 공유합니다. 도움이 필요한 친구들은 참고할 수 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.
그러나 js에는 서명이 없으므로 상속만 구현하고 프로토타입 체인에 의존합니다. js
1에서 상속에 대해 공식적으로 이야기해 보겠습니다. 프로토타입 체인
프로토타입 체인: 상속을 구현하는 주요 방법은 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 하는 것입니다.
검토: 생성자, 프로토타입 및 인스턴스 사이의 관계
각 생성자는 프로토타입 개체(Person.prototype)를 가지고 있습니다. 프로토타입 개체에는 생성자(생성자)에 대한 포인터가 포함되어 있습니다. 각 인스턴스에는 생성자에 대한 포인터가 포함되어 있습니다. 객체(보이지 않는 _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原型对象的原型对象;显然是存在的참고: 인스턴스의 생성자는 이제 원본 SubType을 가리킵니다. 프로토타입이 다시 작성되었으며 내부 생성자는 SubType.prototype의 프로토타입 객체 생성자와 함께 생성자 SuperType을 가리킵니다. 프로토타입 검색 메커니즘이 어떻게 작동하는지에 대해서는 위의 코드를 주의 깊게 읽으십시오. 1.1 완성된 프로토타입
프로토타입 부분에서 이미 언급했지만 다시 얘기해보겠습니다. 전체 프로토타입에는 개체가 포함됩니다.
모든 함수의 기본 프로토타입은 Object의 인스턴스입니다. 각 기본 프로토타입에는 Object.prototype을 가리키는 _proto_ 포인터가 있습니다. 따라서 사용자 정의 유형은 toString 및 valueOf
와 같은 메서드를 상속합니다. _ 포인터는 다음을 가리킵니다. 프로토타입 체인을 종료하려면 null입니다. Person 생성자를 예로 들어 전체 프로토타입 체인 다이어그램을 살펴보세요
1.2 프로토타입과 인스턴스 간의 관계 판단
첫 번째는 instanceof 연산자를 사용합니다. 인스턴스에 나타나는 생성자를 테스트하고 프로토타입 체인이고 그 결과는 true입니다
두 번째 메소드는PrototypeOf(): 프로토타입 체인에 나타나는 프로토타입인 한 프로토타입 체인에서 파생된 인스턴스의 프로토타입이라고 할 수 있습니다
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))1.3 메소드를 신중하게 정의하세요
참고: 프로토타입 제공 객체 추가 메소드는 대체 프로토타입 이전에 찾을 수 없고 프로토타입이 다시 작성되므로 대체 프로토타입 뒤에 배치해야 합니다. 프로토타입 체인을 사용하면 프로토타입 메서드를 만들 수 없습니다.
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.4 참조 유형 값을 포함하는 프로토타입: 인스턴스가 다른 함수의 프로토타입인 경우 참조 유형 값은 프로토타입이 됩니다. 속성은 다른 함수의 인스턴스에서 공유됩니다.
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. 하위 유형 인스턴스를 생성할 때 매개변수는 상위 유형의 생성자에 전달될 수 없습니다(모든 객체 인스턴스에 영향을 주지 않고 상위 유형의 생성자에 매개변수를 전달할 수 있는 방법은 없습니다)2. 생성자의 도움 프로토타입의 참조 유형 값으로 인해 발생하는 문제를 해결하려면 생성자를 사용하여 해결하세요.
하위 유형 생성자 내부에서 상위 유형 생성자를 호출합니다(함수는 코드를 실행하는 객체입니다). 적용 또는 호출을 통해 전달할 수 있습니다)
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) //12
문제: 생성자에서만 학습하면 생성자의 문제를 피할 수 없습니다. 메소드는 모두 생성자에 정의되어 있으며 함수는 할 수 없습니다. 재사용 가능3. 조합 상속(일반적으로 사용되는 것은 조합이며 프로토타입과 생성자의 조합은 동일함)
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() //34다른 상속도 있으니 잠시 적어두세요1. Crockford가 작성했으며, 기존 객체를 기반으로 새로운 객체를 생성할 수 있습니다. 동시에 사용자 정의 유형을 생성할 필요가 없습니다.
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"]프로토타입 상속을 표준화하기 위해 ES5는 편의상 Object.create()는 IE9 이상에서 사용할 수 있습니다. 하나의 객체를 다른 객체와 유사하게 유지하려면 이 방법을 사용하면 됩니다.
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" //每个属性都是通过自己描述符定义的
}
}) 2. 기생 상속
아이디어는 다음과 같습니다. 프로토타입 상속과 같은 맥락입니다. 상속 프로세스를 캡슐화하고 메서드를 통해 객체를 내부적으로 강화하고 객체를 반환하는 함수를 만듭니다. 객체를 주로 고려할 때 사용합니다.
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 引用类型值还是共享的3. 조합 상속은 상속에서 자주 사용되지만 기생 조합 상속은 이 문제를 해결하기 위해 두 번 호출됩니다. 컴파일하면 도움이 될 수 있습니다.
관련 추천:
JavaScript 객체지향 상속_javascript 기술에 대한 자세한 설명
위 내용은 js 객체지향 상속 지식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!