5

让我们用一个例子来解释这个问题。我有一个文本框。文本框（每个文本框）都有一个名为“值”的属性。我想超越它textbox.value并想出新事物。当文本框中的文本为“ranjan”时，该textbox.VALUE属性返回“ranjan”。现在我想覆盖它，这样当你输入时textbox.VALUE你会得到一个不同的东西，例如，RaNjAn 或者说，Ranjan 先生或其他什么。

我们可以使用 Object.PROTOTYPE 属性覆盖方法。但是对于对象内部的非函数对象，例如在这种情况下的“值”属性，我们如何做到这一点。

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

问候 - 兰詹。

4

4 回答 4

8

您可以使用为您的元素定义自定义属性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);
于 2012-09-21T12:43:07.633 回答
1

您正在尝试做的事情称为类型扩充。在 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" />

然后你会得到输出'丹先生'

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

我做了一个小提琴，所以你可以玩它

于 2012-09-21T12:43:20.580 回答
1

你可以重新声明价值，但它不会有好处;）

如果 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。

一旦重新定义，原始值将不再存在，因此您将削弱元素对象。

至少在我能够测试的范围内。

于 2012-09-21T12:56:02.877 回答
1

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

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

但是请注意，如果不重新实现它，则无法覆盖此覆盖本身。

于 2018-08-31T01:07:16.940 回答