ES6 Classes ability to perform polymorphism

问题

I am trying to emulate polymorphism through ES6 Classes, in order to be able to better understand this theory.

Concept is clear (designing objects to share behaviors and to be able to override shared behaviors with specific ones) but I am afraid my code above is not a valid polymorphism example.

Due to my lack of experience, I appreciate if you answer these questions in a comprehensive way:

The fact that both Classes have an equally named method, and that instances made from each Class get access correctly to their respective methods, makes this a polymorphic example?
In case this does not emulate polimorphism, what changes should be done in the code for it?
I've tried removing the Employee.prototype = new Person(); line, and it still works. This is why I am afraid I'm not getting this concept.

class Person {
  constructor (name, age) {
    this._name = name;
    this._age = age;
  }
}

Person.prototype.showInfo = function(){
  return "Im " + this._name + ", aged " + this._age;
};


class Employee {
  constructor (name, age, sex) {
    this._name = name;
    this._age = age;
    this._sex = sex;
  }
}

Employee.prototype = new Person();

Employee.prototype.showInfo = function(){
  return "Im " + this._sex + ", named " + this._name + ", aged " + this._age;
};


var myPerson = new Person('Jon', 20);
var myEmployee = new Employee('Doe', 10, 'men');

document.write(myPerson.showInfo() + "<br><br>");   // Im Jon, aged 20
document.write(myEmployee.showInfo() + "<br><br>"); // Im men, named Doe, aged 10

回答1:

Every JavaScript object has an internal "prototype" property, often called [[prototype]], which points to the object from which it directly inherits.

Every JavaScript function [object] has a property prototype, which is initialized with an [nearly] empty object. When you create a new instance of this function by calling it as a constructor, the [[prototype]] of that new object will point to the constructor's prototype object.

So, when you write this var myPerson = new Person('Jon', 20);,you have the method showInfo because you have this

Person.prototype.showInfo = function(){
    return "Im " + this._name + ", aged " + this._age;
};

With ES6 if you want to see the polymorphism you could do that :

class Person {
    constructor (name, age) {
        this._name = name;
        this._age = age;
    }
        
    showInfo () {
        return "Im " + this._name + ", aged " + this._age;
    }
}

class Employee extends Person {
    constructor (name, age, sex) {
        super(name,age);
        this._sex = sex;
    }
        
    showInfo(){
        return "Im " + this._sex + ", named " + this._name + ", aged " + this._age;
    }
}

var myPerson = new Person('Jon', 20);
var myEmployee = new Employee('Doe', 10, 'men');

document.write(myPerson.showInfo() + "<br><br>");   // Im Jon, aged 20
document.write(myEmployee.showInfo() + "<br><br>"); // Im men, named Doe, aged 10

回答2:

You are mixing ES5 and ES6. Also, you simply created two classes. Employee does not really inherit from Person. The code you want should look like this:

class Person {
    constructor(name, age) {
        this._name = name;
        this._age = age;
    }

    showInfo() {
        return `I'm ${this._name}, aged ${this._age}.`;
    }
}

class Employee extends Person {
    constructor(name, age, sex) {
        super(name, age);
        this._sex = sex;
    }

    showInfo() {
        return `I'm a ${this._sex} named ${this._name}, aged ${this._age}.`;
    }
}

const alice = new Person("Alice", 20);
const bob = new Employee("Bob", 25, "male");

console.log(alice.showInfo());
console.log(bob.showInfo());

So, here's a quick recap of what's changed.

First off, no need to assign a prototype anymore. Instead, you extend the parent class to create a child class. You can call the parent constructor using the super() call in the child constructor - this will set the properties that are handled by the parent ctor. Note that we don't set name or age in the child ctor anymore! This is why your example still worked after removing the line setting the child prototype: you set the properties manually anyway.

Methods are defined inside the class; no need to use the prototype. You override the method in the child class by just declaring it there.

Should you need any additional clarification, please ask in the comment.

来源：https://stackoverflow.com/questions/44391149/es6-classes-ability-to-perform-polymorphism

标签

javascript

ecmascript-6

polymorphism