0

一部のネイティブ JavaScript オブジェクトのプロトタイプを拡張して、新しい関数 (NodeList.prototype.forEachまたは などNodeList.prototype.addEventListener) を含めることができます。これを使用して、NodeList. これまでのところは良いですが、独自の機能を持つプロトタイプにオブジェクトを追加するにはどうすればよいですか (許可するためNodeListVar.classList.remove("class"))。私はNodeListVar.classList().remove("class")次のようにして、作ることができました

NodeList.prototype.classList = function(){
    var _this = this;
    return {
        remove: function(class){
            _this.forEach(function(){
                this.classList.remove(class);
            });
        }
    }   
};

ただし、構文が通常と同じであることを強く希望しますelement。したがって、次のようになります。

NodeList.prototype.classList = {
    remove: function(class){
        //where *this* would be the nodeList and *not* the DOMWindow
        this.forEach(function(){
            this.classList.remove(class);
        });
    }
};

それはおそらく難しいことではありませんが、私はグーグルを際限なく検索し、数え切れないほどの質問に目を通しましたが、有用なものは何も見つかりません.

4

2 に答える 2

2

最初に読む: DOM の拡張の何が問題なのか。

プロトタイプにオブジェクトを設定することはできません。呼び出されたすべての関数は、NodeList 自体ではなく、その静的プロトタイプ オブジェクトのコンテキストで実行されます。プロトタイプのオブジェクトには、現在の NodeList への参照がありません。

通常Elementの s では、すべての要素が独自のclassList属性を持ちDOMTokenList、要素をバインドします。同じことをする必要があります: すべての NodeList に独自の classLists インスタンスを与えます。利用できないコンストラクターではそれを行うことができないため、既に示したようにゲッターを使用する必要があります。

NodeList と Elements で同じ構文を許可しようとするべきではないと思います。それらは大きく異なるからです。しかし、これらのブラケットを取り除きたい場合は、ネイティブのゲッター関数をインストールできます。

function ClassLists(nl) {
    ... // nl references the NodeList we're bound to
}
ClassLists.prototype = ...;

Object.defineProperty(NodeList.prototype, "classLists", {
    get: function() {
        return this.classLists = new ClassLists(this);
    }
});
于 2012-06-05T12:37:10.503 に答える
0

@Bergiの答えを補足するために、クロスブラウザソリューションを次に示します。

function ClassList() {
    this.nodeList;
}

ClassList.prototype = {
    constructor: ClassList,

    remove: function() {
        console.log( this );
    }
};

NodeList.prototype.classList = new ClassList();

nl.classList.remove(); // ClassList object with the `nodeList` property.

を使用していないため、同じAPIで使用することはできませんが、definePropertyクロスブラウザです。definePropertyIE9でのみ使用可能であり、IE7ではシム可能ではありません。

于 2012-06-05T12:48:24.053 に答える