/gentle-explanation-of-this-in-javascript/ about dmitripavlutin.com-comments HOT 52 OPEN

cool

from dmitripavlutin.com-comments.

Thank you, perfect article!

from dmitripavlutin.com-comments.

Thank you for writing this guide! I love how thorough and detailed your explanations are! It's perfect!

from dmitripavlutin.com-comments.

This was a really long article and took me 3 days to finish but definately worth it.
It would save me hours and hours of future headaches

from dmitripavlutin.com-comments.

Thanks a million. This is the best material on this subject that i have seen. Thanks

from dmitripavlutin.com-comments.

So long can't read it for once, I'll come back:/

from dmitripavlutin.com-comments.

Thank you for your well-written and helpful articles.

from dmitripavlutin.com-comments.

Hi! 👋 First of all thanks for your great JavaScript articles. Just one question here. Are you sure that sumArguments.name from 7. Arrow function returns "", but not "sumArguments"? I tried this code in my Chrome browser and actually got "sumArguments" instead. [ Demo ]

You're right. At the time I wrote this post, a few years ago, the browser didn't determine the function name. Now it does.

from dmitripavlutin.com-comments.

I read it so well. Can I translate this into Korean and post it on my personal blog? I will definitely leave the source.

from dmitripavlutin.com-comments.

@mugglim Sure, feel free to translate.

from dmitripavlutin.com-comments.

The doubt is whether the arrow functions creates a closure for 'this'?

@Prabhav-Sharma Yes, in a way the arrow function closes over this from the outer function.

from dmitripavlutin.com-comments.

Thank you so much this was very useful

from dmitripavlutin.com-comments.

Thanks a lot! I can see the time you put into creating such a helpful resource. Again thanks, and I appreciate the hard work :)

from dmitripavlutin.com-comments.

Another nice recommendation of The Odin Project 🚀
Beautiful article, very complete and thorough.

Sidenote

If I could make a small adjustment it would be in chapter 3.1. this in a method invocation.
I believe saying that "this is the object that owns the method" makes it seem as if this refers to the object containing the method rather than the object on which this is called, which is rather confusing, in my opinion stating "this is the object that the method has been called on" seems more correct.

from dmitripavlutin.com-comments.

Thank you for your well-written and helpful articles.

You’re welcome @rdwaller!

from dmitripavlutin.com-comments.

Great article! Than you a lot. This is the best explanation I ever read on this theme.

from dmitripavlutin.com-comments.

Great article! Than you a lot. This is the best explanation I ever read on this theme.

Thanks @ottacke1991!

from dmitripavlutin.com-comments.

Best explanation up to now, I have ever read about "this" keyword, Thanks a lot!!

from dmitripavlutin.com-comments.

Best explanation up to now, I have ever read about "this" keyword, Thanks a lot!!

You're welcome @KirtiMittal777!

from dmitripavlutin.com-comments.

Great article, very enjoyable and educational!
I think "return" is missing in:
Country.prototype.travel = function() {
this.traveled = true;
};
Shouldn't it be:
Country.prototype.travel = function() {
return this.traveled = true;
};

from dmitripavlutin.com-comments.

Fantastic explanation, best on the internet, you could use this didactic to explain about Inversion of Control in React, all explanations on the web are not didactic.

from dmitripavlutin.com-comments.

Very informative and well explained article.
@dmitri, how can I buy you a coffee?

Thank you.

from dmitripavlutin.com-comments.

Hi! 👋 First of all thanks for your great JavaScript articles. Just one question here. Are you sure that sumArguments.name from 7. Arrow function returns "", but not "sumArguments"? I tried this code in my Chrome browser and actually got "sumArguments" instead. [ Demo ]

from dmitripavlutin.com-comments.

Great article! It really helped me clear up some misunderstandings I had about 'THIS' context. This makes it two articles I read from your blog and I find it personally beneficial for the beginner progammer that I am.

from dmitripavlutin.com-comments.

Great article! It really helped me clear up some misunderstandings I had about 'THIS' context. This makes it two articles I read from your blog and I find it personally beneficial for the beginner progammer that I am.

That's great @loulou1994! Good luck learning.

from dmitripavlutin.com-comments.

this is a great article

from dmitripavlutin.com-comments.

this is a great article

Haha, nice one!

from dmitripavlutin.com-comments.

This is a brilliant explanation, thanks !!!

from dmitripavlutin.com-comments.

This is a brilliant explanation, thanks !!!

Thanks @stef-pellegrino!

from dmitripavlutin.com-comments.

Learned a good deal about 'this'. Thank you!

from dmitripavlutin.com-comments.

Hii, I have a doubt, In the arrow function, when 'this' is called, we get the value from where the arrow function is defined lexically, meaning if it's defined inside the function, Arrow function's 'this' will refer to the 'this' of enclosing function and it can't be modified later (if my understanding is correct). The doubt is whether the arrow functions creates a closure for 'this'?

from dmitripavlutin.com-comments.

I would've shown also a simplw example and talk about it :

Let o = {a:5 ,b:this.a}

from dmitripavlutin.com-comments.

It's really awesome and useful, I am looking forward to coming articles, thanks.

from dmitripavlutin.com-comments.

thiis is best article I have learned about 'this' in JavaScript. Thanks a lot !

from dmitripavlutin.com-comments.

@zaibugemi @nicole0707 @tolerious Glad you find the post useful!

from dmitripavlutin.com-comments.

This is, hands down, the best article breaking down the use of the 'this' keyword with excellent examples. Kudos!

from dmitripavlutin.com-comments.

