Lingquan | Blog

Inheritance in Javascript

Word count: 458Reading time: 2 min
2018/10/21 Share

Inheritance in JavaScript

JavaScript is an object-based language based on prototypes, rather than being class-based.
some sentence need to keep in mind

  • Every object has a proto object property (except Object);
  • every function has a prototype object property.
  • Because an object has a single associated prototype, JavaScript cannot dynamically inherit from more than one prototype chain.
  • In JavaScript, you can have a constructor function call more than one other constructor function within it. This gives the illusion of multiple inheritance.

1. based on example of MDN



  • Two ways to implement inheritance based on MDN documents
    1. use Object.create(): three steps
    2. use new Father: 1 step, but have limitations
      see code below:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

function Employee(name, dept) {
this.name = name || '';
this.dept = dept || 'general';
}

// the first way to inherit a prototype
function Manager() {
Employee.call(this);
this.reports = [];
}
Manager.prototype = Object.create(Employee.prototype);
Manager.prototype.constructor = Manager;

function WorkerBee() {
Employee.call(this);
this.projects = [];
}
WorkerBee.prototype = Object.create(Employee.prototype);
WorkerBee.prototype.constructor = WorkerBee;

// anther qucik way to inherit
// but in this case:
// If we want to change the value of an object property at run time and have the new value be inherited by all descendants of the object, you cannot define the property in the object's constructor function. Instead, you add it to the constructor's associated prototype.

function WorkerBee(projs) {

this.projects = projs || [];
}
WorkerBee.prototype = new Employee;

function Engineer() {
WorkerBee.call(this);
this.dept = 'engineering';
this.machine = '';
}
Engineer.prototype = Object.create(WorkerBee.prototype)
Engineer.prototype.constructor = Engineer;

//have the constructor add more properties by directly calling the constructor function for an object higher in the prototype chain
function Engineer(name, projs, mach) {
WorkerBee.call(this, name, 'engineering', projs);
this.machine = mach || '';
}

2. based on liaoxuefeng

  • a universal way to implement inheritance in javaScript before ES6

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    function inherits(Child, Parent) {
    var F = function () {};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    }

    function Student(props) {
    this.name = props.name || 'Unnamed';
    }

    Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
    }

    function PrimaryStudent(props) {
    Student.call(this, props);
    this.grade = props.grade || 1;
    }

    // 实现原型继承链:
    inherits(PrimaryStudent, Student);

    // 绑定其他方法到PrimaryStudent原型:
    PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
    };
  • after ES6, we use the following codes

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    class Student {
    constructor(name) {
    this.name = name;
    }

    hello() {
    alert('Hello, ' + this.name + '!');
    }
    }

    class PrimaryStudent extends Student {
    constructor(name, grade) {
    super(name); // 记得用super调用父类的构造方法!
    this.grade = grade;
    }

    myGrade() {
    alert('I am at grade ' + this.grade);
    }
    }
CATALOG
  1. 1. Inheritance in JavaScript
    1. 1.0.1. 1. based on example of MDN
    2. 1.0.2. 2. based on liaoxuefeng