HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Emulating class extending

Submitted by: @import:stackexchange-codereview··
0
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?

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:

// 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.