`this` accessing object properties

Question

class Test {
  X = 'X';
  someFunc = () => {
    console.log('someFunc is called');
    //someFunc2(); // undefined
    this.someFunc2(); //works
  }

  someFunc2() {
    console.log('someFunc2 is called');
  }
}

Z = new Test();
console.log(Z.hasOwnProperty('X')); // true
console.log(Z.hasOwnProperty('someFunc')); // true
console.log(Z.hasOwnProperty('someFunc2')); // false

Z.someFunc();

I'm trying to understand when i should use this keyword, as far as i know it's used when trying referring/using some object property, but in the code above i tried to test is someFunc2 is property of the object and it returned false but still can called through this.someFunc2();. So does that mean this keyword not for accessing object property?

documentation is always the best https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this — Alberto Sinigaglia, Aug 15 '20 at 16:33
The documentation said that `this` for accessing properties, but in my case someFunc2 is not property of the object — DrfArch, Aug 15 '20 at 16:39
Specifically `someFunc` is a callable property while `someFunc2` is a method. — Daniel W., Aug 15 '20 at 16:49
@DanielW. — `someFunc2` absolutely **is** a property of the object! It's just up the inheritance tree — Quentin, Aug 15 '20 at 16:50
@Quentin every method of a class is property of the class welp but how do you explain `hasOwnProperty` beeing false on the method-property? — Daniel W., Aug 15 '20 at 16:52
@DanielW. Because it's not an *own* property but an inherited one (from `Test.prototype`). — Bergi, Aug 15 '20 at 16:57
Ah ok! Thanks, learned somthing `console.log(Test.prototype.hasOwnProperty('someFunc2'));` — Daniel W., Aug 15 '20 at 17:01
@DrfArch Don't forget that `X = 'X'; someFunc = …` is just sugar for putting `this.X = 'X'; this.someFunc = …;` in the constructor of the class. Using only the plain name, without `this.`, to refer to a property/method of an instance [never works](https://stackoverflow.com/q/13418669/1048572?javascript-do-i-need-to-put-this-var-for-every-variable-in-an-object). — Bergi, Aug 15 '20 at 17:38

score 1 · Answer 1 · edited Aug 15 '20 at 17:10

I think, console.log(Z.hasOwnProperty('someFunc2')); // false is not a problem with this in JavaScript. It relates more to function declaration.

someFunc = ()=>{
    console.log('someFunc is called');
    //someFunc2(); // undefined
    this.someFunc2(); //works
}

is an attribute which is assigned an anonymous function. Whereas

someFunc2(){
    console.log('someFunc2 is called');
}

is a shorthand function definition. For reference:

class Test {
  X = 'X';
  someFunc = ()=>{
    console.log('someFunc is called');
    //someFunc2(); // undefined
    this.someFunc2(); //works
  }
  
  someFunc2 = function (){
    console.log('someFunc2 is called');
  }
}

Z = new Test();
console.log(Z.hasOwnProperty('X')); // true
console.log(Z.hasOwnProperty('someFunc')); // true
console.log(Z.hasOwnProperty('someFunc2')); // true 

console.log(Z.hasOwnProperty('someFunc2'));

resolves to true!

Doc: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Methoden_Definitionen

My first answer, I hope it was helpful.

score 0 · Answer 2 · answered Aug 15 '20 at 17:09

class Test {
  X = 'X';
  someFunc = () => {
    console.log('someFunc is called');
    //someFunc2(); // undefined
    this.someFunc2(); //works
  }

  someFunc2() {
    console.log('someFunc2 is called');
  }
}

and

class Test {
  X = 'X';
  someFunc = () => {
    console.log('someFunc is called');
    //someFunc2(); // undefined
    this.someFunc2(); //works
  }

  someFunc2 = () => {
    console.log('someFunc2 is called');
  }
}

the difference is:

In the first example, we used function definition but never assign the function to any attribute or property. so when you trying to use hasOwnProperty, it finds that the no attribute or property of name someFunc2 is available.

class Test {
  ....
  someFunc2() {
    console.log('someFunc2 is called');
  }
}

in the second example, we are assigning an anonymous function to an attribute someFunc2, so when you trying to use hasOwnProperty, it finds that the attribute or property someFunc2 is available

class Test {
  ...
  someFunc2 = () => {
    console.log('someFunc2 is called');
  }
}

score 0 · Answer 3 · answered Aug 15 '20 at 17:42

The difference is on how arrow functions works,

Arrow functions dont have their own context, meaning their "this" keyword is the same as their parent function "this" keyword (or in this case the Test class) they both refer to the same context.

meaning when you initiate an instance of "Test" using the "new Test()", the "someFunc" will automatically inherit the context of that instance, while "someFunc2" wont, and will be inherited through the prototype chain.

You can confirm by using

console.log(Z.__proto__.hasOwnProperty('someFunc2'))

thats why you still be able to call it.

I hope this clarifies a bit of whats going on exactly.

`this` accessing object properties

3 Answers3