자바스크립트 객체 상속_자바스크립트 기술 이해하기

더 깊은 연구부터 시작해 보겠습니다. JavaScript 객체 상속이란 무엇입니까?

예를 들어 "동물" 개체에 대한 생성자가 있습니다.

  function animal() {
    this.type = '动物';
  }

"cat" 개체에 대한 생성자도 있습니다.

  function cat(name,color) {
    this.name = name;
    this.color = color;
  }

우리는 고양이도 동물이라는 것을 알고 있습니다. 이 고양이 객체가 동물 객체의 속성을 상속받고 싶다면 어떻게 해야 할까요?

생성자 바인딩
생성자 바인딩을 사용하는 것이 가장 간단한 방법입니다. 호출 또는 적용을 사용하여 상위 개체를 자체 개체에 바인딩하면 됩니다.

 function cat(name,color) {
    animal.apply(this,arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new cat("haha", 'red');
  console.log(cat1.type); //动物

그러나 이 방법은 비교적 드뭅니다.

상속 복사
부모 개체의 모든 속성과 메서드를 자식 개체에 복사하면 상속도 가능합니다.

  function extend(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;   //桥梁作用
　　}

사용방법:

 extend(cat, animal);
  var cat1 = new cat("haha","red");
  alert(cat1.type);   // 动物

프로토타입 상속(프로토타입)
위의 직접 바인딩에 비해 프로토타입 상속 방식이 더 일반적입니다. 프로토타입에 대해서는 제가 직접 간략하게 정리했습니다.

각 함수에는 객체에 대한 참조인 프로토타입 속성이 있습니다. new 키워드를 사용하여 새 인스턴스를 생성하면 인스턴스 객체는 프로토타입 객체의 속성과 메서드를 상속받습니다.

즉, "cat" 생성자의 프로토타입 속성이 "animal" 인스턴스를 가리키는 경우 "cat" 개체 인스턴스가 생성되면 "animal" 개체의 속성과 메서드가 상속됩니다.

상속된 인스턴스

 cat.prototype = new animal();
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.constructor == cat);  //true
  console.log(cat1.type); // 动物

1. 코드의 첫 번째 줄에서는 cat 함수의 프로토타입 객체가 동물 객체(animal의 유형 속성을 포함함)의 인스턴스를 가리킵니다.

2. 두 번째 코드 줄은 무엇을 의미하나요?

1) 먼저 이 코드 줄을 추가하지 않은 경우

cat.prototype = 새 동물();
console.log(cat.prototype.constructor == 동물); //true
즉, 각 프로토타입 객체에는 실제로 해당 생성자를 가리키는 생성자 속성이 있습니다.

2) 아래 코드를 살펴보겠습니다

 cat.prototype = new animal();
  var cat1 = new cat("haha", 'red');
  console.log(cat1.constructor == animal);  //true

위에서 보면 cat1 인스턴스의 생성자가 동물이므로 분명히 잘못된 것입니다. . . cat1은 분명히 new cat()에 의해 생성되므로 수동으로 수정해야 합니다. cat.prototype 객체의 생성자 값이 cat으로 변경됩니다.

3) 그래서 우리가 주의해야 할 점은 프로토타입 객체를 교체할 경우 프로토타입 객체의 생성자 속성을 수동으로 수정해야 한다는 것입니다.

o.prototype = {};
o.prototype.constructor = o;
프로토타입 직접 상속
동물 객체에서는 불변 속성을 Animal.prototype에 직접 작성할 수 있습니다. 그런 다음 cat.prototype이 Animal.prototype을 직접 가리키도록 하여 상속을 달성합니다.

이제 먼저 동물 개체를 다음과 같이 다시 작성합니다.

  function animal() {
  }
  animal.prototype.type = '动物';

그런 다음 상속을 구현합니다.

 cat.prototype = animal.prototype;
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

이전 방법에 비해 이 방법이 더 효율적이고(동물 인스턴스가 생성되지 않음) 공간을 절약합니다. 하지만 이것이 옳은 일일까요? 답변이 잘못되었습니다. 계속 찾아보겠습니다.

고양이.프로토타입 = 동물.프로토타입;
이 코드 줄은 cat.prototype과animal.prototype이 동일한 개체를 가리키도록 만듭니다. 따라서 cat.prototype의 특정 속성이 변경되면 해당 내용이animal.prototype에 반영됩니다. 이는 분명히 우리가 보고 싶은 내용이 아닙니다.

예를 들어 다음을 실행하면

console.log(animal.prototype.constructor == 동물) //false
결과가 거짓인데 왜죠? cat.prototype.constructor = cat; 이 줄은 Animal.prototype의 생성자 속성도 변경합니다.

빈 개체를 중개자로 사용

  var F = function(){};
  F.prototype = animal.prototype;
  cat.prototype = new F();
  cat.prototype.constructor = cat;

위의 두 가지 방법을 결합하면 F는 빈 객체이므로 메모리를 거의 차지하지 않습니다. 이때, cat의 프로토타입 객체를 수정해도 동물의 프로토타입 객체에는 영향을 미치지 않습니다.

console.log(animal.prototype.constructor == 동물); // true
그런 다음 위의 방법을 캡슐화합니다.

  function extend(Child, Parent) {
　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

사용시 방법은 다음과 같습니다.

 extend(cat,animal);
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Child.uber = Parent.prototype; 이 코드 줄은 브리지 역할을 하여 하위 개체의 uber 속성이 상위 개체의 프로토타입 속성을 직접 가리킬 수 있도록 합니다. 이는 uber라는 채널을 여는 것과 같습니다. 자체 개체를 사용하면 하위 개체의 인스턴스가 상위 개체의 모든 속성과 메서드를 사용할 수 있습니다.

이상은 JavaScript 객체 상속에 대한 저의 이해입니다. 읽어주셔서 감사합니다.