JavaScript对象和文字符号

Question

I just cleared my mind on JavaScript objects and my question is really simple for most of the people here. I feel comfortable with the JavaScript object literal notation like:

var Obj = {
    /**
     * @type {string}
     */
    name: '',

    /**
     * setName
     * Set the `name` property.
     * 
     * @param param
     */
    set setName (param) {
        this.name = param;
    }
};

The only limit I found is that if I want to create two completely separate objects in the same page, with this notation I can't.

var a = Obj;
a.setName = "John";

var b = Obj;
b.setName = "Peter";

// OUTPUT
// a.name -> Peter
// b.name -> Peter

Set var whatever = Obj is just useless, 'cause it doesn't instantiate n separate objects and it just overwrites the code above. Using new keyword such as var a = new Obj doesn't work neither (probably I'm using it in the wrong way?). The solution I came up with is returning the object inside a function, like:

function Obj() {
    return {
        /**
         * @type {string}
         */
        name: '',

        /**
         * setName
         * Set the `name` property.
         *
         * @param param
         */
        set setName (param) {
            this.name = param;
        }
    }
}

This way I can create two different objects and correctly access to their properties and methods:

var a = Obj();
a.setName = "John";

var b = Obj();
b.setName = "Peter";

// OUTPUT
// a.name -> John
// b.name -> Peter

So, my question are:

• Is what I've done conceptually right?
• Is there a more correct/efficient way to achieve it?

Answer 1

Your concept of a function that returns an Object instance is valid, but your implementation is very brittle because it is only set up to work with specific properties. Read on for more details on various ways to create instances and a more flexible way to return objects...

var a = Obj; doesn't create a new object. It just assigns a the memory address of the existing object Obj .

 var myObj = {}; // Object instance is created and memory location is stored in myObj var a = myObj; // No new object is created. a and myObj point to the same object console.log("Are 'a' and 'myObj' both pointing to the same object?", a === myObj); // true 

If you want to design a single object and then make more of that object, you need to be able to create "instances" of an object. You can't do that directly with an object literal:

 var myObj = { someProp:10 }; var myNewObj = new myObj(); // Fails because an object literal can't be instantiated 

But, you can do it with the Object.create() method, which takes your Obj concept to fruition :

 // Object instance is created and memory location is stored in myObj var myObj = { someProp: "default", // "Methods" are just properties with functions as their value someMethod: function(input){ // The || syntax that follows allows for a default value for the method // if no argument is passed to the method. this.name = input || "default"; } }; // Create a new Object instance and set myObj as the prototype of the instance. // This means that the new instance will inherit from that prototype: var a = Object.create(myObj); console.log(a.someProp); // "default"; a.someProp = "something specific"; a.someMethod("Test"); myObj.someMethod(); console.log(a.name, myObj.name); // "Test" "default" console.log(a.someProp, myObj.someProp); // "something specific", "default" 

Instances can be explicitly made with the new operator and a constructor function:

 function foo(){ this.someProp = "something"; } var a = new foo(); // Unique instance of foo var b = new foo(); // Separate and distinct instance of foo a.someProp = 10; b.someProp = 20; console.log(a.someProp, b.someProp); // 10 20 

Or, the new operator and a class :

 class foo{ constructor(val) { this.someProp = val; } } var a = new foo(10); // Unique instance of foo var b = new foo(20); // Separate and distinct instance of foo console.log(a.someProp, b.someProp); // 10 20 

Answer 2

Have you tried with Object.create() ?

 var b = { setName : "Mongo" }; a = Object.create(b); a.setName = "John"; b.setName = "Peter"; console.log(a.setName); console.log(b.setName);