Why do you have to use keyword "this" instead of class name?

Question

this is code from a react.js tutorial and the "this" keyword represents the App class. So my question is why can I not just write the class name instead?

import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';

class App extends Component {

state = {
 persons: [
  { name: 'Max', age: 28 },
  { name: 'Manu', age: 29 },
  { name: 'Stephanie', age: 26 }
 ]
}

render() {
 return (
  <div className="App">
    <h1>Hi, I'm a React App</h1>
    <p>This is reallyyyyyyyy working!</p>
    <button> switch name</button>
    <Person name={App.state.persons[0].name} age={this.state.persons[0].age} />
    <Person name={this.state.persons[1].name} age={this.state.persons[1].age}>My Hobbies: Racing</Person>
    <Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
  </div>
 );
// return React.createElement('div', {className: 'App'}, 
React.createElement('h1', null, 'Hi, I\'m a React App!!!'));
}
}

export default App;

Possible duplicate of [How does the "this" keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — ASDFGerte, May 28 '18 at 03:12
You state "the `this`" keyword represents the App class". The answer to your question is right there in that misconception. The `this` keyword does **not** represent the App class. As clearly explained in tens of thousands of tutorials and blog posts and answers right here on SO, it represents the **current instance of the App class**. — , May 28 '18 at 04:08

Finesse · Accepted Answer · 2018-05-28T08:28:43.553

8

Because in JavaScript, when you specify a class name (in particular, inside a class), you get a reference to the class, not to the current class instance. The instance properties and methods are not available through its class. Meanwhile this represents the current instance.

class App {
    test() {
        console.log(App); // "class App ..."
        console.log(this); // "[object Object]"
        console.log(App.foo()); // "1"
        console.log(this.foo()); // "2"
        console.log(this.constructor.foo()); // "1"; this.constructor is a reference to the current object class
    }

    static foo() {
        return 1;
    }

    foo() {
        return 2;
    }
}

edited May 28 '18 at 08:28

answered May 28 '18 at 03:09

Finesse

6,684
6
44
60

1

You say "when you specify a class name inside a class", but this should just be "when you specify a class name". It makes no difference whether you specify it inside or outside. For completeness, you probably should explicitly state the exception of `static` methods, especially since one is shown in the example. For clarity, you probably should say "**instance** properties and method". – May 28 '18 at 04:11
@torazaburo I wrote "inside a class" intentionally to highlight this difference of JavaScript from other languages where class name is used instead of `this`. – Finesse May 28 '18 at 08:32
In what language(s) is a class name used instead of `this`? Just curious. – May 28 '18 at 13:52

Manoz · Answer 2 · 2018-05-29T04:16:35.077

1

Because

The this keyword refers to the current instance of the class. It can be used to access members from within constructors, instance methods, and instance accessors.

This rule is followed by any Object Oriented programming language. However, If you force your class to take instance with its name then it has to be static (Not the class itself but properties and methods).

For your purpose we can create App class as module

class App {
  hello() { return 'Hello World'; }
}

export let AppInstance = new App ();

Usage

import { AppInstance } from './App';
AppInstance.hello();

edited May 29 '18 at 04:16

answered May 28 '18 at 05:09

Manoz

5,910
12
59
106

I'm sorry, but I cannot parse the English "If you force your class to be take instance with its name", or "create a common". Perhaps you could rewrite those parts.. – May 28 '18 at 13:53

Why do you have to use keyword "this" instead of class name?

2 Answers2