web-dev-qa-db-ja.com

（JSON）オブジェクトのプロトタイプにメソッドを追加する方法は？

サーバーからJSONオブジェクトを受け取ったとします。 Personオブジェクトのデータ：

_{firstName: "Bjarne", lastName: "Fisk"}
_

今、私はそれらのデータの上にいくつかのメソッドが欲しいです、例えばfullNameの計算：

_fullName: function() { return this.firstName + " " + this.lastName; }
_

私ができるように

_var personData = {firstName: "Bjarne", lastName: "Fisk"};
var person = PROFIT(personData);
person.fullName(); // => "Bjarne Fisk"
_

ここで基本的にやりたいことは、オブジェクトのプロトタイプにメソッドを追加することです。 fullName()メソッドは一般的なため、データオブジェクト自体に追加しないでください。お気に入り..：

_personData.fullName = function() { return this.firstName + " " + this.lastName; }
_

...多くの冗長性が生じます。そして、間違いなくデータオブジェクトを「汚染」します。

そのようなメソッドを単純なデータオブジェクトに追加する現在のベストプラクティスの方法は何ですか？

編集：

トピックから少し外れていますが、上記の問題を解決できる場合は、次のようにいくつかのNice pseudo -_pattern matching_を実行できます。

_if ( p = Person(data) ) {
   console.log(p.fullName());
} else if ( d = Dog(data) ) {
   console.log("I'm a dog lol. Hear me bark: "+d.bark());
} else {
   throw new Exception("Shitty object");
}
_

Personオブジェクトに適切な属性がある場合、Dogおよびdataはメソッドを追加します。そうでない場合は、偽りを返します（つまり、データがnot一致/一致します）。

BONUS QUESTION：これを使用または有効にする（つまり、簡単にする）ライブラリを知っている人はいますか？すでにJavaScriptパターンですか？もしそうなら、それは何と呼ばれています。また、詳細なリンクはありますか？ありがとう：）

javascriptjsonprototype
29
kornfridge

オブジェクトが、サーバー出力を解析してオブジェクトを生成するJSONライブラリに由来すると仮定すると、一般的にプロトタイプに特定のものは含まれません。また、異なるサーバー応答用に生成された2つのオブジェクトは、プロトタイプチェーンを共有しません（もちろん、Object.prototype以外;））

JSONから「Person」が作成されるすべての場所を制御する場合、逆のことを行うことができます。「空の」Personオブジェクトを作成し（プロトタイプにfullNameのようなメソッドを使用）、生成されたオブジェクトでそれを拡張しますJSONから（$ .extend、_。extend、または同様のものを使用）。

var p = { first : "John", last : "Doe"};

function Person(data) {
   _.extend(this, data);
}

Person.prototype.fullName = function() {
   return this.first + " " + this.last;   
}

console.debug(new Person(p).fullName());
22
phtrivier

ここには別の可能性があります。 JSON.parse は、2番目のパラメーターを受け入れます。このパラメーターは、検出されたオブジェクトを、リーフノードからルートノードまで復活させるために使用される関数です。したがって、固有のプロパティに基づいて型を認識できる場合は、リバイバー関数で型を構築できます。これを行う非常に簡単な例を次に示します。

var MultiReviver = function(types) {
    // todo: error checking: types must be an array, and each element
    //       must have appropriate `test` and `deserialize` functions
    return function(key, value) {
        var type;
        for (var i = 0; i < types.length; i++) {
            type = types[i];
            if (type.test(value)) {
                return type.deserialize(value);
            }
        }
        return value;
    };
};

var Person = function(first, last) {
    this.firstName = first;
    this.lastName = last;
};
Person.prototype.fullName = function() {
    return this.firstName + " " + this.lastName;
};
Person.prototype.toString = function() {return "Person: " + this.fullName();};
Person.test = function(value) {
    return typeof value.firstName == "string" && 
           typeof value.lastName == "string";
};
Person.deserialize = function(obj) {
    return new Person(obj.firstName, obj.lastName);
};

var Dog = function(breed, name) {
    this.breed = breed;
    this.name = name;
}
Dog.prototype.species = "canine";
Dog.prototype.toString = function() {
    return this.breed + " named " + this.name;
};
Dog.test = function(value) {return value.species === "canine";};
Dog.deserialize = function(obj) {return new Dog(obj.breed, obj.name);};


var reviver = new MultiReviver([Person, Dog]);

var text = '[{"firstName": "John", "lastName": "Doe"},' +
            '{"firstName": "Jane", "lastName": "Doe"},' +
            '{"firstName": "Junior", "lastName": "Doe"},' +
            '{"species": "canine", "breed": "Poodle", "name": "Puzzle"},' +
            '{"species": "canine", "breed": "Wolfhound", "name": "BJ"}]';

