แยกสตริง JSON ลงในต้นแบบวัตถุเฉพาะใน JavaScript

ฉันรู้วิธีแยกสตริง JSON และเปลี่ยนเป็นวัตถุ JavaScript คุณสามารถใช้JSON.parse()ในเบราว์เซอร์ที่ทันสมัย ​​(และ IE9 +)

เยี่ยมมาก แต่ฉันจะนำวัตถุ JavaScript นั้นไปใช้และเปลี่ยนเป็นวัตถุ JavaScript ที่เฉพาะเจาะจง (เช่นกับต้นแบบที่แน่นอน) ได้อย่างไร

ตัวอย่างเช่นสมมติว่าคุณมี:

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

อีกครั้งฉันไม่สงสัยว่าจะแปลงสตริง JSON เป็นวัตถุ JavaScript ทั่วไป ฉันต้องการทราบวิธีแปลงสตริง JSON เป็นวัตถุ "Foo" นั่นคือตอนนี้วัตถุของฉันควรมีฟังก์ชั่น 'ทดสอบ' และคุณสมบัติ 'a' และ 'b'

UPDATE หลังจากทำวิจัยแล้วฉันคิดถึงสิ่งนี้ ...

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);

มันจะใช้ได้ไหม

อัปเดตพฤษภาคม, 2017 : วิธีการ "ทันสมัย" ในการทำเช่นนี้ผ่านObject.assignแต่ฟังก์ชั่นนี้ไม่สามารถใช้ได้ในเบราว์เซอร์ IE 11 ขึ้นไป

คำตอบปัจจุบันมีโค้ดรีดด้วยมือหรือไลบรารีจำนวนมาก สิ่งนี้ไม่จำเป็น

1. ใช้JSON.parse('{"a":1}')เพื่อสร้างวัตถุธรรมดา

2. ใช้หนึ่งในฟังก์ชั่นมาตรฐานเพื่อตั้งค่าต้นแบบ:

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

ดูตัวอย่างด้านล่าง (ตัวอย่างนี้ใช้วัตถุ JSON ดั้งเดิม) การเปลี่ยนแปลงของฉันมีความคิดเห็นในเมืองหลวง:

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

คุณต้องการที่จะเพิ่มฟังก์ชั่นการทำให้เป็นอันดับ / การเป็นซีเรียล JSON ใช่ไหม จากนั้นดูที่นี่:

คุณต้องการบรรลุสิ่งนี้:

toJson () เป็นวิธีปกติ
fromJson () เป็นวิธีการคงที่

การใช้งาน :

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);
};

การใช้งาน :

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

หมายเหตุ: หากคุณต้องการให้คุณสามารถเปลี่ยนคำจำกัดความของทรัพย์สินทั้งหมดเช่นthis.title, this.authorฯลฯ โดยvar title, var authorฯลฯ และเพิ่ม getters กับพวกเขาเพื่อให้บรรลุความหมาย UML

โพสต์บล็อกที่ฉันพบว่ามีประโยชน์: การ ทำความเข้าใจต้นแบบ JavaScript

คุณสามารถยุ่งกับคุณสมบัติ __proto__ ของวัตถุ

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

สิ่งนี้ทำให้ fooJSON สามารถสืบทอดต้นแบบ Foo ได้

ฉันไม่คิดว่ามันจะทำงานได้ใน IE แต่อย่างน้อยจากสิ่งที่ฉันอ่าน

ฉันไม่มีอะไรในคำถามหรือเพราะเหตุใดไม่มีใครพูดถึงreviverพารามิเตอร์ของJSON.parseตั้งแต่ปี 2011

นี่คือรหัสแบบง่าย ๆ สำหรับวิธีแก้ปัญหาที่ใช้งานได้: 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: คำถามของคุณทำให้สับสน: >> เยี่ยมมาก แต่ฉันจะนำ JavaScript Object นั้นไปใช้และเปลี่ยนเป็น JavaScript Object ที่เฉพาะเจาะจงได้ (เช่นกับต้นแบบบางตัว) ได้อย่างไร ขัดแย้งกับชื่อที่คุณถามเกี่ยวกับการแยกวิเคราะห์ JSON แต่ย่อหน้าที่ยกมาถามเกี่ยวกับการเปลี่ยนต้นแบบวัตถุรันไทม์ JS

