CODEWITHSUNDEEP
javascript
Ranjan Sarma
Ranjan Sarma

Reputation: 1595

Javascript - Overriding property (not methods) inside an Object

Let us explain the question with an example. I have a text box. The textbox (every textbox) has a property called 'value'. I want to over ride that textbox.value and comeup with and new thing. When the text in textbox is 'ranjan' then the textbox.VALUE property returns 'ranjan'. Now I want to thus overwrite this so that when you type textbox.VALUE you get a different thing say for example, RaNjAn or say, Mr. Ranjan or whatever.

We can over ride methods using Object.PROTOTYPE property. But how can we do it for non-function objects inside object for example the 'value' property in this case.

If i need to make the question more clear, please mention.

Regards - Ranjan.

Upvotes: 6

Views: 14599

Answers (4)

Ruby Tunaley
Ruby Tunaley

Reputation: 371

If the property you're trying to override can also be represented by an HTML attribute (e.g. an input's value), then you can use getAttribute and setAttribute.

Object.defineProperty(myInputElement, 'value', {
    get: function () {
        return myInputElement.getAttribute('value');
    },
    set: function (value) {
        myInputElement.setAttribute('value', value);
    }
});

Note, however, that this override itself cannot be overridden without re-implementing it.

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

You can define custom properties for your element using Object.defineProperty

If you have a case where you need to get the value of an element as Mr. <value> for example, then this approach will be useful. Overriding standard properties may not be such a good idea.

Demo: http://jsfiddle.net/zvCGw/2/

Code:

var foo = document.getElementById('foo');

Object.defineProperty(foo, "xvalue", {
    get: function() {
        return 'Mr. ' + foo.value;
    },
    set: function(_newValue) {
        foo.value = _newValue;
    }
});

foo.xvalue = 'Hello';

alert(foo.xvalue);

Upvotes: 8

David M&#229;rtensson
David M&#229;rtensson

Reputation: 7600

You can redeclare value but it will do no good ;)

This example would do that if test is a textbox

var input = document.getElementById("test");

Object.defineProperty(input, "value", {
    get : function () {
        return "'" + this["value"] + "'";
    },
    set : function (val) {
        this["value"] = val;
    }
});

input.value = "Hello World";
alert(input.value);

Unfortunately, "this.value" will reference the getter causing infinite recursion.

Once redefined, the original value will no longer exist so you will have crippled the element object.

At least as far as I have been able to test.

Upvotes: 1

danwellman
danwellman

Reputation: 9253

What you are trying to do is called type augmentation. In javscript there are types of things, such as the object type, array type, etc.

You can use the prototype to augment these built in types, for example, adding a new method that can be called on any object that is of the type array:

Array.prototype.myNewMethod = function() {
    //the method logic
}

Then you can call your method on any array:

[0,1,2].myNewMethod();

There is no INPUT type in JavaScript, DOM elements are classed as Objects. But you could jerry-rig something together that kind of does what you need, like this

Object.prototype.changeValue = function(el) {
    if (el.tagName === "INPUT") {
        return "Mr " + el.value;
    }
}


var testEl = document.getElementById("test");
document.write(testEl.changeValue(testEl))

Used in conjunction with this textbox:

<input id="test" value="Dan" />

You would then get the output 'Mr Dan'

However, this is not great, it's just to illustrate the point and is just something to get you started...

I made a fiddle so you can play around with it

Upvotes: 1

Related Questions