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