Object.createวิธีอื่นอาจจะใช้ ในฐานะที่เป็นอาร์กิวเมนต์แรกคุณผ่านต้นแบบและสำหรับคนที่สองที่คุณผ่านแผนที่ของชื่อคุณสมบัติเพื่ออธิบาย:

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);

ฉันชอบเพิ่มอาร์กิวเมนต์ที่เป็นตัวเลือกให้กับตัวสร้างและการเรียกใช้Object.assign(this, obj)จากนั้นจัดการคุณสมบัติใด ๆ ที่เป็นวัตถุหรืออาร์เรย์ของวัตถุเอง:

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

เพื่อความสมบูรณ์นี่คือหนึ่งซับที่เรียบง่ายฉันจบลงด้วย (ฉันไม่จำเป็นต้องตรวจสอบคุณสมบัติที่ไม่ใช่ฟู):

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 }'));

ฉันสร้างแพ็คเกจที่ชื่อjson-dry JSONรองรับการอ้างอิง (แบบวงกลม) และอินสแตนซ์ของคลาส

คุณต้องกำหนดวิธีการใหม่ 2 วิธีในชั้นเรียนของคุณ ( toDryบนต้นแบบและunDryวิธีคงที่) ลงทะเบียนชั้นเรียน ( Dry.registerClass) และปิดคุณไป

ในขณะที่นี่ไม่ใช่เทคนิคสิ่งที่คุณต้องการถ้าคุณรู้ก่อนว่าชนิดของวัตถุที่คุณต้องการจัดการคุณสามารถใช้วิธีการโทร / ใช้ของต้นแบบของวัตถุที่คุณรู้จัก

คุณสามารถเปลี่ยนสิ่งนี้

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

สำหรับสิ่งนี้

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

ฉันได้รวมโซลูชันที่ฉันสามารถค้นหาและรวบรวมไว้ในโซลูชันทั่วไปที่สามารถแยกวิเคราะห์วัตถุที่กำหนดเองโดยอัตโนมัติและฟิลด์ทั้งหมดนั้นวนซ้ำเพื่อให้คุณสามารถใช้วิธีการต้นแบบหลังจากดีซีเรียลไลเซชัน

สมมติฐานหนึ่งคือคุณได้กำหนดไฟล์พิเศษที่ระบุว่ามันเป็นวัตถุในทุกวัตถุที่คุณต้องการใช้มันเป็นประเภทอัตโนมัติ ( this.__typeในตัวอย่าง)

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;
    }
}

การใช้งาน:

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

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

ฟังก์ชั่นการกำหนดประเภท (มันทำงานซ้ำเพื่อกำหนดประเภทให้กับวัตถุที่ซ้อนกันใด ๆ มันยังทำซ้ำผ่านอาร์เรย์เพื่อค้นหาวัตถุที่เหมาะสมใด ๆ ):

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);
}

คำตอบที่ยอมรับในปัจจุบันไม่ทำงานสำหรับฉัน คุณต้องใช้ Object.assign () อย่างถูกต้อง:

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`;
    }
}

คุณสร้างวัตถุของคลาสนี้ตามปกติ:

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

หากคุณมีสตริง json คุณต้องแยกวิเคราะห์ในคลาส Person ให้ทำดังนี้:

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

คำตอบของ Olivers นั้นชัดเจนมาก แต่ถ้าคุณกำลังมองหาวิธีแก้ปัญหาในเชิงมุม js ฉันได้เขียนโมดูลที่ดีที่เรียกว่า Angular-jsClass ซึ่งทำได้อย่างง่ายดายการมีวัตถุที่กำหนดไว้ในสัญกรณ์ litaral นั้นไม่ดีเสมอเมื่อคุณมุ่งสู่โครงการใหญ่ แต่การบอกว่านักพัฒนาประสบปัญหาซึ่ง BMiner กล่าวอย่างแน่นอนว่าจะทำให้ json เป็นอนุกรมกับวัตถุต้นแบบหรือสัญกรณ์ตัวสร้าง

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