찾다

집  >  기사  >  웹 프론트엔드  >  자바스크립트에서 상속을 구현하는 방법은 무엇입니까?

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

青灯夜游
青灯夜游원래의
2021-06-22 16:21:109589검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：JavaScript는 네트워크 프로토콜입니까?다음 기사：JavaScript는 네트워크 프로토콜입니까?

관련 기사

더보기