Question

让我们举一个例子来解释这个问题。我有一个文本框。文本框（每个文本框）都有一个名为“value”的属性。我想骑过textbox.value，然后和新的东西。当文本框中的文本为'ranjan'时，textbox.VALUE属性将返回'ranjan'。现在我想覆盖这个，这样当你输入textbox.VALUE时，你会得到一个不同的东西，例如RaNjAn或者说Ranjan先生或其他什么。

我们可以使用Object.PROTOTYPE属性来覆盖方法。但是我们如何才能为对象内的非函数对象做这件事，例如在这种情况下为'value'属性。

如果我需要更清楚地提出问题，请提及。

问候 - Ranjan。

Answer 1

您可以使用Object.defineProperty

为元素定义自定义属性

例如，如果您需要将元素的值设为Mr. <value>，则此方法将非常有用。覆盖标准属性可能不是一个好主意。

演示：http://jsfiddle.net/zvCGw/2/

<强>代码：

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

您要做的是称为类型扩充。在javscript中有一些类型的东西，比如对象类型，数组类型等。

您可以使用原型来扩充这些内置类型，例如，添加一个可以在类型数组的任何对象上调用的新方法：

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

然后你可以在任何数组上调用你的方法：

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

JavaScript中没有INPUT类型，DOM元素被归类为对象。但你可以把一些东西放在一起，就像你需要的那样，就像这样

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


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

与此文本框结合使用：

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

然后你会得到输出'Mr Dan'

然而，这并不是很好，只是为了说明这一点，而且只是让你开始......

我制作a fiddle所以你可以玩它

Answer 3

您可以重新声明价值但不会有任何好处;）

如果test是文本框

，那么这个例子会这样做

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);

不幸的是，“this.value”将引用getter导致无限递归。

重新定义后，原始值将不再存在，因此您将使元素对象瘫痪。

至少我已经能够测试。

Answer 4

如果您尝试覆盖的属性也可以由HTML属性表示（例如输入的value），则可以使用getAttribute和setAttribute。

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

但是请注意，如果没有重新实现，则不能覆盖此覆盖本身。

Javascript - 覆盖Object内的属性（而不是方法）

4 个答案: