Why need 'this' keyword here? What does it refers to?

Question

I'm learning Angular 2, and I'm confusing with the 'this' keyword. Consider the code below :

import { Component, OnInit } from '@angular/core';
import { Hero } from '../heroes';
import { HEROES } from '../mock-heroes';

@Component({
   selector: 'app-heroes',
   templateUrl: './heroes.component.html',
   styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  selectedHero : Hero;

  onSelect(hero : Hero) : void{
 this.selectedHero = hero;
  }

  heroes = HEROES;

  constructor() { }

  ngOnInit() {
  }

  }

Here in 'onSelect' method, why we need to use 'this' keyword for referring 'selectedHero' property? Why can't we just use 'selectedHero' without this keyword? And what does 'this' imply here?

Simon Hyll · Answer 1 · 2018-01-01T06:14:54.237

-1

You use "this" to be absolutely sure it's the correct value you're referencing.

Consider something like this (pseudo code):

var hello = 0;
function main () {
  var hello = 1;
  var self = this;
  alert(hello)
  if(1 < 2) {
    var hello = 2;
    alert(hello)
    alert(self.hello)
  }
}

Here we would be alerting first 1, then 2, then 1. We can use "this" to e.g. save a reference to some other scope, or if your naming conventions are really similar throughout your code you can use "this" simply to make the code clearer.

In your specific example I'm like 99% sure it doesn't matter one way or another if you use "this", but it's a really useful thing to have in some cases. It seems to simply be referring to the class, so if you want to access your class from within the class you can use "this" as a quick and easy way to reference it. It's a self referencing variable, if that makes sense to you.

edited Jan 01 '18 at 06:14

answered Jan 01 '18 at 06:08

Simon Hyll

3,265
3
24
44

This doesn't explain what it refers to in this case. – Andrew Li Jan 01 '18 at 06:12
@Li357 Added an explanation, happy? :) – Simon Hyll Jan 01 '18 at 06:22
That's incorrect -- it's not referencing the class but rather the instance of the class. I would also specify that `selectedHero` is a property *of the instance* which is why `this` is used -- JavaScript is not like Java where you can omit `this`. – Andrew Li Jan 01 '18 at 06:24
@Li357 1. Why aren't you answering this if you're such an expert? 2. In Java I have never been REQUIRED to use `this`, it all depends on how you prefer to do your coding, there's almost literally always more than one way to perform the exact same operation in any programming language. – Simon Hyll Jan 01 '18 at 06:32
The last part of my comment was sort of directed to the OP. There's already a good duplicate that's linked -- and don't take it personally. I'm just trying to point on some parts you can expand on, sorry if I sounded condescending. – Andrew Li Jan 01 '18 at 06:35
@Li357 I'm confused with Javascript class. In the above code, nowhere I created an instance of the class. Which instance here 'this' refers to? – user3760959 Jan 01 '18 at 06:41
@user3760959 `this` refers to the component instance. When Angular internally creates an instance of your component, it will have a `selectHero` property, which `this.selectHero` accesses. – Andrew Li Jan 01 '18 at 06:42

Why need 'this' keyword here? What does it refers to?

1 Answers1