자바스크립트에서 상속을 구현하는 방법은 무엇입니까?

JavaScript가 상속을 구현하는 방법: 1. 프로토타입 체인 상속은 상위 클래스의 인스턴스를 하위 클래스의 프로토타입으로 사용합니다. 2. 구조적 상속; 상위 클래스의 생성자를 사용하여 하위 클래스 인스턴스를 강화합니다. 3. 인스턴스 상속, 상위 클래스 인스턴스에 새로운 기능을 추가하고 하위 클래스 인스턴스로 반환합니다. 4. 상속을 복사합니다. 5. 조합 상속. 6. 기생 조합 상속.

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JS는 객체 지향의 약한 유형의 언어이며 상속도 매우 강력한 기능 중 하나입니다. 그렇다면 JS에서 상속을 구현하는 방법은 무엇입니까? 기다려 보자.

JS 상속 구현 방법

상속을 구현하려면 먼저 상위 클래스가 있어야 합니다. 코드는 다음과 같습니다.

// 定义一个动物类
function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
}
// 原型方法
Animal.prototype.eat = function(food) {
  console.log(this.name + '正在吃：' + food);
};

1. 프로토타입 체인 상속

Core: 하위 클래스로서의 상위 클래스

function Cat(){ 
}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

//　Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.eat('fish'));
console.log(cat.sleep());
console.log(cat instanceof Animal); //true 
console.log(cat instanceof Cat); //true

의 프로토타입 특징:

• 매우 순수한 상속 관계 인스턴스는 하위 클래스의 인스턴스이자 상위 클래스의 인스턴스이기도 합니다.

• 상위 클래스에 프로토타입이 추가되었습니다. 서브클래스에서 액세스할 수 있는 메소드/프로토타입 속성

• 단순하고 구현하기 쉬움

단점:

• 서브클래스에 속성과 메소드를 추가하려면 다음에서 Cat 인스턴스에 인스턴스 속성을 추가할 수 있습니다. 고양이 생성자. 프로토타입 속성과 메서드를 추가하려면 new Animal()과 같은 문 다음에 실행되어야 합니다.

• 다중 상속을 구현할 수 없습니다

• 프로토타입 객체의 모든 속성은 모든 인스턴스에서 공유됩니다.

• 하위 클래스 인스턴스를 생성할 때 매개 변수를 상위 클래스 생성자에 전달할 수 없습니다

2. 구조적 상속

핵심: 상위 클래스의 생성자를 사용하여 하위 클래스의 인스턴스를 강화합니다. 이는 상위 클래스의 인스턴스 속성을 하위 클래스에 복사하는 것과 같습니다(프로토타입이 사용되지 않음)

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

특징:

• 해결 1, 하위 클래스 클래스 인스턴스가 상위 클래스 참조 속성을 공유하는 문제

• 하위 클래스 인스턴스를 생성할 때 상위 클래스에 매개변수를 전달할 수 있습니다.

• 다중 상속을 달성할 수 있습니다(다중 상위 클래스 호출)

단점:

• 인스턴스는 상위 클래스의 인스턴스가 아니고 하위 클래스의 인스턴스일 뿐입니다.

• 상위 클래스의 인스턴스 속성과 메서드만 상속할 수 있지만 프로토타입은 상속할 수 없습니다.

• 함수 재사용이 불가능합니다. 각 하위 클래스에는 성능에 영향을 미치는 상위 클래스 인스턴스 함수의 복사본이 있습니다

3. 인스턴스 상속

핵심: 상위 클래스 인스턴스에 새 기능 추가 그리고 하위 클래스 인스턴스로 반환합니다

