Наследование в Javascript

• 04, 17, 2016
•  bullgare
•  javascript
• No Comments.

Рекомендация ECMAScript5

Минус — вызывается конструктор родителя раньше времени.
https://jsbin.com/zoxude/1/edit?js,output

var Animal = function () {
  this.type = 'animal';
};
Animal.prototype.getType = function () {
  return this.type;
};
Animal.prototype.getName = function () {
  return 'My name is ' + this.name;
};

var Turtle = function () {
  
};
Turtle.prototype = new Animal();

var NinjaTurtle = function (name) {
  this.name = name;
};
NinjaTurtle.prototype = new Turtle();

var donatello = new NinjaTurtle('Donatello');

console.log(donatello.getType());
console.log(donatello.type);
console.log(donatello.name);
console.log(donatello.getName());

Через временный конструктор

https://jsbin.com/desuli/1/edit?js,output
Родительский конструктор не вызывается вообще.
При этом наследуется только то, что есть в прототипах.
По-хорошему нужно в конструкторе вызвать родительский конструктор.

function extend(child, parent) {
  var f = function () {};
  f.prototype = parent.prototype;
  child.prototype = new f();
  child.prototype.constructor = child;
}

var Animal = function () {
  this.selfType = 'self_animal';
};
Animal.prototype.type = 'animal';
Animal.prototype.getType = function () {
  return this.type;
};
Animal.prototype.getName = function () {
  return 'My name is ' + this.name;
};

var Turtle = function () {
  
};
extend(Turtle, Animal);

var NinjaTurtle = function (name) {
  this.name = name;
};
extend(NinjaTurtle, Turtle);

var donatello = new NinjaTurtle('Donatello');

console.log(donatello.getType());
console.log(donatello.type);
console.log(donatello.selfType);
console.log(donatello.name);
console.log(donatello.getName());

ES2015

Код на babeljs.io

class Animal {
  constructor() {
    this.type = 'animal';
  }
  getType() {
    return this.type;
  }
  getName() {
    return this.name;
  }
}

class Turtle extends Animal {
  constructor() {
    super();
    this.type = 'animal';
  }
}

class NinjaTurtle extends Turtle {
  constructor(name) {
    super();
    this.name = name;
  }
}

let donatello = new NinjaTurtle('Donatello');

console.log(donatello.getType());
console.log(donatello.type);
console.log(donatello.name);
console.log(donatello.getName());

Результат компиляции Babel-ом:

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Animal = function () {
  function Animal() {
    _classCallCheck(this, Animal);

    this.type = 'animal';
  }

  _createClass(Animal, [{
    key: 'getType',
    value: function getType() {
      return this.type;
    }
  }, {
    key: 'getName',
    value: function getName() {
      return this.name;
    }
  }]);

  return Animal;
}();

var Turtle = function (_Animal) {
  _inherits(Turtle, _Animal);

  function Turtle() {
    _classCallCheck(this, Turtle);

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Turtle).call(this));

    _this.type = 'animal';
    return _this;
  }

  return Turtle;
}(Animal);

var NinjaTurtle = function (_Turtle) {
  _inherits(NinjaTurtle, _Turtle);

  function NinjaTurtle(name) {
    _classCallCheck(this, NinjaTurtle);

    var _this2 = _possibleConstructorReturn(this, Object.getPrototypeOf(NinjaTurtle).call(this));

    _this2.name = name;
    return _this2;
  }

  return NinjaTurtle;
}(Turtle);

var donatello = new NinjaTurtle('Donatello');

console.log(donatello.getType());
console.log(donatello.type);
console.log(donatello.name);
console.log(donatello.getName());