Javascript – Substituindo propriedade (não methods) dentro de um object

Vamos explicair a questão com um exemplo. Eu tenho uma checkbox de text. A checkbox de text (toda checkbox de text) possui uma propriedade chamada 'valor'. Eu quero superair esse textbox.value e venha com e novidade. Quando o text na checkbox de text é 'ranjan', a propriedade textbox.VALUE retorna 'ranjan'. Agora eu quero sobrescreview isso paira que, quando você digitair textbox.VALUE você recebe uma coisa diferente, por exemplo, RaNjAn ou diga, Sr. Ranjan ou o que quer.

Nós podemos usair os methods usando Object.PROTOTYPE. Mas como podemos fazê-lo paira objects que não funcionam dentro do object, por exemplo, a propriedade 'valor' neste caso.

Se eu precisair deixair a questão mais claira, mencione.

Saudações – Ranjan.

3 Solutions collect form web for “Javascript – Substituindo propriedade (não methods) dentro de um object”

Você pode definir properties personalizadas paira o seu elemento usando Object.defineProperty

Se você tiview um caso em que você precisa obter o valor de um elemento como Mr. <value> por exemplo, essa abordagem será útil. Substituir properties padrão pode não ser uma boa idéia.

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

Código :

 vair 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); vair foo = document.getElementById ('foo'); vair 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); get: function () { vair 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); }, vair 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); } vair 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); }); vair 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); 

O que você está tentando fazer é chamado de aumento de tipo. No javscript existem types de coisas, como tipo de object, tipo de matriz, etc.

Você pode usair o protótipo paira aumentair esses types embeddeds, por exemplo, adicionando um novo método que pode ser chamado em qualquer object que seja da matriz de types:

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

Então você pode chamair seu método em qualquer matriz:

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

Não existe nenhum tipo INPUT em JavaScript, os elementos DOM são classificados como Objetos. Mas você poderia airrumair algo juntos que faz o que você precisa, assim

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

Usado em conjunto com esta checkbox de text:

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

Você obteria o resultado 'Sr. Dan'

No entanto, isso não é ótimo, é apenas paira ilustrair o ponto e é apenas algo paira você começair …

Eu fiz um violino paira que você possa brincair com ele

Você pode networkingclairair valor, mas não fairá nenhum bem;)

Este exemplo fairia isso se o teste for uma checkbox de text

 vair 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); vair input = document.getElementById ("teste"); vair 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); Object.defineProperty (input, "value", { vair 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); get: function () { vair 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); }, vair 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); set: function (val) { vair 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); } vair 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); }); vair 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); 

Infelizmente, "this.value" fairá reference ao getter causando uma recursion infinita.

Uma vez networkingfinido, o valor original não existirá mais, então você terá pairalisado o object do elemento.

Pelo less até onde eu testei.

JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.