mardi 26 janvier 2016

Redefining methods in JavaScript

First of all, sorry for my broken English - I am not a native speaker.

Now, on to the problem:

I am learning JavaScript design patterns and while trying to implement a bit more complex example of decorator pattern I realized that I cannot modify methods defined in a constructor, but I can modify methods defined with a prototype.

Can someone please explain to me why is this the case, or if I missed something really important along the way.

This is the code of the pattern:

// Basic constructor with one parameter and test method
var ExampleOne = function (param1) {
  this.param1 = param1;
  this.test = function () {
    console.log('Test One');
  }
}
// Adding logParam1 method using prototype
ExampleOne.prototype.logParam1 = function () {
  console.log(this.param1);
}
// Adding testTwo method using prototype
ExampleOne.prototype.testTwo = function () {
  console.log('Prototype Test');
}
// Creating instance of ExampleOne
var example = new ExampleOne('Parameter One');
// Simple decoration
example.decorate = function() {
  console.log('Decoration One');
}
// More complicated decoration
var ExampleTwo = function(param1, param2) {
  ExampleOne.call(this, param1);
  this.param2 = param2;
}
// Creating separate prototype from original one
ExampleTwo.prototype = Object.create(ExampleOne.prototype);
// Trying to change test (defined in constructor)
ExampleTwo.prototype.test = function () {
  console.log('Test Two');
}
// Trying to change logParam1 (defined using prototype)
ExampleTwo.prototype.logParam1 = function () {
  console.log(this.param1 + ' ' + this.param2);
}
// Creating instance
var examplee = new ExampleTwo('Test Two', 'Decoration Two');

// Testing
example.test(); // Expecting: Test One, Returns: Test One
example.testTwo(); // Expecting: Prototype Test, Returns: Prototype Test
example.logParam1(); // Expecting: Parameter One, Returns: Parameter One
example.decorate(); // Expecting: Decoration One, Returns: Decoration One

examplee.test(); // Expecting: Test Two, Return: Test One << WHY?
examplee.testTwo(); // Expecting: Prototype Test, Returns: Prototype Test
examplee.logParam1(); // Expecting: Test Two Decoration Two, Returns: Test Two Decoration Two
// examplee.decorate(); // Expecting: error, Returns: error

Thnx.

Aucun commentaire:

Enregistrer un commentaire