I am very confused about how constructors work in JavaScript; despite using the language for several years (mostly as if it were like a semi-imperative version of Lisp) I would like to know more about how objects are supposed to work in it.
Given this code:
function Foo(x) {
return {
bar: function() { return x; }
};
}
What is the difference between calling myFoo = Foo(5) and myFoo = new Foo(5)? Or, in other words, what exactly does a constructor in JavaScript do?
What is the difference between calling
myFoo = Foo(5)andmyFoo = new Foo(5)?
There's no difference for that code, because it returns an object, and the spec says:
- Let result be the result of calling the [[Call]] internal property of F, providing obj as the
thisvalue and providing the argument list passed into [[Construct]] as args.- If
Type(result)isObjectthen return result.
Since that function returns a result that is an Object, its result is used. You would notice a difference if it did not return an object, or if it checked this, for example if you rewrote it as:
function Foo(x) {
if (!(this instanceof Foo)) { return new Foo(x); }
this.bar = function() { return x; };
}
// Now instanceof works.
alert((new Foo) instanceof Foo);
What does
newin JavaScript do, anyway?
The new operator causes the function to be called with this bound to a newly created Object whose prototype is that function's prototype property.
For user-defined functions,
new f(a, b, c)
is equivalent to
// Create a new instance using f's prototype.
var newInstance = Object.create(f.prototype), result;
// Call the function
result = f.call(newInstance, a, b, c),
// If the result is a non-null object, use it, otherwise use the new instance.
result && typeof result === 'object' ? result : newInstance
Note, that the language specification actually defines functions with two operations, [[Call]] and [[Construct]], so there are some corner cases where new behaves oddly.
For example, bound and built-in functions:
var g = f.call.bind(f);
should define a function that when called, just calls f, so g should be the same as f in all respects, but
new g()
produces
TypeError: function call() { [native code] } is not a constructor
because the builtin function Function.prototype.call supports [[Call]] but not [[Construct]].
Function.prototype.bind also behaves differently around new and regular calls. The this value is always the bound thisValue when called, but is a newly constructed instance when you use new.
result = f.call(newInstance, a, b, c), result && typeof result === 'object' ? result : newInstance as it is not using comma-operator the rightmost expression is evaluated, but not returned (returns leftmost expression). Are you certain it shouldn't be result = (f.call(newInstance, a, b, c), result && typeof result === 'object' ? result : newInstance) instead (parantheses turns it into comma operator; evals left-to-right, returns rightmost expression)? var a, b; a = 0, 1; b = (0, 1); console.log(a, b); // prints "0 1" –
Robertaroberto function f() {return true}; var newInstance = Object.create(f.prototype), result = {}; result = f.call(newInstance), result && typeof result === 'object' ? "aaa" : "bbb"; console.log(typeof result, result); outputs boolean true. So no, when typeof applies, result is assigned return-value of f. While with the parantheses I suggested you get string aaa instead. –
Robertaroberto In this particular example, there's no difference in the end result.
This is because your Foo function is returning an object instance.
The new operator returns a newly created object that inherits from the constructor's prototype only when the function returns a primitive value (or it doesn't return anything, which is technically the undefined value).
For example:
function Foo () {
return 5; // or "", or null, or no return statement at all (undefined)
}
var foo = new Foo();
typeof foo; // "object"
foo instanceof Foo; // true
Foo.prototype.isPrototypeOf(foo); // true
When you return an object, the newly created object that inherits from the constructor's prototype is simply discarded:
function Foo () {
return {};
}
var foo = new Foo();
typeof foo; // "object"
foo instanceof Foo; // false
Foo.prototype.isPrototypeOf(foo); // false
See also:
In this instance there will not be any difference as you are returning a new object. It could be rewritten as:
function Foo(x){
this._x = x;
}
Foo.prototype.bar = function() {
return this._x;
}
With this syntax, each time you call new Foo, it will create a new object with a property of _x. The benefit is that the bar function will be stored once and reused for multiple instances of Foo. With the code in the question calling Foo() multiple times, it will create a bar function for every instance. So attaching functions to the prototype rather than having them directly on the object will be lighter in memory.
A full breakdown of how the prototype works can be found at MDN.
© 2022 - 2024 — McMap. All rights reserved.