I've read the topic about "new" keyword in javascript (What is the 'new' keyword in JavaScript?). But, i'm still in the fog; let's talk about this example :
var foo = function() {
return {
setA: function(a) {
this.a = a;
},
readA: function() {
console.log(this.a);
}
};
};
And now what's about these two pieces of code :
One:
var bob1 = foo();
bob1.setA(10);
bob1.readA();
Two:
var bob2 = new foo();
bob2.setA(10);
bob2.readA();
I cannot see any differences at my level. So what is the gain to use the keyword "new" ?
If your function returns object directly, then you do not need an new operator.
The new keys does more than that.
Lets say
function Animal(kind, name) {
this.kind = kind;
this.name = name;
}
Animal.prototype.walk = function() {
console.log('Walking');
}
Then you are doing
var animal = new Animal();
Javascript engine will do following things
var o = Object.create(Animal.prototype)
Animal.apply(o, arguments);
return o;
Object.create will do the prototype inheritance of the prototype object of Animal function. So animal object will have its own properties and its inherited property.
i'm still in the fog about new; let's talk about this example :
var foo = function() {
return {
setA: function(a) {
this.a = a;
},
readA: function() {
console.log(this.a);
}
};
};
We shouldn't talk about this example. Whether or not we use new with this function does not make a difference, because of the way new works:
A new object is created, inheriting from foo.prototype.
The constructor function foo is called with the specified arguments and this bound
to
the newly created object.
The object returned by the constructor function becomes the result
of the whole new expression. If the constructor function doesn't
explicitly return an object, the object created in step 1 is used
instead. (Normally constructors don't return a value, but they can
choose to do so if they want to override the normal object creation
process.)
Step 3 is the thing to look at here. You're creating and returning an object (the object literal), so that will become assigned to bob1. Usually, constructor functions do not return anything, and the new instance that is implicitly created in step1 (and available inside the function as this) becomes the result.
Both new foo() and foo() do only assign your object literal to the bob variable - no difference in the result. The instance created by the new is totally ignored by your code. It would be different in the following examples:
function foo() {
this.setA = function(a) {
this.a = a;
};
this.readA = function() {
console.log(this.a);
};
// return this; is implicit
}
var bob = new foo; // OK
var bob = foo(); // horrible error
If the constructor function foo returns an object, then new foo() is identical to calling the function foo() directly. We can prove this is so by examining the ECMAScript behavior for new:
Return the result of calling the [[Construct]] internal method on constructor [i.e., the constructor function]...
The [[Construct]] internal method of a function is a special wrapper for calling the function's [[Call]] internal method (which is just the function's normal behavior). Let's see the end of [[Construct]] to see how this wrapper behaves:
8) Let result be the result of calling the [[Call]] internal property of F [the function invoked by new], providing obj as the this value and providing the argument list passed into [[Construct]] as args.
9) If Type(result) is Object then return result.
10) Return obj.
In your case, your constructor function foo returns an object, so step 9 of [[Construct]] (and therefore, in turn, new foo()) returns that object. But we see in step 10 that [[Construct]] could return some other value called obj, which is equal to the this value inside the constructor. Let's rewind and see what that's all about:
1) Let obj be a newly created native ECMAScript object.
...
4) Let proto be the value of calling the [[Get]] internal property of F with argument "prototype".
5) If Type(proto) is Object, set the [[Prototype]] internal property of obj to proto.
Here we see the real power of new: if the constructor function does not return an object (and therefore the [[Construct]] operation launched by new is allowed to return obj), then prototypal inheritance takes place. The [[Prototype]] of obj (a.k.a. obj.__proto__) is set to the prototype property of the constructor method. This means that if foo doesn't return an object (and instead modifies this), and foo.prototype.someProp is set, then an instance returned from var instance = new foo() will have access to instance.someProp.
Thus, a different way to write your code might be:
var foo = function() { };
foo.prototype.setA = function(a) { this.a = a; };
foo.prototype.setA = function(a) { console.log(this.a); };
In this case, new foo() produces an object whose prototype chain includes foo.prototype, while foo() does not. This has the benefit of lower memory use: all foo instances here share common prototypal methods, instead of having each instance carry its own separate functions.
Related
What is the difference between creating an object using an inline object constructor and creating an object by immediately invoking a contructor? I have always done the latter as it free's me from having to call something like init() myself and feels like the right thing to do, but I keep seeing the object notation in other people's code and was wondering if there is another difference I am not seeing.
Example:
window.fooModule = {
init: function() {
this.bar = "cee";
doStuff();
},
doStuff: function() {
...
}
}
window.fooModule.init();
Example2:
window.fooModule = new function(){
this.bar = "Cee";
this.doStuff = function() {
...
}
this.doStuff();
}
In first notation variable fooModel is object created without constructor call, in second notation fooModel is object created with call of constructor as anonymous function, so when using new keyword constructor function is called and object is created from its prototype ( in this example no prototype is declared so it is standard object prototype).
Conclusion
Use second notation if Your object has to call some code
when is created, use first if not.
More about second notation
Second notation enables also using local ( private ) variables and functions inside constructor, because constructor give us own scope.
var obj=new function(){
var priv="Local scope variable";
var method=function(){
console.log("Local method");
};
this.doStuff=function(){
//here local methods and variables can be used
};
};
Second notation with constructor and new is more often used with standard constructor function declaration and prototype declaration. This is correct way if We need to create more then one object. Methods and every shared properties should be declared in prototype not in constructor.
var ExampleClass=function(bar){
//constructor
this.bar = bar;
};
ExampleClass.prototype.doStuff=function(){
};
Creating such object:
var a=new ExampleClass("A bar"); //a.bar is "A bar"
var b=new ExampleClass("B bar"); //b.bar is "B bar"
Objects a and b have the same prototype ( it saves memory ) but they can have different properties set in constructor.
OffTop
In javascript is so many possibilities to create objects, I have third example how run code in first notation:
window.fooModule = {
init: function() {
this.bar = "cee";
this.doStuff();
return this;//return this
},
doStuff: function() {
}
}.init();//run init after object notation
I create object and run init in one time.
let the 1st example return obj1 and 2nd example return obj2
obj1 will have [[Prototype]] is an object. This object has constructor property is "function Object()"
obj2 will have [[Prototype]] is an object. This object has constructor property is anonymous function.
The way in 2nd example is usually used to achieve something we call "singleton"
Bonus: This stuff is easy to confused, but if you want to dig deeper, here is a good post for you
https://zeekat.nl/articles/constructors-considered-mildly-confusing.html
There are objects and there are object definitions prototypes. Neither of your examples are object definitions prototypes.
window.fooModule = function(bar){
this.bar = bar;
(this.doStuff = something => {
console.log(this.bar,'is doing', something || 'something');
})();
};
[a,b]= [new fooModule('a'), new fooModule('b')];
If you simply want to create an object, then you can skip the new and this operator.
(window.fooModule = {
bar : 'Cee',
doStuff : something => {
console.log(foo.bar,'is doing', something || 'something');
}}).doStuff();
This question already has answers here:
What does "return this" do within a javascript function?
(4 answers)
Closed 7 years ago.
Crockford's book JavaScript the Good Parts talks about a function for augmenting basic types. His function looks like this:
Function.prototype.method = function (name, func) {
this.prototype[name] = func;
return this;
}
I don't understand how / why the 'this' variable is used here. I've only used 'this' when calling that function with 'new', but this function is instead called like this:
Number.method('integer', function () {
return Math[this < 0 ? 'ceil' : 'floor'](this)
});
this refers to the Object which the function was referenced though when invoked.
var obj = {fn: function() {return this;}};
obj.fn(); // obj
var fn = obj.fn;
fn(); // window or null or error
fn.call(obj); // obj
fn.apply(obj); // obj
method is on Function.prototype, this means all Function instances inherit method and this inside method is expected to refer to the function instance which you're invoking it though, i.e.
Function.prototype.getThis = function () {return this;};
function hello() {}
hello.getThis(); // hello
// and consequently
hello.getThis().getThis().getThis().getThis().getThis(); // hello
Constructors are Functions too. Therefore all constructors inherit the method. The method example here hence means "Add a property name to the prototype inherited by instances of this (the constructor) and set the value of that property to func, then return the constructor so you can chain it"
function Foo() {}
Foo.method('bar', 'baz').method('fizz', 'buzz'); // Foo
var foo = new Foo();
foo.bar; // "baz", inherited from Foo.prototype
foo.fizz; // "buzz", inherited from Foo.prototype
this refers to its execution context. More precisely, it's used inside a function, and refers to the object that invoked it.
I am learning javascript and would love help understanding the snippet of code.
From Object.DefineProperties definition, the first parameter is an object. Is MyObjectConstructor a declaration or an object. With a constructor function I would expect to call new to make it an object.
This is what is confusing me. Or as I read in Javascript functions are objects so do I treat it as an object and the this property is where all staticProps and instanceProps are added to?
var _prototypeProperties = function (child, staticProps, instanceProps) {
if (staticProps){
Object.defineProperties(child, staticProps)
};
if (instanceProps) {
Object.defineProperties(child.prototype, instanceProps);
}
};
function myFunction() {
function MyObjectConstructor(element) {
this.element = element;
this.initialized = false;
}
_prototypeProperties(MyObjectConstructor, {...}, {...});
}
Yes, (constructor) functions are objects as well in javascript, and you can add properties directly to them.
The _prototypeProperties function in your example snippet does put the staticProperties on the constructor, so that they could be accessed as MyObjectConstructor.myStaticProperty. It also does put instanceProps (better: "class properties", "prototype properties") on the MyObjectConstructor.prototype object, from where they are inherited by instances: (new MyObjectConstructor).myPrototypeProperty. Lastly, your MyObjectConstructor does put "real" (own) properties on the instances, specifically (new MyObjectConstructor).element and .initialised.
In JavaScript, once defined, the resulting functions act identically:
function Hat() { }
var Hat = function() { }
Conventionally the first is used to create objects (usually with new) and the second is used as a regular method.
The new operator, when preceding a function gets kinda weird. Using the new operator will:
create a new Object "it"
set the function being called as "it"s prototype
binds "it" to this within the function
overrides the return value of the function with "it". This overrides both explicit returns and implicit returns of undefined.
For example:
// first define Hat function
function Hat() { this.color = 'red' }
// calling with `new` implicitly returns a new object bound to the function
new Hat()
// > Hat { color: "red" }
// invoking without `new` implicitly returns `unefined`,
// but `this` points to Hat's parent object.
// If running in the browser, Hat's parent object would be `window`
// so now Window.color is set to "red"
Hat()
//> undefined
Window.color
//> "red"
Be careful with new, because the new object will be returned instead of any explicit returns.
var color = function() { return "blue" }
color()
//> "blue"
new color()
//> color {}
JavaScript is prototypal by nature. The new operator reflects neither prototypical nor classical inheritance. I avoid it when possible, although many popular libraries use it.
I recommend reading through Crockford's explanation of JavaScript's prototypal inheritance: http://javascript.crockford.com/prototypal.html
Its terse, but if you understand his 10 lines of demo code you'll be good.
Play with bind, call and apply, and different scoping contexts too. After understanding scoping and the prototypal nature, the rest is just syntax.
first : the function is the first type object in the javascript . it means you can deliver the function as value . for example :
function test(){
return function(){
console.log('function');
}
}
test()();
you return the function as return an object , function can be assigned and the function another kind of value !
var test = function(i) {
// body...
return i;
}
test('123');
a character string 'test' refer to a Anonymous function , you can understand that you transmit a function to a character string .
second : if you use new to create a instance via function , this function will be called construction function , normally it used to init the params , and the instance will take the construction function own property or method and prototype's property or method from the construction function .
third : the instance's property of "__proto__" is refer to the construction function's prototype object . this is why the instance can use the prototype's property or method from the construction function .
forth : if you create the instance by new , the this will refer to the instance object ! so that instance can use the property and method .
from your code :
var _prototypeProperties = function (child, staticProps, instanceProps) {
if (staticProps){
Object.defineProperties(child, staticProps)
};
// the properties from the own construction function , like this :
// this.element = element;
// this.initialized = false;
if (instanceProps) {
Object.defineProperties(child.prototype, instanceProps);
}
};
// the properties from the construction function's prototype object . like this :
// MyObjectConstructor.prototype.name = 'somebody';
// MyObjectConstructor.prototype.getName = function(){
// return this.name;
// }
If I can use obj.constructor.prototype to access the prototype of an object, then why can't I use obj.constructor.prototype.constructor.prototype to traverse the prototype chain and have to use Object.getPrototypeOf?
function MyConstructor()
{
this.prop = 1;
}
var o = new MyConstructor();
console.log(o.constructor.prototype) // MyConstructor
console.log(o.constructor.prototype.constructor.prototype) // MyConstructor?
Shouldn't it return the prototype of MyConstructor which is function() { [native code] } (in Chrome console)?
All constructors are instances of the global Function object:
function Foo(){ this.x = 1 }; // Dummy constructor function
console.log(Foo instanceof Function) // => true; Foo is an instance of global Function constructor
All prototypes are instances of the global Object object:
console.log(Foo.prototype instanceof Object); // => true
When a constructor Foo is defined, it automatically has a Foo.prototype object attached to it, which you can think of as a "blank" object that itself, as per the above, inherits from the global Object object. In other words, the prototype of Foo.prototype is Object.prototype:
function Foo(){ this.x = 1 }; // Dummy constructor function
console.log(Foo.prototype); // Foo (object); already exists
console.log(Object.getPrototypeOf(Foo.prototype) === Object.prototype); // => true
Since Foo.prototype is a blank object, one would expect its constructor to be the global Object constructor function:
function Foo(){ this.x = 1 }; // Dummy constructor function
console.log(Foo.prototype.constructor) // => function Foo() { this.x = 1; } ??
console.log(Foo.prototype.constructor === Object.prototype.constructor); // => false
However this "blank" object has an explicit self-referential constructor property that points back to function Foo(){ this.x = 1 } and overwrites or "masks" the default constructor property you are expecting:
function Foo(){ this.x = 1 }; // Dummy constructor function
delete Foo.prototype.constructor; // Delete explicit constructor property
console.log(Foo.prototype.constructor) // => function Object() { [native code] }
console.log(Foo.prototype.constructor === Object.prototype.constructor); // => true
Therefore you can't use obj.constructor.prototype recursively to traverse the prototype chain and have to rely on the Object.getPrototypeOf() method.
Here's a great visual reference.
If I can use obj.constructor.prototype to access the prototype of an object
You can't in general. Consider how this approach works:
var proto = MyConstructor.prototype;
// has an (nonenumberable) property "constructor"
proto.hasOwnProperty("constructor"); // `true`
// that points [back] to
proto.constructor; // `function MyConstructor() {…}`
As you see, that's a circular property structure. When you do
var o = new MyConstructor();
// and access
o.constructor; // `function MyConstructor() {…}`
// then it yields the value that is inherited from `proto`
// as `o` doesn't have that property itself:
o.hasOwnProperty("constructor"); // `false`
But that only works for object like o that inherit the constructor property from their prototype object and where that has a useful value with something pointing to the prototype object. Think of
var o = {};
o.constructor = {prototype: o};
Oops. Accessing o.constructor.prototype yields o itself here, and it could have been any other nonsensical value. The structure actually is the same as above with MyConstructor.prototype - and if you access proto.constructor.prototype.constructor.prototype[.constructor.prototype…] you won't get anything else than just proto.
then why can't I use obj.constructor.prototype.constructor.prototype to traverse the prototype chain and have to use Object.getPrototypeOf?
Because you're trapped in the circular structure as MyConstructor.prototype) has that constructor property itself and not inherited from Object.prototype. For really getting the next object the true prototype chain, you have to use Object.getPrototypeOf.
var o = new MyConstructor();
console.log(o.constructor.prototype) // MyConstructor
It should have been MyConstructor.prototype actually. Chrome console sometimes gets confused at displaying useful titles for unnamed objects though, and is not always correct.
If you get its prototype, it should yield Object.prototype, and when you get the prototype of the MyConstructor function itself it should be Function.prototype. Notice that you can do the latter by MyConstructor.constructor.prototype again…
I am just curious whether I can include an object into function prototype chain. What I mean:
var test = function() { return 'a'; };
console.log(test.bind(this)); // return new bound function
// changing the prototype
// in console the prototype is really set as needed
// test => new object => function prototype => Object prototype
var F = function() {};
F.prototype = Function.prototype;
test.prototype = new F();
console.log(test.bind()); // this still works and returns new bound function
test.prototype.bind = function() {
return 'test';
};
console.log(test.bind()); // this does not work as expected -> returns new bound function instead of 'test'. When I do delete Function.prototype.bind, then console.log(test.bind) returns undefined
You have a function test. It is a instanceof Function, and inherits from Function.prototype so that you can call test.bind for example.
Then you set the "prototype" property of your function to an object inheriting from Function.prototype. That means that all instances of test will inherit from that object (and from Function.prototype):
var t = new test;
t instanceof test; // => true
t instanceof Function; // => true
Then you overwrite the test property on your custom prototype object. You do good to do so, because Function methods should only be called on functions (i.e. callable objects):
>>> Function.prototype.bind.call({})
Unhandled Error: Function.prototype.bind: this object not callable
In your tests with console.log you only apply the Function methods on your test function, not on instances of it. Good, because they'd fail. So, I can see no reason why any objects should inherit from Function - you can't construct functions that don't inherit directly from Function.