js 상속의 개념
js다음 두 가지 상속 방법이 일반적으로 사용됩니다.
프로토타입 체인 상속(객체 간 상속)
클래식 상속(생성자 간 상속)
js은 java처럼 진정한 객체지향 언어가 아니기 때문에 js은 객체 기반이고 클래스가 없습니다. 개념. 따라서 상속을 구현하려면 js의 프로토타입 메커니즘을 사용하거나 apply 및 call 메서드를 사용하여
을 구현하면 됩니다. 객체 지향 언어에서는 类을 사용하여 자동 정의 개체를 만듭니다. 그런데 js에 있는 모든 것은 객체인데 어떻게 사용자 정의 객체를 만들 수 있나요? 이를 위해서는 js의 프로토타입을 사용해야 합니다.
간단히 prototype를 템플릿으로 간주할 수 있으며 새로 생성된 사용자 정의 개체는 모두 이 템플릿(prototype)의 복사본입니다(실제로, 복사본이 아니라 링크이지만 이 링크는 보이지 않습니다. 새로 인스턴스화된 객체 내부에는 프로토타입 객체를 가리키는 보이지 않는 __Proto__ 포인터가 있습니다.
js생성자와 프로토타입을 통해 구현 클래스의 기능을 시뮬레이션할 수 있습니다. 게다가 js클래스 상속 구현도 프로토타입 체인에 의존합니다.
프로토타입 상속과 클래스 상속
类式继承은 하위 유형 생성자 내부에서 상위 유형 생성자를 호출하는 것입니다.
엄격한 클래스 상속은 흔하지 않으며 일반적으로 조합하여 사용됩니다.
function Super(){
this.colors=["red","blue"];
}
function Sub(){
Super.call(this);
}로그인 후 복사
原型式继承는 기존 객체의 도움으로 하위 클래스의 프로토타입을 가리키는 새 객체를 생성하는 것입니다. 상위 클래스 A 클래스는 상위 클래스의 프로토타입 체인에 합류하는 것과 동일합니다
프로토타입 체인 상속
하위 클래스가 상위 클래스의 속성(메소드 포함)을 상속하려면 먼저 생성자를 정의해야 합니다. 그런 다음 상위 클래스의 새 인스턴스를 생성자의 프로토타입에 할당합니다. 코드는 다음과 같습니다:
<script>
function Parent(){
this.name = 'mike';
}
function Child(){
this.age = 12;
}
Child.prototype = new Parent();//Child继承Parent，通过原型，形成链条
var test = new Child();
alert(test.age);
alert(test.name);//得到被继承的属性
//继续原型链继承
function Brother(){ //brother构造
this.weight = 60;
}
Brother.prototype = new Child();//继续原型链继承
var brother = new Brother();
alert(brother.name);//继承了Parent和Child,弹出mike
alert(brother.age);//弹出12
</script>로그인 후 복사
위의 프로토타입 체인 상속에는 여전히 하나의 누락된 링크가 있습니다. 바로 Object입니다. 모든 생성자는 Object에서 상속됩니다. 상속Object은 자동으로 완료되므로 수동으로 상속할 필요가 없습니다. 그렇다면 이들의 소속은 무엇입니까?
프로토타입과 인스턴스 간의 관계 결정
프로토타입과 인스턴스 간의 관계는 두 가지 방법으로 결정할 수 있습니다. 연산자 instanceof 및 isPrototypeof() 메소드:
alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超类
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true
로그인 후 복사
프로토타입 체인에 등장한 프로토타입인 만큼 프로토타입 체인에서 파생된 인스턴스의 프로토타입이라고 할 수 있습니다. , isPrototypeof() 메소드는 true
도 반환합니다. js에서는 상속된 함수를 슈퍼 유형(상위 클래스, 기본 클래스도 허용됨)이라고 하며, 상속된 함수를 하위 유형이라고 합니다. (하위 클래스, 파생 클래스). 프로토타입 상속 사용에는 두 가지 주요 문제가 있습니다.
첫째, 프로토타입을 문자 그대로 다시 작성하면 참조 유형의 프로토타입을 사용하여 관계가 깨지고 하위 유형이 상위 유형에 매개변수를 전달할 수 없습니다.
유사 클래스는 참조 공유 문제와 슈퍼 유형의 매개변수 전달 불가 문제를 해결합니다.
빌린 생성자(클래스 상속)
<script>
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}
function Child(age){
Parent.call(this,age);
}
var test = new Child(21);
alert(test.age);//21
alert(test.name);//mike,jack,smith
test.name.push('bill');
alert(test.name);//mike,jack,smith,bill
</script>로그인 후 복사
차용 생성자를 사용하면 방금 언급한 두 가지 문제가 해결되지만 프로토타입이 없으면 재사용이 불가능하므로 결합 상속이라고 하는 原型链+借用构造函数 패턴이 필요합니다.
결합 상속
<script>
function Parent(age){
this.name = ['mike','jack','smith'];
this.age = age;
}
Parent.prototype.run = function () {
return this.name + ' are both' + this.age;
};
function Child(age){
Parent.call(this,age);//对象冒充，给超类型传参
}
Child.prototype = new Parent();//原型链继承
var test = new Child(21);//写new Parent(21)也行
alert(test.run());//mike,jack,smith are both21
</script>로그인 후 복사
결합 상속은 일반적으로 사용되는 상속 방법으로, 프로토타입 체인을 사용하여 프로토타입 속성과 메서드를 상속하고 생성자를 빌려 인스턴스 속성을 상속하는 것입니다. 이러한 방식으로 함수 재사용은 프로토타입에 메서드를 정의하여 달성되며 각 인스턴스는 고유한 속성을 갖도록 보장됩니다.
call() 사용법: 개체의 메서드를 호출하여 현재 개체를 다른 개체로 바꿉니다.
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
로그인 후 복사
프로토타입 상속
이런 종류의 상속은 사용자 지정 유형을 만들지 않고 프로토타입을 사용하여 기존 객체를 기반으로 새 객체를 생성하는 것을 原型式继承
<script>
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
var box = {
name : 'trigkit4',
arr : ['brother','sister','baba']
};
var b1 = obj(box);
alert(b1.name);//trigkit4
b1.name = 'mike';
alert(b1.name);//mike
alert(b1.arr);//brother,sister,baba
b1.arr.push('parents');
alert(b1.arr);//brother,sister,baba,parents
var b2 = obj(box);
alert(b2.name);//trigkit4
alert(b2.arr);//brother,sister,baba,parents
</script>로그인 후 복사
프로토타입 상속이라고 합니다. obj() 함수 내에 임시 생성자를 생성한 다음 들어오는 객체를 이 생성자의 프로토타입으로 사용하고 마지막으로 이 임시 유형의 새 인스턴스를 반환합니다.
기생 상속
이 상속 방법은 프로토타입 + 팩토리 패턴을 결합하여 생성 프로세스를 캡슐화합니다.
<script>
function create(o){
var f= obj(o);
f.run = function () {
return this.arr;//同样，会共享引用
};
return f;
}
</script>로그인 후 복사
결합 상속의 작은 문제
결합 상속은 가장 일반적으로 사용되는 상속 패턴js이지만 결합 상속의 상위 유형은 한 번 사용하는 동안 두 번 호출됩니다. 다른 하나는 하위 유형 생성자
<script>
function Parent(name){
this.name = name;
this.arr = ['哥哥','妹妹','父母'];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,age);//第二次调用
this.age = age;
}
Child.prototype = new Parent();//第一次调用
</script>로그인 후 복사
내부입니다. 위 코드는 이전 결합 상속이므로 기생 결합 상속은 두 호출의 문제를 해결합니다.
기생 결합 상속
<script>
function obj(o){
function F(){}
F.prototype = o;
return new F();
}
function create(parent,test){
var f = obj(parent.prototype);//创建对象
f.constructor = test;//增强对象
}
function Parent(name){
this.name = name;
this.arr = ['brother','sister','parents'];
}
Parent.prototype.run = function () {
return this.name;
};
function Child(name,age){
Parent.call(this,name);
this.age =age;
}
inheritPrototype(Parent,Child);//通过这里实现继承
var test = new Child('trigkit4',21);
test.arr.push('nephew');
alert(test.arr);//
alert(test.run());//只共享了方法
var test2 = new Child('jack',22);
alert(test2.arr);//引用问题解决
</script>로그인 후 복사
호출 및 적용
전역 함수 apply 및 call를 사용하여 함수에서 this의 지정을 변경할 수 있습니다.
// 定义一个全局函数
function foo() {
console.log(this.fruit);
}
// 定义一个全局变量
var fruit = "apple";
// 自定义一个对象
var pack = {
fruit: "orange"
};
// 等价于window.foo();
foo.apply(window); // "apple",此时this等于window
// 此时foo中的this === pack
foo.apply(pack); // "orange"로그인 후 복사
위 내용은 자바스크립트의 상속방식에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
