Наследование и цепочка прототипов в классах ES6 - PullRequest
Новая
       7

Наследование и цепочка прототипов в классах ES6

0 голосов
/ 26 ноября 2018

У меня есть следующие классы 

class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}



class Square extends Polygon {
   constructor(sideLength) {
      super(sideLength, sideLength);
   }

   area() {
      return this.height * this.width;
   }

   sideLength(newLength) {
      this.height = newLength;
      this.width = newLength;
   }
}

, и я создаю экземпляр класса Square

var square = new Square(2);

Я ожидал найти квадратный объект (непосредственно вэто и не в его прототипе) методы area и sideLength.Иными словами, я нахожу их в объекте __proto__.result

Я не понимаю, почему это происходит.Не могли бы вы «перевести» этот же код, используя конструктор, а не класс?Может быть, мне будет легче получить точку зрения таким образом ...

1 Ответ

0 голосов
/ 26 ноября 2018

Метод, определенный в классе, преобразуется в метод protoType, чтобы все экземпляры класса совместно использовали один и тот же метод.Версия вашего компонента с функциональным компонентом будет 

function Polygon(height, width) {
    this.height = height;
    this.width = width;
}


function Square(sideLength){
   Polygon.call(this, sideLength);
}

Square.prototype.area = function() {
   return this.height * this.width;
}

Square.prototype.sideLength(newLength) {
  this.height = newLength;
  this.width = newLength;
}

Однако, если вы определите функцию в конструкторе класса или используете arrow functions, они будут принадлежать экземпляру класса, например 

class Polygon {
   constructor(height, width) {
      this.height = height;
      this.width = width;
   }
}



class Square extends Polygon {
   constructor(sideLength) {
      super(sideLength, sideLength);
      this.getArea = function() {
         return this.height * this.width;
      }
      this.sideLengthWithBind = this.sideLength.bind(this);
   }

   area =() =>{
      return this.height * this.width;
   }

   sideLength(newLength) {
      this.height = newLength;
      this.width = newLength;
   }
}

const square = new Square(5);

console.log(square);
...