Parsing String JSON menjadi Prototipe Objek Tertentu dalam JavaScript

Saya tahu cara mengurai String JSON dan mengubahnya menjadi Obyek JavaScript. Anda dapat menggunakan JSON.parse()di browser modern (dan IE9 +).

Itu hebat, tetapi bagaimana saya bisa mengambil Objek JavaScript itu dan mengubahnya menjadi Objek JavaScript tertentu (yaitu dengan prototipe tertentu)?

Misalnya, anggap Anda memiliki:

function Foo()
{
   this.a = 3;
   this.b = 2;
   this.test = function() {return this.a*this.b;};
}
var fooObj = new Foo();
alert(fooObj.test() ); //Prints 6
var fooJSON = JSON.parse({"a":4, "b": 3});
//Something to convert fooJSON into a Foo Object
//....... (this is what I am missing)
alert(fooJSON.test() ); //Prints 12

Sekali lagi, saya tidak bertanya-tanya bagaimana cara mengubah string JSON menjadi Obyek JavaScript umum. Saya ingin tahu cara mengubah string JSON menjadi Obyek "Foo". Artinya, Objek saya sekarang harus memiliki fungsi 'tes' dan properti 'a' dan 'b'.

PEMBARUAN Setelah melakukan riset, saya memikirkan hal ini ...

Object.cast = function cast(rawObj, constructor)
{
    var obj = new constructor();
    for(var i in rawObj)
        obj[i] = rawObj[i];
    return obj;
}
var fooJSON = Object.cast({"a":4, "b": 3}, Foo);

Apakah itu akan berhasil?

UPDATE Mei, 2017 : Cara "modern" untuk melakukan ini, adalah melalui Object.assign, tetapi fungsi ini tidak tersedia di IE 11 atau lebih lama browser Android.

Jawaban saat ini berisi banyak linting tangan atau kode perpustakaan. Ini tidak perlu.

1. Gunakan JSON.parse('{"a":1}')untuk membuat objek polos.

2. Gunakan salah satu fungsi standar untuk mengatur prototipe:

   • Object.assign(new Foo, { a: 1 })
   • Object.setPrototypeOf({ a: 1 }, Foo.prototype)

Lihat contoh di bawah ini (contoh ini menggunakan objek JSON asli). Perubahan saya dikomentari dalam MODAL:

function Foo(obj) // CONSTRUCTOR CAN BE OVERLOADED WITH AN OBJECT
{
    this.a = 3;
    this.b = 2;
    this.test = function() {return this.a*this.b;};

    // IF AN OBJECT WAS PASSED THEN INITIALISE PROPERTIES FROM THAT OBJECT
    for (var prop in obj) this[prop] = obj[prop];
}

var fooObj = new Foo();
alert(fooObj.test() ); //Prints 6

// INITIALISE A NEW FOO AND PASS THE PARSED JSON OBJECT TO IT
var fooJSON = new Foo(JSON.parse('{"a":4,"b":3}'));

alert(fooJSON.test() ); //Prints 12

Apakah Anda ingin menambahkan fungsionalitas serialisasi / deserialisasi JSON, bukan? Kemudian lihat ini:

Anda ingin mencapai ini:

toJson () adalah metode normal.
fromJson () adalah metode statis.

Implementasi :

var Book = function (title, author, isbn, price, stock){
    this.title = title;
    this.author = author;
    this.isbn = isbn;
    this.price = price;
    this.stock = stock;

    this.toJson = function (){
        return ("{" +
            "\"title\":\"" + this.title + "\"," +
            "\"author\":\"" + this.author + "\"," +
            "\"isbn\":\"" + this.isbn + "\"," +
            "\"price\":" + this.price + "," +
            "\"stock\":" + this.stock +
        "}");
    };
};

Book.fromJson = function (json){
    var obj = JSON.parse (json);
    return new Book (obj.title, obj.author, obj.isbn, obj.price, obj.stock);
};

Penggunaan :

