Javascript - overriding a property (not methods) inside an object

Question

Let us explain the question with an example. I have a text box. A text field (each text field) has a value property. I want to go get this textbox.value and come up with a new thing. When the text in the text field is "ranjan", the textbox.value property returns "ranjan". Now I want to rewrite this, so that when you type textbox.value you get another thing, for example, say RaNjAn or say Mr. Ranjan or something else.

We can overcome methods using the Object.PROTOTYPE property. But how can we do this for non-functional objects inside an object, for example, in this case, the value property.

If I need to make the question more clear, please indicate.

Respectfully, Ranjan.

Answer 1

Custom element properties can be defined using Object.defineProperty

If you have a case where you need to get the value of an element as Mr. <value> Mr. <value> , for example, 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); 

Answer 2

What you are trying to do is called a type extension. There are such types of things in javscript as object type, array type, etc.

You can use a prototype to increase these built-in types, for example, by adding a new method that can be called for any object from an array of types:

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

Then you can call your method in any array:

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

There is no INPUT type in JavaScript; DOM elements are classified as objects. But you could collect something, something like what you need, for example,

 Object.prototype.changeValue = function(el) { if (el.tagName === "INPUT") { return "Mr " + el.value; } } var testEl = document.getElementById("test"); document.write(testEl.changeValue(testEl)) 

Used with this text box:

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

Then you get the output "Mr Dan"

However, this is not great, just to illustrate the point and this is just what you started ...

I made a violin so you can play with it

Answer 3

You can update the value, but it will not be useful;)

In this example, this is done if test is a text field.

 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 refer to a getter that causes infinite recursion.

After overriding, the original value will no longer exist, so you will be mutilated by the element of the element.

At least as far as I could check.