Relationship of Function object and Javascript object

Question

Recently I read a tutorial which says if define the function like below.

function Animal() { }

On the surface, this code seems to create a function called Animal. But with JavaScript, the full truth is slightly more complicated. What actually happens when this code executes is that two objects are created. The first object, called Animal, is the constructor function itself. The second object, called Animal.prototype, has a property called Animal.prototype.constructor, which points to Animal. Animal has a property which points back to its prototype, Animal.prototype.

But I have little confuse about it .What about the Function object ?What is the use for the Animal object?

And If I write code like below .

var test= new Function();

and I inspected the variable test in the Developer tool of the Chrome. I found test is nothing to do with the Function. Can someone tell me why ? thanks.

enter image description here

Updated

The diagram below is the objects relationship when the code is executed, please review it. If my understanding is wrong. please correct me. thanks.

If my understanding is wrong. please correct me. thanks.

The variable "test" is a reference to the Function object. That's clear from what you posted; note that the value of "test" is function anonymous() {} — Pointy
– Pointy, Commented Apr 18, 2013 at 15:32
:) I was confused by what exactly the test is a Function object or test object ?(from the definition we can see it is created an object named test.) . — Joe.wang
– Joe.wang, Commented Apr 18, 2013 at 15:35
It's an object, and specifically an object constructed by the Function constructor. There's no such thing as a "test" object in your example code. If, after setting "test" as you did, you then wrote var test2 = new test();, then "test2" would refer to an object constructed by "test". — Pointy
– Pointy, Commented Apr 18, 2013 at 15:38
It's true that two objects are created: the Function instance, and its prototype object. The prototype object is a property of the Function object. The value of the new Function() expression is a reference to the Function object, not the prototype. — Pointy
– Pointy, Commented Apr 18, 2013 at 15:43
+1 for a question where someone is trying to learn something instead of just do something :) This may seem completely irrelevant, but it would make sense if you followed my train of thought. Anyways, if you're up for a bit of a gamble, check out this link and see if it helps with the concept of function Animal() { ... } as three separate functions (with more nested functions within). It might also very much not help.. — asifrc
– asifrc, Commented Apr 18, 2013 at 16:12

Pointy · Accepted Answer · 2013-04-18 16:53:26Z

That blog post goes into a lot of detail that's interesting but unnecessarily confusing for most people most of the time.

First, let's talk about functions; forget about prototypes for a minute. When you create a function:

function Whatever() {
  // ...
}

you've created an object. That is, all functions are objects, and they're constructed via the Function built-in constructor. The symbol "Whatever" in this example will have as its value a reference to that object.

Given a reference to a function, it's possible to call it:

Whatever(); // call the function

It's possible to take that value (the reference to the function object) and assign it to another variable, or pass it as a parameter to another function, or to use it just like any other value in JavaScript.

var another = Whatever;
another(); // also calls the "Whatever" function

Constructing a function via the Function constructor explicitly is something that's rarely done, but it gives you a function that's otherwise unremarkable. (In the OP, the constructed function doesn't do anything because no code was passed to the Function constructor.)

Now, things get interesting when a function is invoked as part of a new expression.

var test = new Whatever();

By using new, a new object is instantiated and associated with the "Whatever" function. The "Whatever" function is the constructor for that new object.

Every function object, whether it's ever used as a constructor or not, has an associated "prototype" object. When a function is used as a constructor, then objects it constructs (that is, objects made in new expressions that invoke the function) are implicitly associated with that prototype object.

The prototype object becomes interesting when an object property reference expression is evaluated. Object property references look like this:

obj.name
obj[ nameExpression ]

In such an expression, the property name (either the identifier used in the . expression or the value of the expression inside [ ]) is checked against the set of properties on the object directly. If the name is not the same as one of the object's properties, then the runtime consults the prototype object associated with the constructor function used to make the object.

For most code that most people write, that relationship and some of its direct implications are the only things to worry about. You don't have to fool around with the (non-standard, at this time) "proto" property of objects unless you're putting together some sort of library or framework.

Finally, it might be instructive to look at the Object.create() function and in particular the "polyfill" shown in that documentation.

Collectives™ on Stack Overflow

Relationship of Function object and Javascript object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related