다양한 JavaScript 상속 방법과 그 장점과 단점에 대한 자세한 소개

이 글은 주로 JavaScript상속에 대한 심층적 이해의 다양한 방법과 장단점을 소개합니다. 관심 있는 친구들은 참고할 만한 가치가 있습니다.

앞서 작성

본 글에서는 자바스크립트의 다양한 상속 방식과 장단점을 설명하고 있습니다.

참고:

은 "JavaScript 심층

객체 생성"과 동일하며 노트에 더 가깝습니다.

안녕, 다시 한 번 한숨을 쉬겠습니다. "JavaScript Advanced 프로그래밍"은 정말 잘 작성되었습니다!

1. 프로토타입 체인 상속

function Parent () {
  this.name = 'kevin';
}

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

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

console.log(child1.getName()) // kevin

문제:

1.

속성을 참조합니다. 모든 인스턴스에서 공유됩니다. 예:

function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {

}

Child.prototype = new Parent();

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy", "yayu"]

2. Child 인스턴스를 생성할 때 매개변수를 Parent

대용할 수 없습니다.

(클래식 상속)

function Parent () {
  this.names = ['kevin', 'daisy'];
}

function Child () {
  Parent.call(this);
}

var child1 = new Child();

child1.names.push('yayu');

console.log(child1.names); // ["kevin", "daisy", "yayu"]

var child2 = new Child();

console.log(child2.names); // ["kevin", "daisy"]

장점:

1. 모든 인스턴스에서 참조 유형 속성을 공유하지 않습니다.

2. in Child의 Parent에 매개변수 전달

예:

function Parent (name) {
  this.name = name;
}

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

var child1 = new Child('kevin');

console.log(child1.name); // kevin

var child2 = new Child('daisy');

console.log(child2.name); // daisy

단점:

메서드는 모두 생성자에 정의되며 인스턴스가 생성될 때마다 메서드가 생성됩니다. 생성되었습니다.

3. 조합 상속

프로토타입 체인 상속과 클래식 상속은 완벽한 조합입니다.

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

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

function Child (name, age) {

  Parent.call(this, name);
  
  this.age = age;

}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

child1.colors.push('black');

console.log(child1.name); // kevin
console.log(child1.age); // 18
console.log(child1.colors); // ["red", "blue", "green", "black"]

var child2 = new Child('daisy', '20');

console.log(child2.name); // daisy
console.log(child2.age); // 20
console.log(child2.colors); // ["red", "blue", "green"]

장점: 프로토타입 체인 상속과 생성자의 장점을 결합한 것으로, JavaScript에서 가장 일반적으로 사용되는 상속 패턴입니다.

4. 프로토타입 상속

function createObj(o) {
  function F(){}
  F.prototype = o;
  return new F();
}

는 ES5 Object

.create의 시뮬레이션된 구현으로, 수신 객체를 생성된 객체의 프로토타입으로 사용합니다. .

단점:

참조 유형이 포함된 속성 값은 항상 해당 값을 공유하며 이는 프로토타입 체인 상속과 동일합니다.

var person = {
  name: 'kevin',
  friends: ['daisy', 'kelly']
}

var person1 = createObj(person);
var person2 = createObj(person);

person1.name = 'person1';
console.log(person2.name); // kevin

person1.firends.push('taylor');
console.log(person2.friends); // ["daisy", "kelly", "taylor"]

참고:

값을 수정한 후에도

값이 변경되지 않은 이유는

과 person1.name가 독립적인 이름 값을 갖기 때문이 아니라 person2.name 때문입니다. .person1프로토타입의 이름 값이 수정되는 것이 아니라 이름 값이 추가됩니다. person2person1.name = 'person1'person15. 기생 상속

상속 프로세스를 캡슐화하는 데만 사용되는 함수를 만듭니다. 이 함수는 마지막으로 객체를 내부적으로 향상시킵니다. 객체가 반환됩니다.

function createObj (o) {
  var clone = object.create(o);
  clone.sayName = function () {
    console.log('hi');
  }
  return clone;
}

단점: 차용된 생성자 패턴과 마찬가지로 객체가 생성될 때마다 메서드가 생성됩니다.

6. 기생 결합 상속

모두의 읽기 편의를 위해 결합 상속 코드는 여기에서 반복됩니다:

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

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

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

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

console.log(child1)

Combined 상속 가장 큰 단점은 부모 생성자가 두 번 호출된다는 것입니다.

하위 유형 인스턴스의 프로토타입을 설정할 때 한 번:

Child.prototype = new Parent();

하위 유형 인스턴스를 만들 때 한 번:

var child1 = new Child('kevin', '18');

new의 시뮬레이션 구현을 기억하세요. 실제로 여기 문장에서, 다음을 실행합니다:

Parent.call(this, name);

여기서 Parent 생성자를 다시 호출합니다.

따라서 이 예에서 child1 객체를 인쇄하면 Child.prototype과 child1 모두 colors라는 속성이 있고 속성 값은 ['red', 'blue', ' 녹색'] .

그럼 이번에는 어떻게 계속 개선하고 반복 통화를 피할 수 있을까요?

Child.prototype = new Parent()를 사용하지 않고 Child.prototype이 Parent.prototype에 간접적으로 액세스하도록 허용하면 어떻게 되나요?

구현 방법을 살펴보겠습니다:

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

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

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

// 关键的三步
var F = function () {};

F.prototype = Parent.prototype;

Child.prototype = new F();


var child1 = new Child('kevin', '18');

console.log(child1);

마지막으로 이 상속 방법을 캡슐화해 보겠습니다.

function object(o) {
  function F() {}
  F.prototype = o;
  return new F();
}

function prototype(child, parent) {
  var prototype = object(parent.prototype);
  prototype.constructor = child;
  child.prototype = prototype;
}

// 当我们使用的时候：
prototype(Child, Parent);

"JavaScript Advanced 프로그래밍"에서 기생 조합 상속에 대한 칭찬을 인용하자면:

이 방법의 높은 효율성은 Parent 생성자를 한 번만 호출하므로 Parent.prototype에 불필요하고 중복되는 속성이 생성되는 것을 방지한다는 점을 반영합니다. 동시에 프로토타입 체인은 변경되지 않은 상태로 유지되므로, instanceof 및 isPrototypeOf는 계속해서 정상적으로 사용될 수 있습니다. 개발자는 일반적으로 기생 구성 상속이 참조 유형에 대한 가장 이상적인 상속 패러다임이라고 믿습니다.

위 내용은 다양한 JavaScript 상속 방법과 그 장점과 단점에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!