I am calling a function myDes() which is an Arrow Function inside an Object Cameras. It is returning undefined.

But when I call the function myDes() from a Class instance obj1 it returns a string - "abc".

In my understanding arrow function binds by default the properties of the parent function or the global scope, then why does it not return the price in the first example as it does name in the second?

Example 1 — Calling from an Object

const cameras = {
  price: 600,
  weight: 2000,
  myDes: () => {
    return `This canon camera is of ${this.price}`
  }
}

console.log(cameras.myDes()) // price undefined

Example 2 — Calling from an Instance of a Class

class Student {
  name = 'abc'
  myDes = () => {
    console.log(this.name)
  }
}

let obj = new Student
obj.myDes() // return abc

CodePudding user response：

In your first example, there is no parent function around the arrow function definition, so it does indeed bind to the global this. An arrow function is not a method of the object.

In your second example, you are using class field syntax. This is actually syntactic sugar for

class Student {
  constructor() {
    this.name = 'abc'
    this.myDes = () => {
      console.log(this.name)
    }
  }
}

where the parent function is the constructor of the class, whose this value refers to the instance. This is also the value that the this inside the arrow function will refer to.

CodePudding user response：

As the comments to your question state, this inside arrow functions do not behave like you think. You may do this instead:

const cameras = {
  price:600,
  weight: 2000,
  myDes: function(){
    return `This canon camera is of ${this.price}`
  }
}

console.log(cameras.myDes())