CODEWITHSUNDEEP
javascript
svenyonson
svenyonson

Reputation: 1909

JavaScript - The Good Parts: Function prototypes vs Object prototypes

Just finished reading "JavaScript: The Good Parts" - Great book. But I am confused about a very important topic on page 33-34 - Augmenting types. It describes the creation of a new method added to Function.prototype, so when invoked with a new method, all Functions will have that method available. Fair enough. But the subsequent examples show this method being used on Numbers and Strings. Which, I am thinking, are Objects - not Functions. What am I missing here?

Function.prototype.method = function (name, func) {
    this.prototype[name] = func;
    return this;
};

Usage example:

Number.method('integer', function() {
    return Math[this < 0 ? 'ceiling' : 'floor'](this);
});

document.writeln((-10 / 3).integer()); //-3

Upvotes: 20

Views: 6945

Answers (4)

mostafa kazemi
mostafa kazemi

Reputation: 565

is this demonesrate you can see difference between clearly and obviously enter image description here

[**

enter image description here **]2

Upvotes: 0

John Hou
John Hou

Reputation: 239

Number or Object or other build-in class is also an constructor, then constructor is a function in JavaScript. There are tow important description in ECMAScript specification:

Every built-in function and every built-in constructor has the Function prototype object, which is the initial value of the expression Function.prototype (15.3.4), as the value of its [[Prototype]] internal property.

Unless otherwise specified every built-in prototype object has the Object prototype object, which is the initial value of the expression Object.prototype (15.2.4), as the value of its [[Prototype]] internal property, except the Object prototype object itself.

so in console, we can execute the code:

Number.prototype.__proto__.isPrototypeOf(Function)

the result is true.

so that Number can access the Function.prototype's methods is reasonable.

At the same time, if we extend the Object.prototype as Object.prototype.say = 'hello';, we can also access the property say as Function.say.

Because Function.prototype.isPrototype(Object) is true.

Upvotes: 0

Ouroboros
Ouroboros

Reputation: 1524

Function object vs Function instance object

First of all, in javascript, a function is also an object. From this, I mean not the object created by new () construct, but the function itself. To avoid confusion, I would refer such objects as Function object, and for object created using new () construct of a function as Function instance object.

_ proto _ and prototype properties

Any function object in javascript has two properties: _ proto _ and prototype. Moreover, any Function instance object (created using new constructor) has a property _ proto _ . The _ proto _ is what defines the inheritance. Some good resource on this could be found at

http://zeekat.nl/articles/constructors-considered-mildly-confusing.html

How is inheritance defined?

An object objA inherits another object objC if objA and objC are connected through any number of _ proto _ . So if objA has _ proto _ equal to objB, and objB has _ proto _ equal to objC, then objA inherits objB and objC, while objB inherits objC.

What is meant by inheritance?

It means any inheriting object can use any property of inherited object.

What is Function.prototype

It is the object whom _ proto _ of every function object refers. This means every Function object has access to properties of Function.prototype, since every Function object inherits Function.prototype object. This also means that if method property is added to Function.prototype object, it would be available to all the possible Function objects in javascript. This includes Strings, Number, etc.

this.prototype[name] = func;

this refers to Function object when the 'method' is invoked from Function objects like Number, String, etc. Which means that we now have a new property in Function object with name "name", and its a function 'func'.

What good is prototype property of Function object

A function object's prototype is referred to by the Function instance object's _ proto _ created using that function's new construct.

If the following was executed:

Number.method('integer', function () {...});

then Number.prototype has that integer method defined in it. This means each Number function instance object, e.g. new Number (2.4), would "inherit" this new property 'integer' from Number.prototype, since that Number function instance object would have its _ proto _ set to Number.prototype.

Upvotes: 13

Pointy
Pointy

Reputation: 413720

You add a method to the Number prototype, so every Number instance has access to it. In other words, because there's a property called "integer" on the Number prototype, any attempt to access that property from any Number instance will succeed. That's kind-of the whole point of putting properties on a constructor prototype.

When a JavaScript primitive number appears on the left side of a . operator, the language automatically boxes it in a Number instance so that the method call makes sense.

edit — let's look at how that "method" function works. In the call

Number.method( "integer", function() { ... } )

what's going on? Well, inside the "method" function, the "name" parameter is "integer". The function parameter is then assigned as a property of this.prototype. What is this in that invocation of the "method" function? It's the Number constructor function. Thus, the "method" function — which is on the Function prototype, and therefore is available to all function instances, like the Number constructor function for example — adds the given function as a property of the prototype of the constructor function involved.

Why is the "method" property visible as a property of the Number constructor? Because the Number constructor is itself a function. The "method" function was created as a property of the Function prototype, so that means it is visible to every function instance — including the Number constructor.

Upvotes: 11

Related Questions