buenas, cuando paso mi funcion y la tranformo en arrow function, todos los llamados a ${this.nombre} o cualquier “this”, en la consola me...

Hey ! Tiene que ver con el this , Cuando usamos el this estamos haciendo referencia al contexto en que se creo la funcion o arrow function

El contexto es algo asi como el entorno al que tiene acceso esa funcion , Pero hay una diferencia entre funciones normales y arrow functions 👀, Y es precisamente esa, el contexto es diferente

Para una Funcion normal

const persona = {
	nombre: 'Pepito'
	saludar: function(){
		console.log(`Hey Yo soy ${this.nombre}`)
	}
}

persona.saludar()  //Hey Yo Soy Pepito
//persona es el ""contexto"" de esta funcion

El " contexto" para una function normal, es el objeto justo antes que esta llamando a la funcion , o el objeto antes del punto En javascript se dice que las funciones normales tiene un enlazamiento (binding) de tipo Implicito que es quien define su contexto

Mientras que si la cambias por una arrow function saldra undefined porque tienen un diferente tipo de enlzamiento , se denomina Lexical binding , Este enlazamineto no va tomar en cuenta el objeto de donde esta siendo invocado este metodo (o el objeto antes del punto) si no va tener en cuenta cual es el verdadero contexto en el que esta la arrow function ,y los objetos no crean un contexto por si solos , Solo lo hacen las funciones ya que estarias haciendo referencia a su objeto propiedad prototype

Te dejo Este Video Sobre This y todos los tipos de enlazamientos, contexto etc.. y tambien puedes echarle un vistazo a Esta Clase del curso Profesional De Javascript donde se explica como funciona prototype y todo el sistemas de "clases" en javascript a fondo

La funciones flecha tienen su propio contexto, en cambio las funciones normales trabajn con el this del contexto global