Object.create works new() doesn't

Question

Having this:

sillyObject = {
    init: function init(sillySettings) {
        name = sillySettings.name
    }
};

sillyObject.showAlert = function(x) {
    return alert(x);
};

When I run this code:

var sillyvar  = new sillyObject()
sillyvar.init(mySettings);
silly.showAlert("silly!");

I get an error but instead if I run the same thing using Object.create it runs..

var sillyvar  = Object.create(sillyObject);
sillyvar.init(mySettings);
silly.showAlert("silly!");

Any (silly) help will be appreciated.

You're [leaking the `name` variable](http://blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html) — Bergi, Jun 02 '15 at 22:47

score 2 · Answer 1 · edited May 23 '17 at 12:30

2

If you tried doing new sillyObject(), the error you get is Uncaught TypeError: object is not a function since sillyObject is an object and not a function.

This answer gives a good overview on the new keyword.

Object.create does not do the same thing as new. It will create a new object with sillyObject as the prototype.

edited May 23 '17 at 12:30

Community

1
1

answered Jun 02 '15 at 22:37

TheDude

3,796
2
28
51

Travis J · Accepted Answer · 2015-06-03T04:42:45.193

new and Object.create are two fundamentally different things.

new is going to expect to be followed by a function, and if not (as you saw) it will give you an error. That is because new expects to call a constructor function and then use that as a basis for a new execution context. During that context, the function has this bound to the scope of the execution context. Once the function is done executing it returns the this value which usually has had some data attached to it. In your example, that would look like this:

function sillyObject() {}
sillyObject.prototype.init = function(sillySettings) {
   //perhaps you wanted to attach this name to the sillyObject?
   name = sillySettings.name;
   //which would look like this
   this.name = sillySettings.name;
   //because `this` here refers to the object context (remember?)
};
sillyObject.prototype.showAlert = function(x){
   return alert(x);//returning alert simply returns undefined (not sure why this is used here)
};

and then you could use new, it would create the execution context using the constructor and then attach the prototype and you would end up with a new instance of sillyObject (all instances would be different).

var sO = new sillyObject();
sO.init(mySettings);
sO.showAlert("silly!");

Object.create() on the other hand is expecting an object as an argument (which is why your version worked here). It will create a new object using that object argument as a template basically. Or as MDN explains it "The Object.create() method creates a new object with the specified prototype object and properties". This basically creates a copy if nothing else is done with the Object, and that is why the alert worked here but not in the new version.

"*…the function has `this` bound to a new object (typically referred to as a function object):…*". The object created by *new* is an Object object, not a Function. I think it's more common to call it an instance of the constructor or just a new object. — RobG, Jun 02 '15 at 23:14
Maybe I misunderstand your answer. It seems to me that you're saying that the object created by `new someFn` and bound to its *this* is a Function. That would only happen in the case of `new Function()`, which doesn't seem relevant here (also noting that host object constructors can create any kind of object: *new Option*, *new Image*, *new XMLHttpRequest*, etc.). — RobG, Jun 03 '15 at 00:01
@RobG - No, that is not what I was trying to say. I removed the link to Function objects because that was an incorrect response to your first comment. `this` is bound inside of the execution context created by using `new someFn()`. The component is named `ThisBinding` and is one of 3 components of the execution context. The execution context *is* the object. It is where the variable and lexical environments are, and that is where the binding of this occurs. An object is just at a very simple level a memory reference which contains other references. — Travis J, Jun 03 '15 at 04:42
My question was basically if Object.create() can be used as object constructor...if not was the proper way to make an object constructor? thanks! — Frnnd Sgz, Jun 03 '15 at 11:21

score 0 · Answer 3 · answered Jun 02 '15 at 23:00

sillyObject is a Object not a function. new will create a new instance of a function. You probably want to use this or just .prototype

var sillyObject = function () {
    this.sillySettings = {};
}

sillyObject.prototype = {
    init     : function (name) {
        this.sillySettings.name = name;
    },

    showAlert: function (x) { 
       return alert(x);
    }
};

var silly = new sillyObject(); 
silly.init('foo');
silly.showAlert('bar');

this.sillySettings isn't a function so we don't keep it in the prototype. We can keep init and showAlert in the prototype. We use prototype because when using new we use sillyObject() so imagine the variable silly being replaced this sillyObject() showing why we use prototype because silly is instantiated as a function.

Object.create works new() doesn't

3 Answers3