JavaScript는 상속을 어떻게 구현합니까?-프런트엔드 Q&A-php.cn

JavaScript는 상속을 어떻게 구현합니까?

PHPz

풀어 주다： 2023-04-06 10:10:36

원래의

1039명이 탐색했습니다.

JavaScript는 객체 지향 언어이며 상속은 객체 지향 프로그래밍의 중요한 기능입니다. JavaScript에는 상속을 구현하는 방법이 많이 있습니다. 이 기사에서는 보다 일반적인 방법 중 일부를 소개합니다.

1. 프로토타입 체인 상속

프로토타입 체인 상속은 JavaScript에서 가장 기본적인 상속 방법이자 가장 일반적으로 사용되는 방법입니다. 프로토타입 체인 상속을 통해 하위 클래스는 상위 클래스의 속성과 메서드를 상속할 수 있습니다.

프로토타입 체인 상속의 구현 방법은 다음과 같습니다.

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    this.age = age;
    Parent.call(this, name);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

로그인 후 복사

위 코드에서는 먼저 상위 클래스인 Parent와 하위 클래스인 Child를 정의합니다. Child에서는 Parent.call(this, name)을 사용하여 부모 클래스 생성자를 호출하고 Child.prototype = new Parent()를 통해 Child의 프로토타입을 Parent로 지정하여 상속을 구현합니다. 마지막으로 child1과 child2라는 두 개의 하위 클래스 인스턴스를 생성하고 상속 효과를 확인했습니다.

프로토타입 체인 상속의 장점은 구현이 간단하고 이해하기 쉽다는 것입니다. 그러나 단점도 분명합니다. 즉, 프로토타입 객체의 참조 유형 속성을 모든 인스턴스에서 공유하게 된다는 것입니다.

2. 생성자 상속

생성자 상속은 비교적 이해하기 쉬운 상속 방법입니다. 하위 클래스 생성자에서 상위 클래스 생성자를 호출하여 상속을 달성합니다.

생성자 상속의 구현 방법은 다음과 같습니다.

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // TypeError: child1.sayName is not a function 

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // TypeError: child2.sayName is not a function

로그인 후 복사

위 코드에서는 하위 클래스 생성자 Child에서 Parent.call(this, name)을 사용하여 상위 클래스 생성자를 호출하고 이를 하위 클래스 인스턴스를 가리킵니다. 상속이 구현됩니다. 그러나 생성자 상속은 부모 클래스 프로토타입의 메서드를 상속하지 않기 때문에 하위 클래스에서 부모 클래스 프로토타입의 메서드를 직접 호출할 수 없습니다.

생성자 상속의 장점은 프로토타입 체인 상속의 모든 인스턴스가 참조 유형 속성을 공유하는 문제를 방지한다는 것입니다. 그러나 단점도 분명합니다. 즉, 상위 클래스의 프로토타입에 있는 메서드를 상속할 수 없습니다.

3. 조합 상속

조합 상속은 자바스크립트에서 가장 일반적으로 사용되는 상속 방식으로, 프로토타입 체인 상속과 생성자 상속을 결합하여 각각의 단점을 해결하는 방식입니다.

결합 상속의 구현 방법은 다음과 같습니다.

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

로그인 후 복사

위 코드에서는 하위 클래스 생성자 Child에서 Parent.call(this, name)을 사용하여 상위 클래스 생성자를 호출하고 이를 하위 클래스 인스턴스로 지정하여 달성합니다. 상속됨. 동시에 하위 클래스 프로토타입에 Child.prototype = new Parent()를 전달하여 하위 클래스가 상위 클래스의 프로토타입을 상속받도록 하여 상위 클래스 프로토타입의 메서드를 상속하게 합니다.

결합 상속의 장점은 상속 방법이 완전하다는 점입니다. 상위 클래스 프로토타입의 메서드를 상속할 수 있을 뿐만 아니라 프로토타입 체인 상속의 모든 인스턴스가 참조 유형 속성을 공유하는 문제도 피할 수 있습니다. 그러나 단점은 부모 클래스 생성자를 두 번 호출하여 일정량의 메모리 공간을 낭비한다는 것입니다.

4. 기생 조합 상속

기생 조합 상속은 조합 상속의 최적화 방법으로, 하위 클래스 프로토타입에서 부모 클래스 생성자를 여러 번 호출하는 문제를 방지하여 메모리 오버헤드를 줄입니다.

기생 조합 상속의 구현 방법은 다음과 같습니다.

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

로그인 후 복사

위 코드에서는 하위 클래스 프로토타입의 Object.create() 메서드를 사용하여 상위 클래스 프로토타입의 복사본을 생성하고 Object.create() 매개변수는 서브클래스 프로토타입의 생성자 속성을 재정의하여 서브클래스 자체를 가리킵니다. Object.create() 메서드는 부모 클래스 생성자를 호출하지 않으므로 자식 클래스 프로토타입에서 부모 클래스 생성자를 여러 번 호출하는 문제를 방지합니다.

기생 조합 상속의 장점은 부모 클래스 프로토타입의 메서드를 상속받을 뿐만 아니라 자식 클래스 프로토타입에서 부모 클래스 생성자를 여러 번 호출하는 문제를 피할 수 있다는 것입니다. 단점은 구현이 더 복잡하다는 것입니다.

간단히 말하면 JavaScript에서 상속을 구현하는 방법은 여러 가지가 있으며 각 방법에는 고유한 장점과 단점이 있습니다. 실제 개발에서는 특정 상황에 따라 적절한 상속 방법을 선택해야 합니다.

위 내용은 JavaScript는 상속을 어떻게 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!