@angelr1076 Glad you find it useful. :)

from dmitripavlutin.com-comments.

Absolutely wonderful article! Thank you friend.

from dmitripavlutin.com-comments.

Absolutely wonderful article! Thank you friend.

@Bills78 You're welcome friend.

from dmitripavlutin.com-comments.

Been trying to understand this topic for 2 days before I found your blog post. It's amazing and clarified everything except one moment - why when we use this inside an arrow function, it points to the instance of the class instead of undefined?

class MyClass {
constructor() {
this.message = "Hello";
}

sayHello = () => {
console.log(this); //classInstance
};
}

const classInstance = new MyClass();
classInstance.sayHello();

First, I thought that since we use an arrow function for the method, this will point to the context above it which is the class scope. But from my understanding of the topic, the class context is undefined so the console.log should have printed undefined.
Secondly, I thought that the class itself is a syntactic sugar over the constructor function (I'm not sure about that) so under the hood the code above is being transformed to a code like this:

function FunctionConstructor() {
this.message = "Hello";
}

FunctionConstructor.prototype.sayHello = () => {
console.log(this); //globalThis
};

const obj = new FunctionConstructor();
obj.sayHello();

Based on my understanding that would return (and actually returns) the global object so that's definitely not the case either.
Then why the 1st code snippet returns the instance? Does someone have an answer to that to close the last misunderstanding on that topic? Thanks in advance!

from dmitripavlutin.com-comments.

I found out something interesting. In a class, when we declare a method with the function keyword, it's being added to the prototype of the class:

class MyClass {
  constructor() {
    this.message = "Hello";
  }

  sayHello() {
    console.log(this); //classInstance
  }
}

const classInstance = new MyClass(); 
const classInstance2 = new MyClass(); 
console.log(classInstance.hasOwnProperty("sayHello")); //false since it's a part of their __proto__
console.log(classInstance.sayHello === classInstance2.sayHello); //true, because they both point to the same method which is MyClass.prototype.sayHello

So, in my head it's equivalent (but not exactly since classes behave a little bit differently than the constructor functions) to something like this:

function ConstructorFunction() {
  this.message = "Hello";
}

ConstructorFunction.prototype.sayHello = function () {
  console.log(this);
};

const object1 = new ConstructorFunction();
const object2 = new ConstructorFunction();
console.log(object1.hasOwnProperty("sayHello")); //false for the same reason
console.log(object2.sayHello === object2.sayHello); //true for the same reason

Meanwhile, when we declare a method in that class with an arrow function, a new completely new object (function) is being created in the memory of the PC so the instance' methods point to different functions:

class MyClass {
  constructor() {
    this.message = "Hello";
  }

  sayHello = () => {
    console.log(this); //classInstance
  };
}

const classInstance = new MyClass();
const classInstance2 = new MyClass();
console.log(classInstance.hasOwnProperty("sayHello")); //true since the method is a property of the instance itself, not a part of the __proto__
console.log(classInstance.sayHello === classInstance2.sayHello); //false since the methods of each object point to a different place in the memory 

So it's an equivalent to something like this:

function ConstructorFunction() {
  this.message = "Hello";
  this.sayHello = () => {
    console.log(this);
  };
}

const object1 = new ConstructorFunction(); 
const object2 = new ConstructorFunction();
console.log(object1.hasOwnProperty("sayHello")); //true for the same reason
console.log(object1.sayHello === object2.sayHello); //false for the same reason

And since the outer scope of the arrow function in this case is the constructor function, "this" inside it will act the same way like the constructor function which means that it's context will be the newly created objects.

Again, I'm a newbie (been using JS for ~6 months) and might be completely wrong but that's how I'm going to remember these things.

from dmitripavlutin.com-comments.

Very clear explanation, awesome! Thank you very much.
I have a question, what if function invocation on the event of element. For example:

function onLoad(params) {
    const btn = document.getElementById("btn");
    function myThis() {
        console.log(this); // this == btn
    }
    btn.addEventListener('click', myThis);
}

It seems implementation of addEventListener changes the binding context of its handler, right?

from dmitripavlutin.com-comments.

Thank you very much for clarifying what this is! :)

from dmitripavlutin.com-comments.

It seems implementation of addEventListener changes the binding context of its handler, right?

@uyquoc Yes, DOM invokes the event listener with the target element as being this.

from dmitripavlutin.com-comments.

@taewookim02 You're welcome!

from dmitripavlutin.com-comments.

And since the outer scope of the arrow function in this case is the constructor function, "this" inside it will act the same way like the constructor function which means that it's context will be the newly created objects.

@petardotjs Yes, the mental model you described is correct.

from dmitripavlutin.com-comments.

Thank you! very much for this article.

from dmitripavlutin.com-comments.

Hi! 👋 First of all thanks for your great JavaScript articles. Just one question here. Are you sure that sumArguments.name from 7. Arrow function returns "", but not "sumArguments"? I tried this code in my Chrome browser and actually got "sumArguments" instead. [ Demo ]

When I run the demo linked this is the output I get:

"undefined"
16
""
""

from dmitripavlutin.com-comments.

Everyone said pretty much all there is to say, but I just wanna say it here too. Thank you so much! :)

I think this can save a lot of time in the future. We might forget some info later on, but we know there's this haha :D

from dmitripavlutin.com-comments.

Thank you mate!

from dmitripavlutin.com-comments.

Amazing post

from dmitripavlutin.com-comments.

This is a great write up. Holy smokes, you answered questions I didn't even realize I had!

from dmitripavlutin.com-comments.