In Javascript, functions are objects. Yet typeof of a function returns function instead of object for ECMAScript compatibility reasons.
Is this function type actually some kind of wrapper for object that can be determined somehow? Or in Javascript, is a function actually fundamentally different from objects?
I do understand that functions are effectively and practically objects. But are they by definition actually completely separate from Objects in Javascript, or is there a way to programmatically reveal the Object that the Function is made of?
As the spec says:
an object is a member of the built-in type Object; and a function is a callable object
So
Or in Javascript, is a function actually fundamentally different from objects?
Not really, except for the fact that a function is callable - more precisely, that it has a [[Call]] internal method.
Functions inherit from objects in a very similar way that objects inherit from objects. For example, for a given function:
function foo(){}
foo.a = 'a';
There is:
The foo function, which is an object, and has a [[Call]] internal method, as well as an a property, and a few other properties that functions have (like name)
The foo function inherits from Function.prototype
Function.prototype inherits from Object.prototype
Object.prototype inherits from nothing - that's the start of the prototype chain
is there a way to programmatically reveal the Object that the Function is made of?
That's not really how it is - the function itself is an object. If the function object has properties, it'll be visible directly on the function. For example, above, referencing foo.a will give you the string 'a'. The a property isn't separate from the function - it's directly on the function object.
The picture below shows that a function has a proto and a prototype, I understand that a proto is an object that is used to look up the chain. Does a prototype contain the actual prototype? Is that the distinction? Also the object A and B in this picture don't have a prototype property but I assume that if you create a prototype property it would show up on the object?
I am new to JavaScript and I am following Douglas Crockford's book, The Good Parts.
It says:
Every function object is also created with a prototype property. Its value is an object with a constructor property whose value is the function. This is distinct from the hidden link to Function.prototype.
I understand that function objects are linked to Function.prototype, but what does the above line mean?
Can someone simplify it for me?
Every function object is also created with a prototype property.
var fn = function() { };
fn.hasOwnProperty("prototype"); // true
That is, for every function in JavaScript, each one has a prototype property, just like any other JavaScript object.
Its value is an object with a constructor property whose value is the function.
The object that prototype points to has a constructor property which points to the original function.
fn.prototype.constructor === fn // true;
That is, you can derive the constructor function from a constructed object by looking at obj.prototype.constructor (unless it's been overwritten).
This is distinct from the hidden link to Function.prototype
The function you create's prototype object is not the same as the Function's prototype.
fn.prototype != Function.prototype // true
That is, if you augment Function.prototype, then the methods will be available on function references. If you augment your function's prototype, then those methods will be available on constructed objects using that constructor.
It is said every javascipt object have internal prototype property,then predefined Function object also have the internal prototype property.So which object prototype does its internal prototype called proto points to?
function Object(){}
alert(Object.constructor)//function Function(){[native code]}
so i m referring to the internal prototype of the function Function(){} object not its prototype property . like Function object instance have their internal prototype pointing to Function object.prototype likewise Function object internal prototype point to what?not taking about the prototype property that gets added to it.I know what will the internal prototype of the prototype object points to.
All objects inherit from Object.prototype, but they may inherit from other prototypes as well depending on the type of object. Functions inherit from Function.prototype (which inherits from Object.prototype).
In Javascript, functions are just a specific type of object. Thus a function's prototype is the same thing as an object's prototype. For more reading on functions as objects, check out this link.
In the book "JavaScript the definitive guide 5 edition", section 9.2 Prototypes and Inheritance, I find the following words:
In the previous section, I showed that
the new operator creates a new, empty
object and then invokes a constructor
function as a method of that object.
This is not the complete story,
however. After creating the empty
object, new sets the prototype of that
object. The prototype of an object is
the value of the prototype property of
its constructor function. All
functions have a prototype property
that is automatically created and
initialized when the function is
defined. The initial value of the
prototype property is an object with a
single property. This property is
named constructor and refers back to
the constructor function with which
the prototype is associated. (You
may recall the constructor property
from Chapter 7 ; this is why every
object has a constructor property.)
Any properties you add to this
prototype object will appear to be
properties of objects initialized by
the constructor.
Now, if that is true, how could prototypal inheritance exists? I mean, let's say the prototype object of a constructor function has a constructor property initially. Because the prototype object itself is an object, to determine its constructor we often use prototype_object.constructor. But now the prototype_object already has a constructor property itself, and it points to the constructor function with which the prototype is associated. In this situation how can inheritance exists?
The .constructor property honestly doesn't matter very much, and has very little to do with inheriting from other objects in JavaScript. It's just a convenient handle to an object's constructor.
For example, if you have an instance of something, and you'd like to create another instance of that thing, but you don't have a direct handle on its constructor, you could do something like this:
const myCar = new Racecar();
console.log(myCar.constructor); // [Function: Racecar]
const car2 = new myCar.constructor();
console.log(car2.constructor); // [Function: Racecar]
It's important to understand that the .constructor property and the class of an object are not synonymous. As you may have already guessed, the .constructor property is dynamic, just like most other things in JavaScript, so it should not be used for anything like type checking.
It's also important to understand that the .constructor property does not mean that something is a subclass of something else. In fact, there is no reliable way to find out if something is a subclass of something else in JavaScript. Because it's a dynamic language, and because there are so many ways to inherit properties from other objects (including copying properties from other objects after instantiation), type-safe subclasses don't exist in JavaScript like they exist in other languages.
The best way to know if something is a compatible type is to feature-test properties. In other words, duck type.
The instanceof operator ignores the .constructor property. Instead, it checks whether or not the constructor's .prototype exists (with an identity check) in the prototype chain of the object.
With manual constructor functions, inheritance can confuse the .constructor property connection (making it refer to the wrong constructor). You can fix it by manually wiring up the connection. For example, the canonical way to do so in ES5 is this:
function Car () {}
console.log(Car.prototype.constructor); // Car
function Racecar () {}
Racecar.prototype = Object.create(Car.prototype);
// To preserve the same relationship we have with the Car
// constructor, we'll need to reassign the .prototype.constructor:
Racecar.prototype.constructor = Racecar;
var myCar = new Racecar();
console.log(myCar.constructor); // [Function: Racecar]
ES6 classes do this for you automatically:
// ES6
class Car {}
class Racecar extends Car {}
const myCar = new Racecar();
console.log(myCar.constructor); // [Function: Racecar]
That said, I'm not a big fan of either constructor functions or ES6 classes, and I generally have little use for the .constructor property. Why? Because factory functions are far more flexible, far more powerful, and they don't have the pitfalls related to constructor functions and class inheritance. See "Factory Functions vs Constructor Functions vs Classes".
Let say, Dog is a Mammal.
function Mammal() {
this.milk = true;
};
function Dog() {
this.bark = true;
}
Dog.prototype = new Mammal;
So prototype of Dog points to an object of Mammal. This Mammal object has a reference to its constructor so when Dog is new, JavaScript see that Dog prototype is a Mammal so Mammal's constructor is called to produce a valid Mammal object (another one) then make it a Dog object using Dog constructor.
From this, the constructor of Dog.prototype is a Mammal (a Mammal Object that has extra fields and functions added) BUT constructor of Dog is Dog. The inheritance exist because the an instance of Dog has a Mammal as a prototype; hence, Dog is a Mammal. When a method is called and JS cannot find it from Dog.prototype, JS look in Mammal.prototype (which is an Object that has extra fields and functions added).
Hope this helps.
Don't worry about the constructor property - it is irrelevant.
Skip those sentences and you might follow it better.
If you are still unsure of your understanding, google for __proto__ - the internal prototype reference on JS objects. It is even exposed to scripts on Firefox and Safari.
A good reference is https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties
If you have an object obj, it's prototype is obj.prototype and constructor property referring to obj's constructor is obj.prototype.constructor.
For the object obj.prototype the situation is the same. Let's say proto = obj.prototype, then the reference to the constructor of proto would be found at proto.prototype.constructor.
This is the same as obj.prototype.prototype.constructor, so there is no conflict with obj.prototype.constructor.