Prototype Inheritance in Javascript

xxxx included in Posts

2020-08-21 483 words 3 minutes

Contents

Prototype

Foo.prototype.constructor === Foo; // true
f1.__proto__ === Foo.prototype; // true

f1.constructor === Foo; // true

f1 don’t have constructor, however depends on prototype chain engine will search f1.__proto__. This is line is equivalent to Foo.prototype.constructor === Foo

f1 instantiate a Foo:

f1.__proto__link Foo.prototype
f1 have a constructor which is Foo since Foo.prototype have a constructor

Object.create()

Syntax is Object.create(proto[, propertiesObject])

var newObj = Object.create(obj);
newObj.__proto__ == obj; // true

new

When js running this line:

let person1 = new Person(...);

new actually doing:

Creates a blank, plain JavaScript object person1 = {};
Links (sets the constructor of) this object to another object; person1.constructor is Person
Passes the newly created object from Step 1 as the this context; this -> person1
Returns this if the function doesn’t return an object.

Prototype Chain

This is object example. But Object is NOT we used here

Person = {
  name: 'text',
  age: 12,
};

const p1 = {};
p1.__proto__ = Person; // it is wrong

1

function Person(name, age) {
  this.name = name;
  this.age = age;
}

console.log(Person.prototype); // {} (empty obj)
console.log(Person.prototype.constructor === Person); // true

2

Just for understanding. This is NOT right way

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = Object.create(Person);
console.log(p1.__proto__ === Person); // true

new instance should use function Prototype as chain

This is the right way

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = Object.create(Person.prototype); // build chain
console.log(p1.__proto__ === Person.prototype); // true

also you could link manually

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = {};
p1.__proto__ = Person.prototype; // link chain manually

p1.constructor('p1', 30);

console.log(p1.age);

How to initialized

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const p1 = Object.create(Person.prototype);
Person.apply(p1, ['p1', 31]);

const p2 = Object.create(Person.prototype);
p2.constructor('p2', 32);
console.log(p1); // Person { name: 'p1', age: 31 }
console.log(p2); // Person { name: 'p2', age: 32 }

If you want a static function

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.print = function () {
  console.log(this.name, this.age);
};

const p1 = Object.create(Person.prototype);
const p2 = Object.create(Person.prototype);
p1.constructor('p1', 31);
p2.constructor('p2', 32);

p1.print();
p2.print();

ES5 inheritance

function SuperType(name) {
  this.name = name;
  this.colors = ['red', 'blue', 'green'];
}
SuperType.prototype.sayName = function () {
  alert(this.name);
};
function SubType(name, age) {
  SuperType.call(this, name);
  this.age = age;
}
SubType.prototype = Object.create(SuperType.prototype, {
  constructor: {
    value: SubType,
    enumerable: false,
    writable: true,
    configurable: true,
  },
});
SubType.prototype.sayAge = function () {
  alert(this.age);
};
let instance = new SubType('gim', '17');
instance.sayName(); // 'gim'
instance.sayAge(); // '17'

ES6 inheritance

class SuperType {
  constructor(name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
  }
  sayName() {
    alert(this.name);
  }
}
class SubType extends SuperType {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  sayAge() {
    alert(this.age);
  }
}
let instance = new SubType('gim', '17');
instance.sayName(); // 'gim'
instance.sayAge(); // '17'