了解javascript对象（声明的不同类型）

Question

I am trying to understand the javascript objects, but I am having a hard time with the different types of declarations.

As I read there are two main way to define an object

Method 1:

var student1 = {
    name: "Peter Foti",
    course: 'JavaScript',
    grade: 'A',
    dispInfo: function(){
         return this.name + ' has an ' + this.grade; 
    }
};

Method 2:

function student (a, b, c) {
    this.name = a;
    this.course= b;
    this.grade = c;
    this.dispInfo = function(){
         return this.name + ' has an ' + this.grade; 
    }
}

For the method 2 I understand the concept, if I want to create a variable of type student I simply need to call :

student1 = new student("Jean Dupont", "wine tasting", "A");
console.log(student1.dispInfo);

However, with the method 1, how can I create a student2 without writing again all the inner function such as dispInfo?

I would like to do something like

var student2 = {
    name: "Olivier Perraut",
    course: 'Pétanque',
    grade: 'F'
};

console.log(student2.getInfo);

Answer 1

The first method is for creating an object that you only ever intend to have one of. It's for singletons. It creates the student1 object directly.

The second method is a constructor function . Constructor functions can be used again and again to create as many of these objects as you need.

By convention, constructor functions should be initially-capped (eg, Student rather than student ), like JavaScript's own objects ( Date , RegExp , ...).

You could use the JavaScript prototype chain so that all of the Student objects use the same dispInfo function (with different this values) rather than creating a dispInfo for every object:

function Student (a, b, c) {
    this.name   = a;
    this.course = b;
    this.grade  = c;
}
Student.prototype.dispInfo = function(){
     return this.name + ' has an ' + this.grade; 
};

var s1 = new Student("Mary", "Algebra", "A");
var s2 = new Student("Joe", "Classical Sculpture", "B+");

As of ES5 (and this is possible with "shims" as well, for older browsers), you don't have to use a constructor function to have objects that share a prototype, you can use Object.create to do that. I prefer constructor functions, but you can also use builder functions:

var StudentPrototype = {
    dispInfo: function(){
        return this.name + ' has an ' + this.grade; 
    }
};
function BuildStudent(a, b, c) {
    var student    = Object.create(StudentPrototype);
    student.name   = a;
    student.course = b;
    student.grade  = c;
    return student;
}
var s1 = BuildStudent("Mary", "Algebra", "A");
var s2 = BuildStudent("Joe", "Classical Sculpture", "B+");

Note that we don't use new with builder functions, just with constructor functions. (It's usually harmless if you did, but it's unnecessary and misleading to anyone reading the code, so you don't want to.)

Or you don't even need the builder function in that simple case, you can just use Object.create directly, but it's a bit cumbersome because if you pass in property descriptors (the second argument), each one has to be an object describing the property, not just a value for it (there's a good reason for that), so you have to do {value: "the value"} (of course, you might want to specify other things about the property, like whether it's enumerable , etc.):

var StudentPrototype = {
    dispInfo: function(){
         return this.name + ' has an ' + this.grade; 
    }
};
var s1 = Object.create(StudentPrototype, {
        name:   {value: "Mary"},
        course: {value: "Algebra"},
        grade:  {value: "A"}
});
var s2 = Object.create(StudentPrototype, {
        name:   {value: "Joe"},
        course: {value: "Classical Sculpture"},
        grade:  {value: "B+"}
});

Personally, I prefer constructor functions, but the great thing about JavaScript is that it supports multiple styles of programming, including ones where things like builders or using Object.create directly are more appropriate.

Answer 2

JavaScript is a so-called prototype-based object-oriented language. This means that objects don't get their behavior defined by classes, traits, mixins etc., but instead inherit it directly from other objects.

So, if you want to have a student2 that behaves like a student1 with only some minor differences, then you simply inherit from student1 and override those properties that are different. In JavaScript, prototypal inheritance is set up using the Object.create function, which takes in the object to inherit from and an optional property descriptor map with the overridden properties.

var student1 = {
    name: "Peter Foti",
    course: 'JavaScript',
    grade: 'A',
    dispInfo: function() { return this.name + ' has an ' + this.grade; }
},

    student2 = Object.create(student1, {
    name:   { value: 'Olivier Perraut' },
    course: { value: 'Pétanque' },
    grade:  { value: 'F' }
});

console.log(student2.dispInfo());
// Olivier Perraut has an F

Often times, you will see a pattern emerging, where instead of having "business" objects inherit directly from each other, you will set up a pristine "template" object and have all your business objects inherit from that, kind of like this:

var studentTemplate = {
    dispInfo: function() { return this.name + ' has an ' + this.grade; }
},

    student1 = Object.create(studentTemplate, {
    name:   { value: 'Peter Foti' },
    course: { value: 'JavaScript' },
    grade:  { value: 'A' }
}),

    student2 = Object.create(studentTemplate, {
    name:   { value: 'Olivier Perraut' },
    course: { value: 'Pétanque' },
    grade:  { value: 'F' }
});

console.log(student1.dispInfo());
// PeterFoti has an A

console.log(student2.dispInfo());
// Olivier Perraut has an F

By the way, I think it would be a good idea to make dispInfo a getter property instead of a method:

var studentTemplate = {};

Object.defineProperty(studentTemplate, 'info', {
    get: function() { return this.name + ' has an ' + this.grade; }
});

var student1 = Object.create(studentTemplate, {
    name:   { value: 'Peter Foti' },
    course: { value: 'JavaScript' },
    grade:  { value: 'A' }
});

console.log(student1.info);
// PeterFoti has an A

Answer 3

Try this. Though I would prefer to go with the method 2 to achieve this.

var student1 = {
    name: "Peter Foti",
    course: 'JavaScript',
    grade: 'A',
    dispInfo: function(){
         return this.name + ' has an ' + this.grade; 
    }
};

function GenerateObject (objValues)
{
    var object = Object.create(student1);
    for(var i in objValues)
    {
        object[i] = objValues[i]
    }
    return object;
}
var student2 = GenerateObject({
    name: "Olivier Perraut",
    course: 'Pétanque',
    grade: 'F'
    });