-1

I am quite new to JavaScript, I am really confused by the below two examples of 'this', on what 'this' is bound to and why:

Example 1:

function Person(age) {
    this.age = age;
    this.growOld = () => {
        this.age++;
    }
}
var person = new Person(1);
setTimeout(person.growOld,1000);

Example 2:

var Actor = {
  name: 'RajiniKanth',
  movies: ['Kabali', 'Sivaji', 'Baba'],
  getName: () => {
     alert(this.name);
  }
};

Actor.getName();

Why even though both examples use arrow function, but 'this' is bound to different context?

halfer
  • 19,824
  • 17
  • 99
  • 186
user1559625
  • 2,583
  • 5
  • 37
  • 75
  • 1
    Arrow functions don’t bind their own `this`. See my explanation here: https://stackoverflow.com/a/24900924/2057919 – elixenide Jul 07 '18 at 14:20
  • `function` has its own context, but in the second snippet you're simply declaring an Object. Arrow functions keep the parent context, so the first one keeps the `function` while the second keeps the global context, `window`. –  Jul 07 '18 at 14:20
  • @ChrisG your explanation is awesome! – user1559625 Jul 07 '18 at 15:27
  • @imjared For a beginner's question, you might as well marked everything as duplicated and linked to javascript official doc. No offence. But a decent answer would be at least more relative to the question than just a link to what is => – user1559625 Jul 07 '18 at 15:31
  • @bambam same comment as to imjared – user1559625 Jul 07 '18 at 15:34
  • If you would just have read the duplicate question's answers, you'd have the best possible answer, well explained and detailed. Marking a question as a duplicate is not an offense, it's helping people to find the right answer to their question. It's very sad that certain people always think they have to get a personal answer instead of just reading existing content. Stop victimizing yourself, you're the one not following the rules... – baao Jul 07 '18 at 15:40
  • @bambam for your reference, i've read the duplicate question's answer, and it's not directly related to my question. i am not victimizing anything, it's probably you being glass hearted. – user1559625 Jul 07 '18 at 16:41
  • It's exactly related to your question @user1559625 . Once you've learned a bit more you'll understand that too. Also, it's your job to explain what about the existing answers didn't solve your specific issue; whenever you ask a question that already has an answer. We expect you to search before asking – baao Jul 07 '18 at 17:00
  • @bambam no, it's not. various explanations that involve terms like scope and context were used in a few link i search and you provide, it did not resolve my question. what i want to know was not why arrow function helps with 'this' problem for function within function scenario, but instead why it's different when function is defined within function vs. function is defined within an object. If context is defined as object that owns the function, then in example 1, the context is 'Person', which is fine, but why in example 2, context is 'window' instead of 'Actor'? – user1559625 Jul 07 '18 at 17:25
  • I've added the duplicate that explains that @user1559625 – baao Jul 07 '18 at 18:19
  • @bambam thanks, bambam. what you add in duplicate is exactly what i wanted. sadly that link was voted as -1. but i think it's a important concept that confuse some beginners like me of javascript, even though i have some experience in other programming language. – user1559625 Jul 08 '18 at 02:35

2 Answers2

0

A method inside an object using an arrow function this will bind to the object, if if not inside an object this refers to the global scope, even if encapsulated by another method.

0

The keyword this has different meanings in function expressions and function declarations.

Arrow functions are expressions. Accordingly, this is bound to a lexical context.

See MDN this

Stand__Sure
  • 253
  • 1
  • 13