1. Estoy llamando a una función myDes() que es una función de flecha dentro de un objeto Cameras . Está volviendo undefined .
2. Pero cuando llamo a la función myDes() desde una instancia de clase obj1 , devuelve una cadena: "abc" .
Según tengo entendido, la función de flecha vincula de forma predeterminada las propiedades de la función principal o el alcance global, entonces, ¿por qué no devuelve el precio en el primer ejemplo como lo hace con el nombre en el segundo?
const cameras = { price: 600, weight: 2000, myDes: () => { return `This canon camera is of ${this.price}` } } console.log(cameras.myDes()) // price undefined class Student { name = 'abc' myDes = () => { console.log(this.name) } } let obj = new Student obj.myDes() // return abc*
A los comentarios a continuación que sugieren alguna referencia de enlace para las respuestas. Lo que quise decir, ya que no hay una función principal alrededor de la función de flecha en la Clase, entonces cómo la función de flecha hereda las propiedades de la clase. A lo que se ha proporcionado una respuesta satisfactoria.
En su primer ejemplo, no hay una función principal alrededor de la definición de la función de flecha, por lo que sí se une al global this .Una función de flecha no es un método del objeto .
En su segundo ejemplo, está utilizando la sintaxis de campo de clase . Esto es en realidad azúcar sintáctico para
class Student { constructor() { this.name = 'abc' this.myDes = () => { console.log(this.name) } } } donde la función padre es el constructor de la clase, cuyo valor this se refiere a la instancia. Este es también el valor al que se referirá la función this inside the arrow.
Como dicen los comentarios a su pregunta, las funciones de this flecha interior no se comportan como usted piensa. Puede hacer esto en su lugar:
const cameras = { price:600, weight: 2000, myDes: function(){ return `This canon camera is of ${this.price}` } } console.log(cameras.myDes())