JavaScript: Function Invocation Patterns • Hacker News Board

Re: JavaScript: Function Invocation Patterns

#41

Post by lhorie » Fri, Oct 19, 2012, 5:32 PM UTC

ynniv wrote: post #30

lhorie wrote: post #28

Earlier quoted context omitted.

> `bar` DOES equal 5 No, it doesn't. Javascript is a bit weird when it comes to return statements inside constructors. `bar` will be equal to `type` only if `(type instanceof Object) == true`. Otherwise, it will be a new object. function Foo(type) { this.type = type; return type; } console.log(new Foo(/a/)); // Regexp /a/ console.log(new Foo("a")); // {type: "a"} console.log(new Foo(5)); // {type: 5} console.log(new…

a good time to point out that calling Object() without "new" returns a new object. This is often unexpected when creating inheritance schemes that chain the parent constructor. https://github.com/documentcloud/backbone/pull/1269

Not sure I understand your comment, given the link you gave.

IMHO the return value of calling `Object()` without parameters is exactly what one would expect. Calling it w/ parameters is what I think causes surprising behavior

    var x = {a: 2}
    console.log(x === x)             // true
    console.log(Object(x) === x)     // true
    console.log(new Object(x) === x) // true

For the `Object.call(x)` case, I'd expect it to return a new object (and not x), for the same reason I'd expect [].slice.call(arguments) to return a new array (and not arguments).

Re: JavaScript: Function Invocation Patterns

#42

Post by jessaustin » Fri, Oct 19, 2012, 5:39 PM UTC

huskyr wrote: post #19

locci wrote: post #16

Earlier quoted context omitted.

bind was introduced in ES5 (and previously in most libraries) to fix this https://developer.mozilla.org/en-US/docs/JavaScript/Referenc...

And trivially easy to shim for older browsers. I would really recommend using Function.prototype.bind instead of the 'var self = this' or library bind functions (such as $.proxy), it's just the way it should be written :)

To confirm my understanding, would the erroneous line from the comment above be rewritten like:

    button.onclick = obj.func.bind(obj);

So un-DRY! It's almost admirable, how blatant a hack this is.

Re: JavaScript: Function Invocation Patterns

#43

Post by meanJim » Fri, Oct 19, 2012, 5:39 PM UTC

bazsouthafrica wrote: post #31

Hi Guys I just want to give you some feedbacks in the comments (I am the author of this article). Firstly, with regards to the title, I did not read the newsguidlines document - I have submitted links in the way and style that other people did. For sure, in the future, I will follow these guidlines, but this must be a huge problem as lots of people do this. Secondly, these are patterns (not language features). Yes, I…

For learning more about JavaScript it was a great read.

Re: JavaScript: Function Invocation Patterns

#44

Post by andrewflnr » Fri, Oct 19, 2012, 5:46 PM UTC

cjfont wrote: post #4

user24 wrote: post #3

Should have mentioned call along with apply. Not sure these are patterns rather than just language features.

I agree, this is similar to saying that i+=1 and i++ are increment patterns.

Well, yes, except complicated enough to merit more explanation.

Re: JavaScript: Function Invocation Patterns

#45

Post by mcgwiz » Fri, Oct 19, 2012, 7:21 PM UTC

jlongster wrote: post #26

He's wrong in the "Constructor Invocation" example. function Foo(type) { this.type = type; return type; } var bar = new Foo(5); `bar` DOES equal 5. When you return something in a constructor, it returns it instead of returning the newly constructed object. This is a neat way for constructing different types of things. And most of his complaints are just because he doesn't understand how `this` scoping works in javasc…

"Complaints"? Wha? Did we read the same article? Except for a few asides, he wasn't complaining. He was explaining.

Re: JavaScript: Function Invocation Patterns

#46

Post by rgbrgb » Fri, Oct 19, 2012, 7:52 PM UTC

> Invoking a function suspends execution of the current function, passing controls and parameters to the invoked function.

False. JS functions execute asynchronously, without suspending the execution of the current function.

Re: JavaScript: Function Invocation Patterns

#47

Post by ynniv » Fri, Oct 19, 2012, 10:52 PM UTC

lhorie wrote: post #41

ynniv wrote: post #30

Earlier quoted context omitted.

a good time to point out that calling Object() without "new" returns a new object. This is often unexpected when creating inheritance schemes that chain the parent constructor. https://github.com/documentcloud/backbone/pull/1269

Not sure I understand your comment, given the link you gave. IMHO the return value of calling `Object()` without parameters is exactly what one would expect. Calling it w/ parameters is what I think causes surprising behavior var x = {a: 2} console.log(x === x) // true console.log(Object(x) === x) // true console.log(new Object(x) === x) // true For the `Object.call(x)` case, I'd expect it to return a new object (and…

[].slice.call(arguments) returning a new argument is fundamentally different because you would not want x.slice(1,2) to modify x in order to produce an appropriate sublist to return. Perhaps it's just me, but I expect a constructor to initialize "this" (optionally returning "this"), but not returning {};

Re: JavaScript: Function Invocation Patterns

#48

Post by robocat » Sat, Oct 20, 2012, 4:24 AM UTC

bazsouthafrica wrote: post #31

Hi Guys I just want to give you some feedbacks in the comments (I am the author of this article). Firstly, with regards to the title, I did not read the newsguidlines document - I have submitted links in the way and style that other people did. For sure, in the future, I will follow these guidlines, but this must be a huge problem as lots of people do this. Secondly, these are patterns (not language features). Yes, I…

Nice article.

I think you are missing a fifth way to call a function, a property accessor function (although I have never used one, so not certain!).

Some mention of how somefunc.bind(someobj) affects the "patterns" might also be worthwhile (although maybe confusing!).

Re: JavaScript: Function Invocation Patterns

#49

Post by bazsouthafrica » Sat, Oct 20, 2012, 6:10 PM UTC

willvarfar wrote: post #14

The big bug as I see it is: obj = { get_name = function() { return "I am an object" }, func = function() { alert(this.get_name()); } } This looks dandy, and obj.func() works as expected. but if you pass obj.func as a callback, the this when its invoked will be some other object (by default, the window object): button.onclick = obj.func; // bang when invoked The number of times I got screwed by that. You end up having…

This is exactly the catch with respect to function invocation method that I was trying to point out. It seems that in a call back method, `this` gets bound to the global object. I suspect it is because it is called with the same mechanism that is used for function invocation. That being said, I did not use this example because one needs to implement a callback to see the error. My example that I chose in my article was designed so that anyone could just create the JavaScript, fire it up in a browser, and see the error for themselves.

I do however intend to use an example similar to the one you have presented when I cover closures and scoping in JavaScript.

Re: JavaScript: Function Invocation Patterns

#50

Post by rgbrgb » Mon, Oct 22, 2012, 1:05 AM UTC

rgbrgb wrote: post #46

> Invoking a function suspends execution of the current function, passing controls and parameters to the invoked function. False. JS functions execute asynchronously, without suspending the execution of the current function.

Did I miss something here? Why was this downvoted?