JavaScript의 상속 방법에는 프로토타입 체인 상속, 빌린 생성자 상속, 결합 상속, 프로토타입 상속, 기생 상속 및 기생 결합 상속이 포함됩니다. 그 중 결합 상속이 가장 일반적으로 사용되는 상속 방법이다.
이 기사의 운영 환경: windows10 시스템, javascript 1.8.5, thinkpad t480 컴퓨터.
자바스크립트에서 상속하려면 먼저 부모 클래스를 제공해야 합니다. 여기서는 Person을 부모 클래스로 사용합니다.
아래 생성자 이름은 모두 Coder, Rocker 등 실제 의미가 없으며 예시로만 사용됩니다.
function Person(name){//给构造函数添加了参数
this.name=name;
this.sex="male";
this.say=function(){
console.log(this.name);
}
}
Person.prototype.age=21;//给构造函数添加了原型属性1 프로토타입 체인 상속
function Programmer(){
this.name="Jayee";
}
Programmer.prototype=new Person();//子类构造函数.prototype=父类实例
var per1=new Programmer();
console.log(per1);//Programmer {name: "Jayee"}
console.log(per1.sex);//male
console.log(per1.age);//21
console.log(per1 instanceof Person);//true핵심 사항: 새 인스턴스의 프로토타입을 만듭니다. 상위 클래스의 인스턴스와 같습니다. Programmer.prototype=new Person();
Features: 인스턴스가 상속할 수 있는 속성에는 인스턴스 생성자의 속성, 상위 클래스 생성자의 속성 및 상위 클래스 프로토타입의 속성이 포함됩니다. (새 인스턴스는 상위 클래스 인스턴스의 속성을 상속하지 않습니다!)
단점: 1. 새 인스턴스는 상위 클래스 생성자에 매개 변수를 전달할 수 없습니다.
2. 단일 상속.
3. 모든 새 인스턴스는 상위 클래스 인스턴스의 속성을 공유합니다. (프로토타입의 속성은 공유됩니다. 한 인스턴스가 프로토타입의 속성을 수정하면(per1.__proto__.sex = "female", 그러면 per2.sex도 female이 됩니다), 다른 인스턴스의 프로토타입 속성도 변경됩니다. )
두 번째, 생성자 상속 차용
//借用构造函数继承
function Coder(){
Person.call(this,"Jayee");//重点：借用了Person
this.age=18;
}
var cod1=new Coder();
console.log(cod1);
//Coder {name: "Jayee", sex: "male", hobby: "", age: 18, say: ƒ}
console.log(cod1.name);//Jayee
console.log(cod1.age);//18
console.log(cod1 instanceof Person);//false핵심 사항: .call() 및 .apply()를 사용하여 상위 클래스 생성자를 하위 클래스 함수에 도입합니다(하위 클래스 함수 실행에서 상위 클래스 함수를 자동으로 만듭니다). (복사))
특징: 1. 상위 클래스 생성자의 속성만 상속하고 상위 클래스 프로토타입의 속성은 상속하지 않습니다. (
cod1.age가 21이 아닌 18이라는 것을 보면 알 수 있습니다.)
2. 프로토타입 체인 상속의 단점 1, 2, 3을 해결했습니다.
3. 여러 생성자 속성을 상속받을 수 있습니다(다중 호출).
4. 하위 인스턴스의 상위 인스턴스에 매개변수를 전달할 수 있습니다.
단점: 1. 상위 클래스 생성자의 속성만 상속할 수 있습니다.
2. 생성자의 재사용은 불가능합니다. (사용할 때마다 다시 호출해야 합니다.) 3. 각각의 새 인스턴스에는 부풀려진 상위 클래스 생성자의 복사본이 있습니다.
3. 결합 상속(결합 프로토타입 체인 상속 및 빌린 생성자 상속)(일반적으로 사용됨)
//组合继承
function Typer(name){
Person.call(this,name);
}
Typer.prototype=new Person();
var typ=new Typer("Jayee");
console.log(typ);
//Typer {name: "Jayee", sex: "male", hobby: "", say: ƒ}
console.log(typ.name);//Jayee，继承了构造函数
console.log(typ.age);//21，继承了父类的原型的属性핵심 사항: 매개변수 전달 및 재사용이라는 두 가지 모드의 장점을 결합합니다.
특징: 1. 프로토타입의 프로토타입을 상속할 수 있습니다. 상위 클래스 속성은 매개변수로 전달되어 재사용될 수 있습니다.
2. 각각의 새 인스턴스에 도입된 생성자 속성은 비공개입니다. 단점: 상위 클래스 생성자가 두 번 호출되고(메모리 소비) 하위 클래스 생성자가 프로토타입의 상위 클래스 생성자를 대체합니다4. 프로토타입 상속 //原型式继承
function Rocker(obj) {
//先封装一个函数容器，用来输出对象和承载继承的原型
function F(){}
F.prototype=obj;//继承了传入的函数
return new F();//返回函数对象
}
var per=new Person();//拿到父类实例
var roc =Rocker(per);//F {}
console.log(per.__proto__);//{age: 21, constructor: ƒ}
console.log(roc.age);//21，继承了父类函数的属性기능: 객체를 복사하여 함수로 래핑하는 것과 유사합니다.
//寄生式继承
function Rocker(obj){
function F(){}
F.prototype=obj;//继承了传入的函数
return new F();//返回函数对象
}
var per4=new Person();
//以上是原型式继承,给原型式继承再套个壳子传递参数
function Artist(obj){
var roc=Rocker(obj);
roc.name="Jayee";
return roc;
}
var art = Artist(per4)
//这个函数经过声明之后就成了可增添属性的对象
console.log(typeof Artist);//function
console.log(typeof art);//object
console.log(art.name);//Jayee，返回了个roc对象，继承了roc的属性핵심: 프로토타입 상속 주위에 쉘을 두는 것입니다. 장점: 객체(this)를 반환하는 셸일 뿐이므로 사용자 정의 유형이 생성되지 않으며 이 함수는 자연스럽게 생성된 새 객체가 됩니다. 단점: 프로토타입을 사용하지 않으며 재사용할 수 없습니다. 6. 기생 결합 상속(일반적으로 사용됨) Parasite: 함수 내에서 객체를 반환한 다음 Composition을 호출합니다. 1. 함수의 프로토타입은 다른 인스턴스와 같습니다. 2. 적용 또는 호출을 사용하여 함수에 다른 생성자를 도입하고 매개변수를 전달할 수 있습니다 //寄生式组合式继承
//寄生
function Rocker(obj){
function F(){}
F.prototype=obj;//继承了传入的函数
return new F();//返回函数对象
}
//Rocker就是F实例的另一种表示法
var roc=new Rocker(Person.prototype);
//roc实例（F实例）的原型继承了父类函数的原型
//上述更像是原型链继承，只不过继承了原型属性
//组合
function Sub(){
Person.call(this);
//这个继承了父类构造函数的属性
//解决了组合式两次调用构造函数属性的缺点
}
//重点
Sub.prototype=roc;//继承了roc实例
roc.constructor=Sub;//一定要修复实例
var sub1=new Sub();
//Sub的实例就继承了构造函数属性，父类实例，roc的函数属性
console.log(sub1.age);//21핵심 사항: 결합 상속 문제 수정7. ES6의 클래스 및 확장//todo관련 동영상 튜토리얼 공유:
javascript 비디오 튜토리얼
위 내용은 자바스크립트의 상속 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!