web-dev-qa-db-ja.com

JavaScriptオブジェクトリテラルへのプロトタイプの追加

STORE = {
   item : function() {
  }
};
STORE.item.prototype.add = function() { alert('test 123'); };
STORE.item.add();

私はかなり長い間、これの何が悪いのかを理解しようと努めてきました。なぜこれが機能しないのですか？ただし、以下を使用すると機能します。

STORE.item.prototype.add();
javascriptprototypeobject-literal
54
John

プロトタイプオブジェクトは、 コンストラクタ関数 で使用するためのものであり、基本的には new operator 新しいオブジェクトインスタンスを作成します。

JavaScriptの関数は first-class オブジェクトです。つまり、メンバーを追加して、通常のオブジェクトと同じように扱うことができます。

var STORE = {
   item : function() {
  }
};

STORE.item.add = function() { alert('test 123'); };
STORE.item.add();

前に言ったように、プロトタイプオブジェクトの一般的な使用法は、new演算子を使用してコンストラクター関数を呼び出してオブジェクトをインスタンス化する場合です。次に例を示します。

function SomeObject() {} // a constructor function
SomeObject.prototype.someMethod = function () {};

var obj = new SomeObject();

SomeObjectのすべてのインスタンスはSomeObject.prototypeからメンバーを継承します。これらのメンバーはプロトタイプチェーンを通じてアクセスされるためです。

JavaScriptのすべての関数にはプロトタイプオブジェクトがあります。これは、どの関数がコンストラクターとして使用されることが意図されているかを知る方法がないためです。

80
CMS

長年の後、JavaScript（ES2015が到着した）にようやく Object.setPrototypeOf（） メソッドができました

const STORE = {
  item: function() {}
};


Object.setPrototypeOf(STORE.item, {
  add: function() {
    alert('test 123');
  }
})


STORE.item.add();
13
Krzysztof Safjanowski

これを書いている時点では、これは__proto__プロパティ。念のためここで誰かが現在そしておそらく将来チェックしている。

const dog = {
    name: 'canine',
    bark: function() {
        console.log('woof woof!')
    }
}

const pug = {}
pug.__proto__ = dog;

pug.bark();

ただし、この場合にプロトタイプを追加するための推奨される方法は、 Object.create を使用することです。したがって、上記のコードは次のように変換されます。

const pug = Object.create(dog)

pug.bark();

または、回答の1つで言及されているように Object.setPrototypeOf を使用することもできます。

お役に立てば幸いです。

2
JohnnyQ

JSONリバイバーを使用して、解析時にJSONをクラスオブジェクトに変換できます。 EcmaScript 5ドラフトは http://JSON.org/js.html で説明されているJSON2リバイバースキームを採用しています

var myObject = JSON.parse(myJSONtext, reviver);

オプションのreviverパラメーターは、最終結果のすべてのレベルですべてのキーと値に対して呼び出される関数です。各値は、リバイバー関数の結果に置き換えられます。これを使用して、汎用オブジェクトを疑似クラスのインスタンスに再構成したり、日付文字列をDateオブジェクトに変換したりできます。

myData = JSON.parse(text, function (key, value) {
    var type;
    if (value && typeof value === 'object') {
        type = value.type;
        if (typeof type === 'string' && typeof window[type] === 'function') {
            return new (window[type])(value);
        }
    }
    return value;
});
2
Mike Samuel
_STORE = {
   item : function() {
  }
};
_

このコマンドは、STOREオブジェクトを作成します。 _typeof STORE;_で確認できます。 「オブジェクト」を返す必要があります。また、_STORE.item;_と入力すると、「関数..」が返されます。

これは通常のオブジェクトなので、アイテムの機能を変更したい場合は、このコマンドでそのプロパティ/メソッドにアクセスできます。

_STORE.item = function() { alert('test 123'); };
_

_STORE.item;_を試してください。「関数..」が返されます。

STORE.item();を試すと、アラートが表示されます。

0
Yugo Gautomo