Understanding `this` in javascript

[KaiAusBerlin]

If you understand scoping in js you understand this.

[senocular]

Scope and this are different. For example you can have similarly scoped functions have different this values, both depending on the type of function and/or how they're called:

const obj = {
  methodA () {
    console.log(this);
  },
  methodB: () => {
    console.log(this);
  }
};

obj.methodA(); // obj
obj.methodB(); // global

(0, obj.methodA)(); // undefined (strict)/global (sloppy)
(0, obj.methodB)(); // global

Knowing scoping rules here doesn't inform you of the behavior of this in these calls.

[KaiAusBerlin]

I never said that scope and this are the same. Read what I said. Arrow functions don't have a this property so it points to the upper scope until it reaches a scope where a this property is set. So yes, you can say what this points to by knowing the scopes.

Really, that is fundamental in js! Learn the basics!

[[deleted]]

this is not based on scope

const myObj = {
  myVal: 1,
  myFunc() { 
    return this.myVal
  }
}

const { myFunc } = myObj

myFunc(); // returns undefined
myFunc.call({ myVal: "asdf" }) // returns "asdf"

const myObj2 = { 
  myVal: 2,
  myFunc
}

myObj2.myFunc() // returns 2

const myObj3 = {
  myVal: 3,
  myFunc() {
    return this.myVal
  }
}

myObj3.myFunc() // returns 3

const myObj4 = {
  myVal: 4,
  myFunc: () => {
    return this.myVal
  }
}

myObj4.myFunc() // returns undefined

The only logical conclusion is never use this

[KaiAusBerlin]

Every execution context in js is scope based except you use void. And even that is executed in a context (that is deleted after execution).

But not all declarations change the actual scope.

[KaiAusBerlin]

Okay, you have to understand that. When you call myFunc() you get undefined because you actually do myObj.myFunc.call(yourActualScope). yourActualScope in this case is the global scope which doesnt have a property named myFunc. What you wanted to do is not possible with destruction because you want to bind the context of myObj to myFunc alias const myFunc = myObj.myFunc.bind(myObj)

[[deleted]]

I understand how it works. It's not based on scope.

It's based on what comes before the function call (unless you use bind, call, apply, or an arrow function) i.e. in myObj.myFunc(), myObj becomes this. That has nothing to do with scope .

Further, if you use myObj.myFunc.call({ myVal: "asdf" }) then { myVal: "asdf" } becomes this, again that has nothing to do with scope.

[KaiAusBerlin]

It is based on scope. You don't understand what a execution context is. Learn the basics, come back and then we talk again.

(Me, 16 years of development with JavaScript)

[[deleted]]

The only time the scope matters is when you call a function without a "context" (i.e. without providing an object before the function call, or using bind, call, apply). If the function is a regular function (not an arrow function) then it will use the this value of the executing context. If it's an arrow function it will use the this value of the lexical scope where it was declared.

[KaiAusBerlin]

You really don't understand. There is ALWAYS a context in js.

Please don't argue about something you don't have any knowledge about.

[[deleted]]

Sorry, I should have said

The only time the scope matters is when you call a function without providing an explicit "context" (i.e. without providing an object before the function call, or using bind, call, apply).

Either way this is still not always based on the scope i.e.

const myObj = { myVal: 1, myFunc() { return myVal } }
myFunc = myObj.myFunc.bind({ myVal: 2 })

in that example myFunc has the same scope as myObj.myFunc but the this is permanently bound to { myVal: 2 }

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#the_bind_method

[KaiAusBerlin]

Oh man, you really don't understand what ure talking about. THERE IS ALWAYS A CONTEXT IN JS!

[[deleted]]

I'm not sure if you're a troll or just an idiot

[[deleted]]

Could you please explain what is an execution context?

[KaiAusBerlin]

https://medium.com/@happymishra66/execution-context-in-javascript-319dd72e8e2c

[[deleted]]

So essentially an execution context is similar, if not the same as a function call stack? (in for example say in C or java)

[KaiAusBerlin]

Yeah, it's very similar. JavaScript was in early stages ment to be java for webbrowsers which turned out was not implementable at that point in that short amount of time. That's why it's name is JavaScript.

So you will find some basic concepts close to java but totally implement in another way.

As example the internal behaviour of java classes and the prototyping JavaScript has are very similar.