4 вида путаницы с this в функциях

4 Ways Functions Mess With this

In Javascript, the this keyword can be a tricky thing. It's trickiness comes from how functions behave differently depending on how you call them. What? You can call them differently? Yep! There's 4 major invocation patterns for a function, so let's see how each works, and how they handle this.

1. Method Invocation

2. Function Invocation

3. Constructor Invocation

4. Apply Invocation

Method Invocation

The first patten of using functions will look the most familiar. When you come from classical programming languages (C#, Java), you're likely used to classes being the only building blocks of a program. Nothing can exist without a class. You only have a function that is a method of a class. And it's super simple what this relates to.

Well, that is the same way method invocation works in Javascript. If you define an Object, and make one of its properties a function, then when you execute that method, this will be the Object that owns it.

var Obj = {

something: 'a string',

changeSomething: function() {

//this == Obj

return this.something.toUpperCase();

}

};

Obj.changeSomething(); //returns 'A STRING'

var Obj = {

something: 'a string',

changeSomething: function() {

//this == Obj

return this.something.toUpperCase();

}

};

Obj.changeSomething(); //returns 'A STRING'

Anytime we call changeSomething of Obj, like above, we know this will be Obj, so we don't have to repeat the name of the object constantly. This is also the same if we were to clone the object. this would reference the object that owns the method.

Function Invocation

The second pattern, might look a little stranger, and seem to behave strange also, but once you realize a few things about Javascript, you'll see there is logic behind it (yes, really!). The next pattern is commonly called the Function invocation, and this is basically where we define a function all by its lonesome self. This is possible because in Javascript, functions are first-class objects. So they can be passed around, stored, all the good stuff. But let's assume we know all this.