var book = new Book ("t", "a", "i", 10, 10);
var json = book.toJson ();
alert (json); //prints: {"title":"t","author":"a","isbn":"i","price":10,"stock":10}

var book = Book.fromJson (json);
alert (book.title); //prints: t

Catatan: Jika Anda ingin Anda dapat mengubah semua definisi properti seperti this.title, this.author, dll dengan var title, var author, dll dan menambahkan getter kepada mereka untuk mencapai definisi UML.

Posting blog yang menurut saya berguna: Memahami Prototipe JavaScript

Anda dapat mengacaukan properti __proto__ dari Object.

var fooJSON = jQuery.parseJSON({"a":4, "b": 3});
fooJSON.__proto__ = Foo.prototype;

Ini memungkinkan fooJSON untuk mewarisi prototipe Foo.

Saya tidak berpikir ini bekerja di IE, meskipun ... setidaknya dari apa yang saya baca.

Apakah saya melewatkan sesuatu dalam pertanyaan atau mengapa tidak ada yang menyebutkan reviverparameterJSON.parse sejak 2011?

Berikut adalah kode sederhana untuk solusi yang berfungsi: https://jsfiddle.net/Ldr2utrr/

function Foo()
{
   this.a = 3;
   this.b = 2;
   this.test = function() {return this.a*this.b;};
}


var fooObj = new Foo();
alert(fooObj.test() ); //Prints 6
var fooJSON = JSON.parse(`{"a":4, "b": 3}`, function(key,value){
if(key!=="") return value; //logic of course should be more complex for handling nested objects etc.
  let res = new Foo();
  res.a = value.a;
  res.b = value.b;
  return res;
});
// Here you already get Foo object back
alert(fooJSON.test() ); //Prints 12

PS: Pertanyaan Anda membingungkan: >> Itu bagus, tapi bagaimana saya bisa mengambil Objek JavaScript itu dan mengubahnya menjadi Obyek JavaScript tertentu (yaitu dengan prototipe tertentu)? bertentangan dengan judul, di mana Anda bertanya tentang parsing JSON, tetapi paragraf yang dikutip menanyakan tentang penggantian prototipe objek runtime JS.

Pendekatan alternatif bisa digunakan Object.create. Sebagai argumen pertama, Anda meneruskan prototipe, dan untuk argumen kedua Anda meneruskan peta nama properti ke deskriptor:

function SomeConstructor() {
  
};

SomeConstructor.prototype = {
  doStuff: function() {
      console.log("Some stuff"); 
  }
};

var jsonText = '{ "text": "hello wrold" }';
var deserialized = JSON.parse(jsonText);

// This will build a property to descriptor map
// required for #2 argument of Object.create
var descriptors = Object.keys(deserialized)
  .reduce(function(result, property) {
    result[property] = Object.getOwnPropertyDescriptor(deserialized, property);
  }, {});

var obj = Object.create(SomeConstructor.prototype, descriptors);

Saya suka menambahkan argumen opsional ke konstruktor dan panggilan Object.assign(this, obj), lalu menangani properti apa pun yang merupakan objek atau array objek itu sendiri:

constructor(obj) {
    if (obj != null) {
        Object.assign(this, obj);
        if (this.ingredients != null) {
            this.ingredients = this.ingredients.map(x => new Ingredient(x));
        }
    }
}

Demi kelengkapan, berikut ini adalah satu-liner sederhana yang saya dapatkan (saya tidak perlu memeriksa properti non-Foo):

var Foo = function(){ this.bar = 1; };

// angular version
var foo = angular.extend(new Foo(), angular.fromJson('{ "bar" : 2 }'));

// jquery version
var foo = jQuery.extend(new Foo(), jQuery.parseJSON('{ "bar" : 3 }'));

Saya membuat paket yang disebut json-dry . Ini mendukung referensi (melingkar) dan juga instance kelas.

Anda harus mendefinisikan 2 metode baru di kelas Anda ( toDrypada prototipe dan unDrysebagai metode statis), daftarkan kelas ( Dry.registerClass), dan pergilah.

