여러 js 상속 스타일 공유

이 글은 주로 프로토타입 상속, 빌린 생성자 상속, 조합 상속, 기생 상속 및 기생 조합 상속을 포함한 여러 js 상속 스타일을 공유합니다.

프로토타입 상속

은 생성자를 미리 정의하지 않고도 상속을 구현할 수 있습니다. 그 본질은 주어진 객체의 얕은 복사본을 수행하는 것입니다. 복사된 복사본은 추가로 수정될 수 있습니다.

function parent(o) {
    this.username = 'father';    this.array = [1,2,3]
}function child() {
    this.age = 20}
child.prototype = new Parent();

단점:
1. 상위 클래스와 하위 클래스의 공통 프로토타입 체인에 대한 참조 변수.
2. 하위 클래스의 인스턴스를 생성할 때 상위 클래스의 생성자에 매개변수를 전달할 수 없습니다.

생성자 상속 상속

상위 클래스의 생성자를 빌려 하위 클래스의 인스턴스를 강화합니다. 또는 하위 클래스에 메서드가 제공됩니다

function Parent(name,arr) {
    this.name = name;    this.arr = arr;    this.run = function() {
        console.log('run function')
   }
}function Child(name, arr) {
    this.age = 20;
    Parent.call(this,name,arr);
}var obj1 = new Child('zhang san', [1,2,3]);var obj2 = new Child('zhang san', [1,2,3]);
obj1.arr[0] = 'hello'console.log(obj1.arr[0]); // helloconsole.log(obj2.arr[0]); // 1

장점:
1. 하위 클래스 인스턴스가 상위 클래스 참조 속성을 공유하는 문제를 해결합니다. 2.
단점:
1. 재사용을 위해 각 하위 클래스 인스턴스에는 새로운 실행 함수가 있습니다. 인스턴스에 객체가 너무 많으면 메모리 소비가 너무 커집니다.

결합 상속은 방지됩니다. 프로토타입 체인과 빌린 생성자의 결함을 제거하고 장점을 통합합니다.

function Parent(name,arr) {
    this.name = name;    this.arr = arr;
}
Parent.prototype.run = function() {
    console.log('run function');
}function Child(naem,arr) {
    this.age = '20';
    Parent.call(this,name,arr);        // 借用构造函数 ==》 核心语句   1》不能复用}
Child.prototype = new Parent(); // 原型链 ==》 核心语句  1》父构造函数不能传递参数 2》arr是引用属性，一个改变，互相影响

장점:

1. 참조 속성을 공유하는 데 문제가 없습니다.

2. 매개변수를 전달할 수 있습니다.

3. 메서드를 재사용할 수 있습니다.
단점:
하위 클래스 프로토타입에 있는 상위 클래스 인스턴스의 속성이 중복됩니다.
Parasite 스타일 상속

은 프로토타입 상속과 매우 유사합니다. 또한 객체나 일부 정보를 기반으로 객체를 생성한 다음 객체를 강화하고 최종적으로 객체를 반환합니다.

function createAnother(original) {
    var clone = Object.create(original); //
    clone.sayHi = function() {
        console.log(Hi) 
   }   return clone;var Person = {
    name: 'Blob',
    friends: ['Shelby', 'Court', 'Van'];
}var anotherPerson = createAnother(person);
anotherPerson.sayHi(); // Hi

기생 결합 상속

결합 상속은 js에서 가장 일반적으로 사용되는 상속 패턴입니다. 결합 상속의 가장 큰 문제는 상황에 관계없이 생성자가 두 번 호출된다는 것입니다. 하위 유형 프로토타입을 생성할 때 한 번, 다른 시간에는 하위 유형 생성자 내부에 있습니다.

function beget(obj){   // 生孩子函数 beget：龙beget龙，凤beget凤。
    var F = function(){};
    F.prototype = obj;    return new F();
}function Super(){
    // 只在此处声明基本属性和引用属性
    this.val = 1;    this.arr = [1];
}//  在此处声明函数Super.prototype.fun1 = function(){};
Super.prototype.fun2 = function(){};//Super.prototype.fun3...function Sub(){
    Super.call(this);   // 核心
    // ...}var proto = beget(Super.prototype); // 核心proto.constructor = Sub;            // 核心Sub.prototype = proto;              // 核心var sub = new Sub();
alert(sub.val);
alert(sub.arr);

관련 추천:

js 상속에 대해 자세히 설명

js 상속의 구현 코드_javascript 기술

JS 상속--프로토타입 체인 상속 및 클래스 상속_기본 지식

위 내용은 여러 js 상속 스타일 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!