Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This is a bit improved version of Jimmy's example. Firstly, I'd add an extra function that helps you to define prototype chain more conveniently. You could also use <code>Object.create()</code>, but that is not yet supported in all browsers, so this function should be a bit more bulletproof:</p> <pre><code>// A convenient function to define prototype chain function inheritPrototype(child, parent) { function F(){} F.prototype = parent.prototype; child.prototype = new F(); // set the constructor back to the original, explained later child.prototype.constructor = child; } </code></pre> <p>Then define objects. Notice the extra function <code>setName</code> which enables us to set the name of the Person. (nevermind that in JS there's <strong>usually</strong> no need for getters/setters). Also notice the extra <code>inheritPrototype</code> call after Pirate function has been defined.</p> <pre><code>function Person(name) { this.name = name; } Person.prototype.say = function (message) { return this.name + ": " + message; }; Person.prototype.setName = function(name) { this.name = name; }; function Pirate(name) { this._super = Person.prototype; this._super.constructor.apply(this, arguments); } inheritPrototype(Pirate, Person); Pirate.prototype.say = function (message) { return this._super.say.apply(this, arguments) + ", yarr!"; }; var john = new Pirate("Long John"); john.say("ahoy matey"); </code></pre> <p>This style enables you to automatically call parent's functions, and you don't have to override each and every one of them, if they are the same as their parents'. Also this doesn't stop you from redefining functions that already exist for the parent (in this case <code>say</code> is overridden). And remember, all functions are 1-way, meaning that if you override a function in a children, then parent's function remains unchanged. An example:</p> <pre><code>// Should result in John "The Pirate" Long: ahoy matey, yarr! // instead of how it was defined in Person john.setName('John "The Pirate" Long'); john.say('ahoy matey'); // Notice that even though Pirate redefined say function, it // still works as defined in Person, if it's called on a Person object var president = new Person("Obama"); president.say('Vote for me!'); </code></pre> <p>Also using this style allows you to check object types, if the <code>child.prototype.construtor</code> was redefined to child (replacing the prototype sets it to parent's constructor function). John is both Person and Pirate (because Pirate inherits from Person). An example:</p> <pre><code>john instanceof Person &gt; true john instanceof Pirate &gt; true </code></pre> <p>Since president is directly a Person object and not a Pirate, the results would be the following:</p> <pre><code>president instanceof Person &gt; true president instanceof Pirate &gt; false </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload