How to differentiate between factory objects and functions? - javascript

I learnt that one way objects could be created in JavaScript (factory function) is as follows:
var newPerson=function(name){
var result = new Object();
result.name = name;
result.getName = function(){
return this.name;
};
return result;
};
var personOne = newPerson("Diego");
var personTwo = newPerson("Gangelo");
console.log(personOne.getName()); // prints Diego
console.log(personTwo.getName()); // prints Gangelo
Well, I found somewhere that a function could be created as follows:
var hello = new Function('alert("Hello, World!");');
So how could I know an object from a function if they're declared in the same manner?

If it helps, the line
var hello = new Function('alert("Hello, World!");');
is essentially the same as
var hello = function() { alert("Hello, World!"); };
...except for some complications around binding. In practice, there's almost never any reason to use new Function(...).
You can tell what kind of object you're dealing with using a couple of options:
typeof provides a fairly gross indication (in this case, "object" vs. "function").
Object.prototype.toString.call(whatever) gives you more information by (for objects defined by the spec) giving you strings like [object Object] or [object Function] or [object Array].
More in my blog post Say what? which deals with figuring out what things are in JavaScript (and why you rarely actually need to).

"how could i know an object from a function if they're declared in the same manner?"
Well... since the Function constructor returns function objects, you could simply use typeof to test it .
typeof hello === "function"; // true
typeof personOne === "function"; // false
The "factory function" is just a fancy term for a function you wrote that returns a new object. It's an alternate way of creating an object from using an object constructor.
So if I want a function that creates new objects, I can use a function as a constructor, which requires that I invoke it with new:
function MyObj() {
this.foo = "bar"
}
var o = new MyObj();
Or I could use this "factory" pattern:
function MyObj() {
return {
foo: "bar"
}
}
var o2 = MyObj();
Both of them create a new object, but the first way gives you an extra prototype object that you can extend without affecting other objects.
Neither of these approaches make a function object.
JavaScript has built in constructors for creating native objects and primitives. Constructors like:
Function
Array
Object
RegExp
...and so on.
These are built in to the environment, and can be used to create new native data. But JS also gives you the ability to build your own constructors. That's what I did in the example above.
Your own constructor returns an Object, but again, it is linked to a clean prototype object that can be extended for all objects created from that constructor.

Related

What the different between `new Array(n)` and `Array(n)`

What the different if both of them call the constructor "Array" and generate an object?
I know that we lost this if we create some object without new:
function Animal(name) {this.name = name}
var duck = Animal('duck'); // undefined
But how that works for new Array(n) and Array(n)?
There is no difference. Check this article:
You never need to use new Object() in JavaScript. Use the object
literal {} instead. Similarly, don’t use new Array(), use the array
literal [] instead. Arrays in JavaScript work nothing like the arrays
in Java, and use of the Java-like syntax will confuse you.
Do not use new Number, new String, or new Boolean. These forms produce
unnecessary object wrappers. Just use simple literals instead.
...............................
So the rule is simple: The only time we should use the new operator is
to invoke a pseudoclassical Constructor function. When calling a
Constructor function, the use of new is mandatory.
Such behaviour for Array is described in spec.
You can achive the same behaviour like this
function Animal(name) {
if(!(this instanceof Animal)) {
return new Animal(name);
}
this.name = name
}
var duck = Animal('duck'); //Animal {name: "duck"}
But a better idea would be to follow a simple code style convention that all functions starting with a captial letter are constructors and should be called with new. And set up a linter you prefer to check your code follows this rule.
JavaScript uses prototypal inheritance . When you use new command, It inherits from Object . Incase you want to inherit from an user defined object (e.g. Animal) you need to use new Animal() or without using new you can do it in following way.
// Function object acts as a combination of a prototype
// to use for the new object and a constructor function to invoke:
function Animal(name){
this.name = name
}
var inheritFrom = function(parent, prop){
// This is how you create object as a prototype of another object
// var x = {} syntax can’t do this as it always set the newly
//created object’s prototype to Object.prototype.
var obj = Object.create(parent.prototype);
// apply() method calls a function with a given this value
//and arguments provided as an array
parent.apply(obj, [prop]);
return obj
}
var duck = inheritFrom(Animal, 'duck');
console.log(duck.name); // ‘duck’

Object.create works new() doesn't

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.
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.
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.
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.

Creating an object using a constructor with and without `new`

I have noticed I can create the same object using a constructor in two different ways.
var myObj = Object()
var myObj = new Object()
I can add properties to both using these methods. myObj.age = 1 and myObj['age'] = 1. The properties of both can be accesed the same way.
So what is the actual difference between these two ways I created myObj? Also is one of these the better way to create an object?
The difference is that the first one simply calls Object() as a function, within the scope of the window object.
The second one actually instantiates a new object. It's the one you want to use to create an object.
The difference may not be obvious with the Object() function, but let's say you create your own type, like so:
function User(name) {
this.name = name;
}
var u1 = User("John");
var u2 = new User("Jane");
console.log(u1); // *undefined* because `User()` doesn't return anything.
console.log(this.name); // John
console.log(window.name); // John
console.log(u2.name); // "Jane"
The Object function itself is a special case--it does create a new Object. But since most functions don't work that way, it's good to get in the habit of using the new keyword when instantiating things. If you're just creating a plain old Object, on the other hand, most people prefer the more concise syntax:
var myObj = {};
The first statement is a function call, meaning that myObj will get whatever is returned in the Object() function. As it happens, the function Object() will provide you with a reference to an Object object, whereas 'normal' constructors will not.
See f.e. the following:
function O(){
this.bla= "bla";
return this;
}
Calling O() here will yield a reference to window, not to an instance of O.

javascript subclassing not working as expected when returning methods in constructor function

I'm not understanding why in the following code, obj.BaseMethod doesn't return the method defined in BaseClass constructor. In other words, why is it that
SubClass.prototype.BaseMethod
is defined, but
new SubClass().prototype.BaseMethod
is undefined.
http://jsfiddle.net/HvxJ4/4/
I'm obviously missing something important here.
function BaseClass() {
var privatestuff = "blah";
return {
BaseMethod: function() {
console.log('BaseMethod called');
}
}
}
function SubClass() {
var moreprivates = "stuff";
return {
SubClassMethod: function() {
console.log('SubClassMethod called');
}
}
}
SubClass.prototype = new BaseClass();
var obj = new SubClass();
obj.SubClassMethod(); // SubClassMethod called
obj.BaseMethod(); // Uncaught TypeError: undefined is not a function
UPDATE
I actually understood how to get my code working using
this.method = function() { }
in my constructor function. I just didn't understand why the code above didn't do the same thing.
The answer is that if you return an object in a constructor function, you are no longer using "protoypal" inheritance.
The thing that makes this most clear to me was this answer
https://stackoverflow.com/a/2118831/834770
Quoting Douglas Crockford in Chapter 5, Inheritance, of JavaScript:
(...)
Douglas Crockford then explains how the new operator could be
implemented as a JavaScript function. This function makes use of
several other functions defined in the book, so I rewrote it in a
(somewhat) simpler form below:
function createNew(constructor) {
// a function to explain the new operator:
// var object = createNew(constructor);
// is equivalent to
// var object = new constructor();
//
// param: constructor, a function
// return: a new instance of the "constructor" kind of objects
// step 1. create a new empty object instance
// linked to the prototype of provided constructor
var hiddenLink = function(){};
hiddenLink.prototype = constructor.prototype;
var instance = new hiddenLink(); // cheap trick here: using new to implement new
// step 2. apply the constructor the new instance and get the result
var result = constructor.apply(instance); // make this a reference to instance within constructor
// step 3. check the result, and choose whether to return it or the created instance
if (typeof result === 'object') {
return object;
} else {
return instance;
}
}
So, in short, if you return an object in this function, then the inheritance bit is effectively ignored.
Here's a way to think of the statement
new SubClass().prototype.BaseMethod
First, the new keyword tells JavaScript to create a new, empty object, i.e. {}
Then JavaScript sets the context (this) to be equal to that new object and calls the function after new. So in this case JavaScript will look for a function to call, but your syntax doesn't reference a defined function, so the result is undefined.
Contrast that with a typical approach for defining objects in JavaScript:
function ExampleObject() {
// stuff related to the example object
this.exampleProperty = "value";
}
var exObj = new ExampleOject();
In this case new creates the empty object {} as before, but now there is a defined function to call. When this function is called, the newly created object (set equal to this) will have an exampleProperty set equal to "value". The resulting object is then assigned to the variable exObj.
It may sound strange to those coming from a Java background (or similar), but JavaScript doesn't really support the concept of classes. The language made the unfortunate choice of trying to make it's prototypical inheritance look like classical inheritance, but it's really not the same. If you're going to be spending a lot of time in JavaScript, you might want to stop trying to think in terms of classes and subclasses and learn a bit about prototypes instead.

What difference is there in JavaScript between a constructor function, and function returning object which is invoked as a constructor?

I know this is not the recommended way of doing it, but if I declare the following functions, and then invoke them as constructors, what will be the difference (if any) between the resulting objects?
function Something() {
this.foo = "bar";
}
function something2() {
var that = {};
that.foo = "bar";
return that;
}
var x = new Something();
var y = new something2();
var z = something2();
I.e. what will differ between x, y and z here?
Wouldn't something2 be a much better way of writing the constructor, since whether you use new or not will not affect the result of the function?
BTW should something2 be capitalized here? (I assume not since Crockford is so adamant on the capitalization, for functions will clobber the global namespace...)
In short:
new something2() instanceof something2 === false
Relatedly, if you extend your example to use the prototype property
Something.prototype.method = function () { };
something2.prototype.method = function () { };
you will find that the prototype is not inherited in the latter case:
typeof (new Something()).method === "function"
type (new something2()).method === "undefined"
The real answer is that you are tapping into entirely different underlying machinery. Calling with new invokes the [[Construct]] mechanism, which involves setting the [[Prototype]] property according to the .prototype property of the constructor.
But a funny thing happens in steps 8--10 of the [[Construct]] algorithm: after setting up a new, empty object, and then attaching its [[Prototype]], it does a [[Call]] to the actual constructor, using this new empty-plus-prototype object as this. And then, in step 9, if it turns out that that constructor returned something---it throws away that prototypally-bound, passed-as-this object that it spent all that time setting up!
Note: you can access an object's [[Prototype]] (which is different from a constructor's .prototype) with Object.getPrototypeOf:
Object.getPrototypeOf(new Something()) === Something.prototype // steps 5 & 6
Object.getPrototypeOf(new something2()) === Object.prototype // default
To answer some meta-questions:
No, don't capitalize something2, since it is a factory function and not a constructor. If something is capitalized, it is expected to have constructor semantics, e.g. new A() instanceof A.
If you're worried about the danger of clobbering the global namespace, you should start using strict mode, by putting "use strict"; at the top of your files. One of the many nice cleanups of strict mode is that this defaults to undefined, not the global object, so e.g. calling a constructor without new will result in errors the moment the constructor tries to attach properties to undefined.
Factory functions (aka the "closure pattern") are in general a reasonable substitute for constructors and classes, as long as you are (a) not using inheritance; (b) not constructing too many instances of that object. The latter is because, in the closure pattern, you attach a new instance of every method to every newly-created object, which is not great for memory usage. The biggest payoff, IMO, of the closure pattern is the ability to use "private" variables (which are a good thing, and don't let anyone tell you otherwise :P).
In the second case, the returned object doesn't inherit anything from the constructor, so there's little point in using it as such.
> var x = new Something();
> var y = new something2();
> var z = something2();
I.e. what will differ between x, y and z here?
x inherits from Something, wheres neither y or z inherit from something2.
Wouldn't something2 be a much better way of writing the constructor,
since whether you use new or not will not affect the result of the
function?
There is no point in calling something2 as a constructor because the object it returns isn't the newly constructed object assigned to its this that inherits from something2.prototype, which is what others might expect to get when calling new something2().
BTW should something2 be capitalized here? (I assume not since
Crockford is so adamant on the capitalization, for functions will
clobber the global namespace...)
No, because calling it as a constructor is a bit pointless, so characterising it as one would be misleading.
I'd say the most important thing would be the prototype of the returned objects.
function Something() {
this.foo = "bar";
}
Something.prototype = {
// Something prototype code
hello: function(){
//...
}
}
function something2() {
var that = {};
that.foo = "bar";
return that;
}
something2.prototype = {
// something2 prototype code
greetings : function() {
//...
}
}
var x = new Something();
var y = new something2();
var z = something2();
typeof x.hello === function // should be true
typeof y.greetings === undefined // should be true
typeof z.greetings === undefined // should be true
In other words, I'd say you're not instantiating objects withe something2, you are creating purely new objects that inherit from Object.
Something() will give you new objects of "Something" type when you use the new keyword.
something2() will give you new objects of "Object" type, which will immediately return a new empty object.
new something2 is inefficient, because you are creating a blank scope, from which you create a new object
var that = {};
which is equivalent to
var that = new Object();
Invoking a function as a constructor (i.e. with the new keyword) runs the following steps:
create a new object
set the prototype of that object to the object in the prototype property of the function
execute the constructor function in the context of that object (i.e. this is the new object)
return that object (if the constructor has no return statement)
So, your second solution will just return a plain object with a property "foo". But neither y nor z are instanceof Something2 and don't inherit from that prototype. There are functions like that, yes, but they should not be called constructors (no uppercase naming, no invokation with new). They belong to the factory pattern.
If you want a constructor which can be executed without new, use that code:
function Something(params) {
if (! this instanceof Something)
return new Something(params);
// else use "this" as usual
this.foo = "bar";
...
}

Categories