Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

“This” in JavaScript

bjorn.tipling.com

Post reply on HN
Print view View original

31–40 of 99 posts

Re: “This” in JavaScript

#31

Post by xiaoma »

couchand wrote: post #16

The author critically misunderstands the way that `this` gets set, and in doing so has developed a significantly overcomplicated mental model. This is exemplified in the statement: You can use this in any function on an object to refer to other properties on that object. This is not the same as an instance created with new. ... Note, there was no use of new , no Object.create and no function called to create obj. Thi…

Even more simply, I'd just say:

1) The keyword "this" refers to whatever is left of the dot at call-time.

2) If there's nothing to the left of the dot, then "this" is the root scope (e.g. Window).

3) A few functions change the behavior of "this"—bind, call and apply

4) The keyword "new" binds this to the object just created

So if you're using the value of "this" in someFunction...

  thing.someFunction(); // this === thing
  someFunction();       // this === Window
  new someFunction();   // this === the newly created object
It's as simple as that. It's a very useful keyword.

Re: “This” in JavaScript

#32

Post by RobertKerans »

xiaoma wrote: post #31
couchand wrote: post #16

The author critically misunderstands the way that `this` gets set, and in doing so has developed a significantly overcomplicated mental model. This is exemplified in the statement: You can use this in any function on an object to refer to other properties on that object. This is not the same as an instance created with new. ... Note, there was no use of new , no Object.create and no function called to create obj. Thi…

Even more simply, I'd just say: 1) The keyword "this" refers to whatever is left of the dot at call-time. 2) If there's nothing to the left of the dot, then "this" is the root scope (e.g. Window). 3) A few functions change the behavior of "this"— bind , call and apply 4) The keyword "new" binds this to the object just created So if you're using the value of "this" in someFunction... thing.someFunction(); // this ===…

Wow. I don't think this is a particularly hard concept, but that's an excellent way of visualising it and will definitely help when I'm debugging.

Re: “This” in JavaScript

#33

Post by amitamb »

I understood these concepts by reading this book. It is great book for anyone wanting to go from intermediate to advanced or may be even beginner to advanced level

http://www.manning.com/resig/

You can go on using Javascript for years without understanding some basic concepts like "value of this does not depend on where that function is defined but the way it is called".

Re: “This” in JavaScript

#34

Post by kristiandupont »

I hated JS in the beginning, trying to make write it more like I write C# or C++ (I have experience with other languages, but the syntax lead me to believe that this style would be best suited). I wrote "self = this" a lot.

Now, I have adopted a much more functional style and I find JS increasingly pleasant to work with every day. To the point where many of the new ES6 features are a bit worrying because it looks like they want to take it in the direction of what I wanted it to be when I started. At this point, using "this" or "prototype" is almost a smell -- they're useful at times but whenever I use them something in the back of my mind tells me that I could probably be doing something more elegant.

Re: “This” in JavaScript

#35

Post by ebi »

xiaoma wrote: post #31
couchand wrote: post #16

The author critically misunderstands the way that `this` gets set, and in doing so has developed a significantly overcomplicated mental model. This is exemplified in the statement: You can use this in any function on an object to refer to other properties on that object. This is not the same as an instance created with new. ... Note, there was no use of new , no Object.create and no function called to create obj. Thi…

Even more simply, I'd just say: 1) The keyword "this" refers to whatever is left of the dot at call-time. 2) If there's nothing to the left of the dot, then "this" is the root scope (e.g. Window). 3) A few functions change the behavior of "this"— bind , call and apply 4) The keyword "new" binds this to the object just created So if you're using the value of "this" in someFunction... thing.someFunction(); // this ===…

This is exactly how I explain what "this" is :)

Re: “This” in JavaScript

#36

Post by jschrf »

krilnon wrote: post #9
jschrf wrote: post #4

Earlier quoted context omitted.

TypeScript has these and they're marvelous. They make writing functional style code very enjoyable and not having to capture `this` yourself is alone justification for this developer to never go back to pure JavaScript.

Might you go back when ES6 is widely supported by browsers / Node? I don't mind either way, but since the parent comment mentioned that arrow functions were coming to JS, it was interesting that you specifically said 'never', rather than 'until ES6'.

Yeah I realize that may not have been the clearest statement, thanks. While ES6 is nice, it just doesn't have the elegance and utility of some of the other TypeScript things like generics and the interfacing system.

Also, it will probably be a long time until it can be widely used, given the existence of certain browsers and versions.

Re: “This” in JavaScript

#37

Post by 3beard »

btipling wrote: post #22
couchand wrote: post #16

The author critically misunderstands the way that `this` gets set, and in doing so has developed a significantly overcomplicated mental model. This is exemplified in the statement: You can use this in any function on an object to refer to other properties on that object. This is not the same as an instance created with new. ... Note, there was no use of new , no Object.create and no function called to create obj. Thi…

> The author critically misunderstands the way that `this` gets set... I don't actually. (I'm the author) I know that the this key word is executed at run time to figure out what this is. It is true there are simpler ways to explain this and this blog post isn't that. I link to such a post at the bottom of my own. These are just some examples. There's also more to that blog post than what everyone is discussing, like…

I like your article and it fits well with my usual methodology of grokking something, namely running a bunch of tiny examples until I see the patterns.

Re: “This” in JavaScript

#38

Post by no_gravity »

xiaoma wrote: post #31
couchand wrote: post #16

The author critically misunderstands the way that `this` gets set, and in doing so has developed a significantly overcomplicated mental model. This is exemplified in the statement: You can use this in any function on an object to refer to other properties on that object. This is not the same as an instance created with new. ... Note, there was no use of new , no Object.create and no function called to create obj. Thi…

Even more simply, I'd just say: 1) The keyword "this" refers to whatever is left of the dot at call-time. 2) If there's nothing to the left of the dot, then "this" is the root scope (e.g. Window). 3) A few functions change the behavior of "this"— bind , call and apply 4) The keyword "new" binds this to the object just created So if you're using the value of "this" in someFunction... thing.someFunction(); // this ===…

Can this model explain what "this" is in the context of an event handler?

    o={ f: function() setTimeout(1000,console.log(this)) }
    o.f()
http://jsfiddle.net/5bh7yot5/

Re: “This” in JavaScript

#40

Post by wycats »

nmjohn wrote: post #11

> JavaScript is not such a language. ... There are many “gotchas” I don't disagree, like all languages javascript has its quirks (more than some, fewer than others, all depending on a given developers perspective) but I fail to see this conclusion being supported by the article itself. Basically every quirk in it was a result of 'use strict' preventing a developer from leaking variables (and thus `this`) in ways they…

> The only real quirk I see here is the fact that strict mode isn't enabled by default (or better yet not even an option to turn off) but that is because it would kill backwards compatibility

Worth noting: modules in ES6 are "strict by default", which means that most new code will be in strict mode, without compatibility hazards. Transpilers emit `"use strict"`, so anyone using one of the ES6 module transpilers is already writing 100% strict code.

Post reply on HN