patternjavascriptMinor
Emulating class extending
Viewed 0 times
emulatingclassextending
Problem
I'm using the following piece of JavaScript to emulate class extending. Is this a valid way to go or does it have some drawbacks which should definitely be fixed?
Than this is used as a concrete validator implementation
```
// Inherit from validator
var VatCheck = Validator;
/**
* Validate vat number
*
* @note only format is checked, not whether the number is in use
*
* @returns {Boolean}
*/
VatCheck.prototype.isValid = function () {
"use strict";
var input = window.document.getElementById(this.inputId);
// Check number by using Vat.js
return
var Validator = function (inputId) {
"use strict";
var self = this;
self.inputId = inputId;
window.document.getElementById(inputId).onblur = function () {
self.check();
};
};
Validator.prototype.inputId = '';
/**
* Validator fails by default
*
* @returns {Boolean}
*/
Validator.prototype.isValid = function () {
"use strict";
return false;
};
/**
* Check whether the input is valid
*
* @returns {Validator}
*/
Validator.prototype.check = function () {
"use strict";
// Check and mark whether validation passes
if (!this.isValid()) {
this.markInvalid();
} else {
this.markValid();
}
return this;
};
/**
* Mark the input as valid
*
* @returns {Validator}
*/
Validator.prototype.markValid = function () {
"use strict";
var input = window.document.getElementById(this.inputId);
// Remove "error" class name
input.className = input.className.replace(
/(?:^|\s)error(?!\S)/g,
''
);
return this;
};
/**
* Mark input as invalid
*
* @returns {Validator}
*/
Validator.prototype.markInvalid = function () {
"use strict";
var input = window.document.getElementById(this.inputId);
// Add "error" class when it is not set already
if (!input.className.match(/(?:^|\s)error(?!\S)/g)) {
input.className += ' error';
}
return this;
};Than this is used as a concrete validator implementation
```
// Inherit from validator
var VatCheck = Validator;
/**
* Validate vat number
*
* @note only format is checked, not whether the number is in use
*
* @returns {Boolean}
*/
VatCheck.prototype.isValid = function () {
"use strict";
var input = window.document.getElementById(this.inputId);
// Check number by using Vat.js
return
Solution
There is one bad problem in the code that can be answered by the basis of the pattern presented here:
This does not inherit anything, instead it causes
If you repeat this pattern again, the end result is that all validators have their
Instead you need to do
// Inherit from validator
var VatCheck = Validator;This does not inherit anything, instead it causes
VatCheck name to point to the exact same object (constructor function) as the Validator. Thus all you are doing is overwriting Validator.prototype.isValid (changing the base implementation), and aliasing the base implementation by different names.If you repeat this pattern again, the end result is that all validators have their
isValid check method do the action of the last validator type that you define.Instead you need to do
VatCheck.prototype = new Validator() but then you need to also redo the constructor.Code Snippets
// Inherit from validator
var VatCheck = Validator;Context
StackExchange Code Review Q#79071, answer score: 2
Revisions (0)
No revisions yet.