CODEWITHSUNDEEP
javascript
DrfArch
DrfArch

Reputation: 41

`this` accessing object properties

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?

Upvotes: 2

Views: 72

Answers (3)

Menawer
Menawer

Reputation: 883

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.

Upvotes: 0

C. Neven
C. Neven

Reputation: 19

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.

Upvotes: 1

subhadip pahari
subhadip pahari

Reputation: 846

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');
  }
}

Upvotes: 0

Related Questions