explanation on javascript function call passing this

Question

I am reading the "Javascript the Good Parts" book and trying out examples to understand the concepts. I came across one example and could not understand. Please look at the code below and let me understand where I am going wrong:

//Augmenting the Function prototype with method
Function.prototype.method = function(name, func){
  if (typeof this.prototype[name] !== "function"){
      this.prototype[name]=func;
    return this;
  }
}

// why do we have the (this) at the end of the return statement.
/*Number.method("integer", function(){
  return Math[this < 0 ? 'ceil': 'floor'](this);
});*/

//According to me the function should have been like below:
Number.method("integer", function(val){ // we get a function and we need to pass the value and the value will be evaluated and returned.
  return Math[val < 0 ? 'ceil': 'floor'];
});
//According to my understanding the calling function should be something like below.
alert((-10/3).integer(-10/3);

I know that my approach is not working but finding hard to get the reasoning. Please update me with some example to reinforce the concepts.

Sharing the link to the Fiddle - Fiddle - link

Quarter2Twelve · Accepted Answer · 2016-02-04 15:37:31Z

1

Math[val < 0 ? 'ceil': 'floor'] is a function. Think about Math.ceil or Math.floor.

So the method you added to Number will return a function instead of a value.

While add (this) at the end of the line will call this function with the value of caller, in your case -10/3. So it will return the expected value to you.

answered Feb 4, 2016 at 15:37

Quarter2Twelve

6131 gold badge7 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

zilcuanu Over a year ago

In that case, does it imply that (-10/3) is an object and then I call the function integer on the object and when I call a function on the object, the this keyword will point to the object and hence, the Math[ceil | floor]gets the reference to the object i.e (-10/3). Is my understanding correct ? Please comment.

Quarter2Twelve Over a year ago

Yes, everything is right except that (-10/3) is actually a primitive, but when you try to call a method of it, javascript will wrap it as Number(-10/3), which is a true object.

zilcuanu Over a year ago

One more learning for me. when we call say 2.toString(), we get an error where it is treated as primitive, whereas when we call (2).toString(), we get "2". Is my hypothesis that putting a number inside the parenthesis gets treated as an object whereas just calling 2.toString() is treated as primitive correct?

Quarter2Twelve Over a year ago

It is actually a javascript interpreter thing. The dot after 2 will be priorly interpreted as the demical dot (say, 2.17). And note that 2. is actually valid in javascript and you can do things like var a = 2.; So it is not because it is treated as primitive, it is because interpreter didn't understand that you are going to call a method on 2. A tricky way to do it is 2..toString(), where the first dot is interpreted as decimal dot and the second one is as method call dot. (sorry didn't find a better name for these two.)

Bergi · Accepted Answer · 2016-02-04 15:35:27Z

According to my understanding the calling function should be something like (-10/3).integer(-10/3)

That's where your misconception is. Why should you need to repeat the number? No, the method is supposed to be called as

(-10/3).integer() // -3

without any arguments - the value it acts on is the Number instance (this in the method).

If you were going to pass the number as the argument, there would be no need to make it a method, rather it should be a static function:

Number.integer = function(val) {
    return Math[val < 0 ? 'ceil': 'floor'](val);
//                                         ^^^ still passing it here, of course
};
Number.integer(-10/3) // -3

Such is viable as well, especially when the argument is not guaranteed to be a number, as can be seen by various static Number and Math functions.

Collectives™ on Stack Overflow

explanation on javascript function call passing this

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related