5

例を挙げて質問を説明しましょう。テキストボックスがあります。テキストボックス (すべてのテキストボックス) には、「値」というプロパティがあります。textbox.valueそれを乗り越えて、新しいものを生み出したい。テキスト ボックスのテキストが「ranjan」の場合、textbox.VALUEプロパティは「ranjan」を返します。ここで、これを上書きしてtextbox.VALUE、たとえば RaNjAn や Mr. 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

値を再宣言できますが、それは役に立ちません;)

この例は、 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」はゲッターを参照し、無限再帰を引き起こします。

再定義すると、元の値は存在しなくなるため、要素オブジェクトが機能しなくなります。

少なくとも私がテストできた限りでは。

于 2012-09-21T12:56:02.877 に答える
1

あなたがやろうとしていることは、型拡張と呼ばれます。JavaScript には、オブジェクト型、配列型などの型があります。

プロトタイプを使用して、これらの組み込み型を拡張できます。たとえば、型配列の任意のオブジェクトで呼び出すことができる新しいメソッドを追加できます。

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」を取得します

ただし、これは素晴らしいことではありません。ポイントを説明するためのものであり、始めるためのものです...

あなたがそれで遊ぶことができるように私はフィドルを作りました

于 2012-09-21T12:43:20.580 に答える
1

オーバーライドしようとしているプロパティが HTML 属性 (入力のvalueなど)でも表現できる場合はgetAttribute、 andを使用できますsetAttribute。

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

ただし、このオーバーライド自体は、再実装しないとオーバーライドできないことに注意してください。

于 2018-08-31T01:07:16.940 に答える