var family = JSON.parse(text, reviver)
family.join("\n");

// Person: John Doe
// Person: Jane Doe
// Person: Junior Doe
// Poodle named Puzzle
// Wolfhound named BJ

これは、タイプを明確に認識することができるかどうかに依存します。たとえば、firstNameおよびlastNameプロパティもあるPersonのサブタイプでさえ、他のタイプがある場合、これは機能しません。しかし、それはいくつかのニーズをカバーするかもしれません。

9
Scott Sauyet

プレーンなJSONデータを処理している場合、各人物オブジェクトのプロトタイプは単に_Object.prototype_になります。 _Person.prototype_のプロトタイプを持つオブジェクトにするには、まず最初にPersonコンストラクターとプロトタイプが必要です（Javascript OOP =従来の方法で）：

_function Person() {
    this.firstName = null;
    this.lastName = null;
}
Person.prototype.fullName = function() { return this.firstName + " " + this.lastName; }
_

次に、プレーンオブジェクトをPersonオブジェクトに変換する方法が必要になります。単に1つのオブジェクトから別のオブジェクトにすべてのプロパティをコピーするmixinという関数がある場合、これを行うことができます。

_//example JSON object
var jsonPerson = {firstName: "Bjarne", lastName: "Fisk"};

var person = new Person();
mixin(person, jsonPerson);
_

これは問題を解決するための1つの方法にすぎませんが、うまくいけばいくつかのアイデアが得られるはずです。

更新：Object.assign()が最新のブラウザーで使用可能になったので、独自のmixin関数を作成する代わりにそれを使用できます。古いブラウザでObject.assign()を動作させるためのシムもあります。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign#Polyfill を参照してください。

5
Matt Browne

おそらくこれを行うべきではありません。

JSONを使用すると、タイプではなく状態をシリアル化できます。したがって、ユースケースでは、次のようなことを行う必要があります。

var Person = function ( data ) {
    if ( data ) {
        this.firstName = data.firstName;
        this.lastName = data.lastName;
    }
};

Person.prototype.fullName = function ( ) {
    return this.firstName + ' ' + this.lastName;
};

//

var input = '{"firstName":"john", "lastName":"Doe"}';
var myData = JSON.parse( input );
var person = new Person( myData );
4
Maël Nison

言い換えれば、既存のオブジェクトのプロトタイプ（別名クラス）を変更したいということです。技術的には、次の方法で実行できます。

var Person = {
  function fullName() { return this.firstName + " " + this.lastName; }
};

// that is your PROFIT function body: 
personData.__proto__ = Person ;

その後、personData instanceof Personでtrueを取得する場合

3
c-smile

New-ish Object.setPrototypeOf（） を使用します。 （IE11および他のすべてのブラウザーで現在サポートされています。）

FullName（）などの必要なメソッドを含むクラス/プロトタイプを作成してから、

Object.setPrototypeOf( personData, Person.prototype );

警告（上記のリンクされたMDNページ）が示唆するように、この関数は軽く使用されるべきではありませんが、既存のオブジェクトのプロトタイプを変更するときに意味があります。

1
Tom

ベアボーンオブジェクトのカスタムメソッドをバインドするためにプロトタイプを使用する必要はありません。

冗長なコードを避けてコードを汚染しないエレガントな例があります

var myobj = {
  title: 'example',
  assets: 
  {
    resources: ['zero', 'one', 'two']
  }
}

var myfunc = function(index)
{
    console.log(this.resources[index]); 
}

myobj.assets.giveme = myfunc

myobj.assets.giveme(1);

https://jsfiddle.net/bmde6L0r/ で利用可能な例

0
Juan Lago

メソッドをデータとともに転送することは一般的ではないと思いますが、素晴らしいアイデアのようです。

このプロジェクトでは、データとともに関数をエンコードできますが、標準とは見なされず、もちろん同じライブラリでデコードする必要があります。

https://github.com/josipk/json-plus
0
Billy Moon

匿名オブジェクトにはプロトタイプがありません。なぜこれだけではありませんか：

function fullName(obj) {
    return obj.firstName + ' ' + obj.lastName;
}

fullName(person);

関数呼び出しの代わりにメソッド呼び出しを絶対に使用する必要がある場合は、オブジェクトを使用して同様のことをいつでも行うことができます。

var Person = function (person) { this.person = person; }
Person.prototype.fullName = function () {
    return this.person.firstName + ' ' + this.person.lastName;
}
var person = new Person(personData);
person.fullName();
0
Explosion Pills