Adding Prototype to JavaScript Object Literal

问题

STORE = {
   item : function() {
  }
};
STORE.item.prototype.add = function() { alert(\'test 123\'); };
STORE.item.add();

I have been trying to figure out what\'s wrong with this quite a while. Why doesn\'t this work? However, it works when I use the follow:

STORE.item.prototype.add();

回答1:

The prototype object is meant to be used on constructor functions, basically functions that will be called using the new operator to create new object instances.

Functions in JavaScript are first-class objects, which means you can add members to them and treat them just like ordinary objects:

var STORE = {
   item : function() {
  }
};

STORE.item.add = function() { alert('test 123'); };
STORE.item.add();

A typical use of the prototype object as I said before, is when you instantiate an object by calling a constructor function with the new operator, for example:

function SomeObject() {} // a constructor function
SomeObject.prototype.someMethod = function () {};

var obj = new SomeObject();

All the instances of SomeObject will inherit the members from the SomeObject.prototype, because those members will be accessed through the prototype chain.

Every function in JavaScript has a prototype object because there is no way to know which functions are intended to be used as constructors.

回答2:

After many years, when JavaScript (ES2015 arrives) we have finally Object.setPrototypeOf() method

const STORE = {
  item: function() {}
};


Object.setPrototypeOf(STORE.item, {
  add: function() {
    alert('test 123');
  }
})


STORE.item.add();

回答3:

You can use JSON revivers to turn your JSON into class objects at parse time. The EcmaScript 5 draft has adopted the JSON2 reviver scheme described at http://JSON.org/js.html

var myObject = JSON.parse(myJSONtext, reviver);

The optional reviver parameter is a function that will be called for every key and value at every level of the final result. Each value will be replaced by the result of the reviver function. This can be used to reform generic objects into instances of pseudoclasses, or to transform date strings into Date objects.

myData = JSON.parse(text, function (key, value) {
    var type;
    if (value && typeof value === 'object') {
        type = value.type;
        if (typeof type === 'string' && typeof window[type] === 'function') {
            return new (window[type])(value);
        }
    }
    return value;
});

回答4:

As of this writing this is possible by using the __proto__ property. Just in case anyone here is checking at present and probably in the future.

const dog = {
    name: 'canine',
    bark: function() {
        console.log('woof woof!')
    }
}

const pug = {}
pug.__proto__ = dog;

pug.bark();

However, the recommended way of adding prototype in this case is using the Object.create. So the above code will be translated to:

const pug = Object.create(dog)

pug.bark();

Or you can also use Object.setPrototypeOf as mentioned in one of the answers.

Hope that helps.

回答5:

STORE = {
   item : function() {
  }
};

this command would create a STORE object. you could check by typeof STORE;. It should return 'object'. And if you type STORE.item; it returns 'function ..'.

Since it is an ordinary object, thus if you want to change item function, you could just access its properties/method with this command.

STORE.item = function() { alert('test 123'); };

Try STORE.item; it's still should return 'function ..'.

Try STORE.item(); then alert will be shown.

来源：https://stackoverflow.com/questions/1592384/adding-prototype-to-javascript-object-literal

标签

javascript

Prototype

object-literal