function Cat(name){
  var instance = new Animal();
  instance.name = name || 'Tom';
  return instance;
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false

특징:

• 호출 방법을 제한하지 않습니다. new 子类()还是子类()에 관계없이 반환된 객체는 동일한 효과를 갖습니다.

단점:

• 인스턴스는 하위 클래스의 인스턴스가 아닌 상위 클래스

• 다중 상속을 지원하지 않습니다

4. 상속 복사

function Cat(name){
  var animal = new Animal();
  for(var p in animal){
    Cat.prototype[p] = animal[p];
  }
  // 如下实现修改了原型对象，会导致单个实例修改name，会影响所有实例的name值
  // Cat.prototype.name = name || 'Tom'; 错误的语句，下一句为正确的实现
  this.name = name || 'Tom';
}

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true

특징:

• 다중 상속 지원

단점:

• 낮은 효율성, 높은 메모리 사용량(부모 클래스의 속성을 복사해야 하기 때문에)

• 부모 클래스의 열거 불가능한 메서드를 얻을 수 없습니다(비열거 가능한 메서드, for in을 사용하여 액세스할 수 없음)

5 . 조합 상속

핵심: 부모 클래스 생성자를 호출하여 부모 클래스의 속성을 상속하고 매개 변수 전달의 이점을 유지한 다음 부모 클래스 인스턴스를 하위 클래스의 프로토타입으로 사용하여 구현합니다. 함수 재사용

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
Cat.prototype = new Animal();

// 组合继承也是需要修复构造函数指向的。

Cat.prototype.constructor = Cat;

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // true

기능:

• 은 메소드 2의 단점을 보완합니다. 인스턴스 속성/메서드와 프로토타입 속성/메소드를 상속할 수 있습니다.

• 둘 다 하위 클래스입니다. 인스턴스도 상위 클래스의 인스턴스입니다.

• 참조 속성 공유 문제가 없습니다

• 매개변수 전달 가능

• 함수 재사용 가능

단점:

• 부모 클래스 생성자가 두 번 호출되어 두 개의 인스턴스가 생성되었습니다( 서브클래스 인스턴스는 서브클래스 프로토타입의 인스턴스를 보호합니다)

6. 기생 조합 상속

Core: 기생을 통해 부모 클래스의 인스턴스 속성이 끊어지므로 부모 클래스의 생성자가 두 번 호출하면 인스턴스 메서드/속성이 두 번 초기화되지 않으므로 결합 상속의 단점을 피할 수 있습니다

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();

// Test Code
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Cat.prototype.constructor = Cat; // 需要修复下构造函数

기능:

• 완벽합니다

단점:

• 구현이 더 복잡합니다

부록 코드:

예1:

function Animal (name) {
  // 属性
  this.name = name || 'Animal';
  // 实例方法
  this.sleep = function(){
    console.log(this.name + '正在睡觉！');
  }
  //实例引用属性
  this.features = [];
}
function Cat(name){
}
Cat.prototype = new Animal();

var tom = new Cat('Tom');
var kissy = new Cat('Kissy');

console.log(tom.name); // "Animal"
console.log(kissy.name); // "Animal"
console.log(tom.features); // []
console.log(kissy.features); // []

tom.name = 'Tom-New Name';
tom.features.push('eat');

//针对父类实例值类型成员的更改，不影响
console.log(tom.name); // "Tom-New Name"
console.log(kissy.name); // "Animal"
//针对父类实例引用类型成员的更改，会通过影响其他子类实例
console.log(tom.features); // ['eat']
console.log(kissy.features); // ['eat']

원인 분석:

요점:속성 검색 프로세스

tom.features.push를 실행하고, 먼저 tom 개체의 인스턴스 속성을 찾습니다(찾을 수 없음).

그런 다음 Animal의 인스턴스인 프로토타입 객체에서 이를 찾으세요. 있는 경우 해당 값을 이 객체의 기능 속성에 직접 삽입하세요.

console.log(kissy.features); 위와 동일합니다. Kissy 인스턴스에서 사용할 수 없는 경우 프로토타입에서 찾아보세요.

프로토타입에 있는 경우에는 직접 반환됩니다. 단, 이 프로토타입 객체의 기능 속성 값이 변경되었다는 점에 유의하세요.

【관련 권장 사항: javascript 학습 튜토리얼】

위 내용은 자바스크립트에서 상속을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!