41–50 of 99 posts
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 lik…
Earlier quoted context omitted.
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/
Earlier quoted context omitted.
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/
Basically your code is doing this right now:
o.f = function(){
console.log(this); // logs `o`, returns `undefined`
setTimeout(1000, undefined);
});
o.f = function(){
setTimeout(1000, function(){
console.log(this);
});
};
Earlier quoted context omitted.
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/
But first, let me fix some errors in your code.
You probably meant to write syntactically correct code, so first line changes to following:
o={ f: function() { setTimeout(1000,console.log(this)) } }
So the code changes to:
o={ f: function() { setTimeout(function() { console.log(this); }, 1000); } }
o.f()
- You create and object with property 'f'
- You call the function stored within that property
- Within Execution Context of that function call, `this` is going to be equal to our object. Note that we have not yet used `this`.
- We call setTimeout, passing it function as a callback.
- After one second, that function is called, with new Execution Context, not equal to the first one. `this` there is equal to global scope variable.
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…
The anti-pattern around "this" is well-known for decades. For example, SICP explicitly mentions that anti-pattern. Of course, it doesn't refer to JavaScript, but to some other old programming language which had a keyword with very similar issues. I think it's not a hyperbole to say that in this regard, the JavaScript/ECMAscript language designers haven't learned from the past.
The main issue is that "this" violates lexical context. Fortunately, the lexical context is easily restored by declaring a normal variable, usually named "me", and using the fact that variables have always lexical scope in JavaScript (as it should be):
var me = this;
someFunctionWithCallback(function() {
me.something(...);
});
someFunctionWithCallback(function() {
this.something(...);
}, this);
someFunctionWithCallback({
callback: function() {
this.something(...);
},
scope: this
});The "this" keyword in JavaScript is a well-known anti-pattern. Although it can be explained with a few rules, it becomes cumbersome quickly. The anti-pattern around "this" is well-known for decades. For example, SICP explicitly mentions that anti-pattern. Of course, it doesn't refer to JavaScript, but to some other old programming language which had a keyword with very similar issues. I think it's not a hyperbole to…
strict mode + arrow functions bring a little more sanity to JS.
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 lik…
Isn't ES6 backwards compatible?
Earlier quoted context omitted.
The article was a nice refresher about 'this' subtleties, but it put too much work into contrasting it against Java's this, instead of just laying out the actual JS rules. To me, 'this' is JS is a lot more self explanatory than this is Java. And your article doesn't make that apparent. In JS this is just another object, like any other object. It follows the exact same scoping rules as every other object.
>In JS this is just another object, like any other object. You are mistaken, "this" is not an object nor a variable, it's a keyword and behaves differently than variable scope. Consider closures for example.
Even knowing this rule very well and being totally hard core OCO (Obsessive Compulsive ORDER, not Disorder) about the code, I still make "this" mistake ALL THE TIME, so whenever something weird happens, "this" mistakes are the first thing I look for.
"this" is such a terrible design flaw, it bites me even when I'm expecting it.
Earlier quoted context omitted.
Isn't ES6 backwards compatible?
Sure, but the standard is going to influence the direction that the language evolves in, how most libraries are written and so on.