Sementara, ini bukan apa yang Anda inginkan secara teknis, jika Anda tahu sebelumnya jenis objek yang ingin Anda tangani, Anda dapat menggunakan metode panggilan / terapkan dari prototipe objek yang diketahui.

Anda bisa mengubahnya

alert(fooJSON.test() ); //Prints 12

untuk ini

alert(Foo.prototype.test.call(fooJSON); //Prints 12

Saya telah menggabungkan solusi yang saya dapat menemukan dan mengkompilasinya menjadi generik yang secara otomatis dapat mem-parsing objek kustom dan semua bidang itu secara rekursif sehingga Anda dapat menggunakan metode prototipe setelah deserialization.

Salah satu anggapan adalah bahwa Anda mendefinisikan suatu arsip khusus yang menunjukkan jenisnya di setiap objek yang ingin Anda terapkan jenisnya secara otomatis ( this.__typedalam contoh).

function Msg(data) {
    //... your init code
    this.data = data //can be another object or an array of objects of custom types. 
                     //If those objects defines `this.__type', their types will be assigned automatically as well
    this.__type = "Msg"; // <- store the object's type to assign it automatically
}

Msg.prototype = {
    createErrorMsg: function(errorMsg){
        return new Msg(0, null, errorMsg)
    },
    isSuccess: function(){
        return this.errorMsg == null;
    }
}

pemakaian:

var responseMsg = //json string of Msg object received;
responseMsg = assignType(responseMsg);

if(responseMsg.isSuccess()){ // isSuccess() is now available
      //furhter logic
      //...
}

Jenis fungsi penugasan (ini bekerja secara rekursif untuk menetapkan jenis ke objek bersarang; ia juga beralih melalui array untuk menemukan objek yang cocok):

function assignType(object){
    if(object && typeof(object) === 'object' && window[object.__type]) {
        object = assignTypeRecursion(object.__type, object);
    }
    return object;
}

function assignTypeRecursion(type, object){
    for (var key in object) {
        if (object.hasOwnProperty(key)) {
            var obj = object[key];
            if(Array.isArray(obj)){
                 for(var i = 0; i < obj.length; ++i){
                     var arrItem = obj[i];
                     if(arrItem && typeof(arrItem) === 'object' && window[arrItem.__type]) {
                         obj[i] = assignTypeRecursion(arrItem.__type, arrItem);
                     }
                 }
            } else  if(obj && typeof(obj) === 'object' && window[obj.__type]) {
                object[key] = assignTypeRecursion(obj.__type, obj);
            }
        }
    }
    return Object.assign(new window[type](), object);
}

Jawaban yang diterima saat ini tidak berfungsi untuk saya. Anda harus menggunakan Object.assign () dengan benar:

class Person {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }

    greet(){
        return `hello my name is ${ this.name } and i am ${ this.age } years old`;
    }
}

Anda membuat objek dari kelas ini secara normal:

let matt = new Person('matt', 12);
console.log(matt.greet()); // prints "hello my name is matt and i am 12 years old"

Jika Anda memiliki string json yang perlu Anda parsing ke dalam kelas Person, lakukan seperti ini:

let str = '{"name": "john", "age": 15}';
let john = JSON.parse(str); // parses string into normal Object type

console.log(john.greet()); // error!!

john = Object.assign(Person.prototype, john); // now john is a Person type
console.log(john.greet()); // now this works

Jawaban Olivers sangat jelas, tetapi jika Anda mencari solusi dalam js angular, saya telah menulis modul yang bagus yang disebut Angular-jsClass yang memudahkan ini, memiliki objek yang didefinisikan dalam notasi litaral selalu buruk ketika Anda bertujuan untuk proyek besar tetapi mengatakan bahwa pengembang menghadapi masalah yang persis kata BMiner, bagaimana membuat serial json ke prototipe atau objek notasi konstruktor

var jone = new Student();
jone.populate(jsonString); // populate Student class with Json string
console.log(jone.getName()); // Student Object is ready to use

https://github.com/imalhasaranga/Angular-JSClass