在javascript中将普通对象转换为函数实例(“类”)

时间:2012-08-04 16:04:43

标签: javascript casting

function Person() {
      var self = this;

      self.personName="";
      self.animals=[];
}

function Animal(){
     var self=this;

     self.animalName="";
     self.run=function(meters){
         .....
     }
}

服务器响应:

 [{personName:John,animals:[{animalName:cheetah},{animalName:giraffe}]} , {personName:Smith,animals:[{animalName:cat},{animalName:dog}]} ]

我从服务器获取Person数组。我想将通用Person数组转换为类型Person数组。所以我可以使用

 persons[0].Animals[2].Run();

我创建了Javascript的

 Object.create(Person,person1);

但是我想要支持数组支持的跨浏览器版本

  ObjectArray.create(Person,persons);

 Object.create(Person[],persons);

4 个答案:

答案 0 :(得分:15)

在JavaScript中创建对象需要调用其构造函数。所以,首先你需要找到正确的参数,这些参数可能并不总是属性。之后,您可以将JSON解析对象中的所有公共属性重新分配给创建的实例。

一般的解决方案是每个构造函数都接受任何看起来像实例(包括实例)的对象并克隆它们。创建适当实例所需的所有内部逻辑都将位于正确的位置。

甚至比重载构造函数更好的方法可能是在类上创建一个静态方法,该方法接受对象并从中创建实例:

Person.fromJSON = function(obj) {
    // custom code, as appropriate for Person instances
    // might invoke `new Person`
    return …;
};

你的案子非常简单,因为你没有任何论据,只有公共财产。要将{personName:John,animals:[]}更改为对象实例,请使用:

var personLiteral = ... // JSON.parse("...");
var personInstance = new Person();
for (var prop in personLiteral)
    personInstance[prop] = personLiteral[prop];

您还可以使用Object.assign功能(例如,jQuery.extend pre-ES6):

var personInstance = Object.assign(new Person(), personLiteral);

Animal实例的创建类似。

由于JSON不传输有关类的任何信息,因此您必须先了解该结构。在你的情况下,它将是:

var persons = JSON.parse(serverResponse);
for (var i=0; i<persons.length; i++) {
    persons[i] = $.extend(new Person, persons[i]);
    for (var j=0; j<persons[i].animals; j++) {
        persons[i].animals[j] = $.extend(new Animal, persons[i].animals[j]);
    }
}

顺便说一句,您的run方法似乎可能会添加到Animal.prototype对象而不是每个实例上。

答案 1 :(得分:2)

看起来你有一些类有一些原型方法,你只是希望能够使你的对象使用这些方法。 http://jsfiddle.net/6CrQL/3/

function Person() {}

Person.prototype.speak = function() {
   console.log("I am " + this.personName);
};

Person.prototype.runAnimals = function() {
    this.animals.each(function(animal){
       animal.run();
    })
};

function Animal() {}

Animal.prototype.run = function() {
    console.log("My Animal " + this.animalName+ "  is running");
}

var untypedPersons =  [{personName:"John",animals:[{animalName:"cheetah"},{animalName:"giraffe"}]} , {personName:"Smith",animals:[{animalName:"cat"},{animalName:"dog"}]} ];   

function fromArray(arr, constructor) {
   return arr.map(function(obj){
       var typed = Object.create(constructor.prototype);
       // Now copy properties from the given object
       for (var prop in obj)  {
           typed[prop] = obj[prop];
       }
       return typed;
   });
}

var persons = fromArray(untypedPersons, Person);
// Attach prototype to each animals list in person
persons.each(function(person){
    person.animals = fromArray(person.animals, Animal);
});

persons.each(function(person){
    person.speak();
    person.runAnimals();  
});

如果每个人都支持__proto__属性http://jsfiddle.net/6CrQL/2/

,这可能会更容易(我们可以避免所有复制)
persons.each(function(person){
  person.__proto__ = Person.prototype;
  person.animals.each(function(animal){
    animal.__proto__ = Animal.prototype;
  });
});

persons.each(function(person){
  person.speak();
  person.runAnimals();  
});​

答案 2 :(得分:1)

首先:在JavaScript中,你没有像C ++,Java或C#这样的类。所以你不能真正拥有一个打字数组。

你在做什么应该基本上适用于变量,但不适用于函数。所以你必须先添加这些功能。看看下面的代码来了解一下。

<script type="text/javascript">

function Person() {
      var self = this;

      self.personName="";
      self.animals=[];
}

function Animal(){
     var self=this;

     self.animalName="";
     self.run=function(meters){
         7/... do something
     }
}

var persons = [{personName:"John",animals:[{animalName:"cheetah"},{animalName:"giraffe"}]} , {personName:"Smith",animals:[{animalName:"cat"},{animalName:"dog"}]} ];

//use this to assign run-function
var a = new Animal();

//assign run-function to received data
persons[0].animals[0].run = a.run;

//now this works
persons[0].animals[0].run();

</script>

答案 3 :(得分:1)

如何在Person类上创建一个静态方法,它将接受您的服务器响应并创建所需的变量。

这只是一个想法。请查看这是否适合您的问题。

//Static method
Person.createObjects = function( response ) {
    var persons = [];
    for ( var p = 0; p < response.length; p++ ) {
        //Create Person
        var person = new Person( response[p].personName );
        //Create Animals
        for ( var a = 0; a < response[p].animals.length; a++ ) {
           var animal = new Animal( response[p].animals[a].animalName );
           //Push this animal into Person
           person.animals.push ( animal );
        }
        //Push this person in persons
        persons.push ( person );
    }
    //Return persons
    return persons;
}

//Now Create required persons by passing the server response
var persons = Person.createObjects ( response );