Tengo un código antiguo que me gustaría refactorizar y mejorar, actualmente el código se ve así:
function objFunction1(obj){ //do something console.log(obj, 1); } function objFunction2(obj){ //do something else console.log(obj, 2) } var obj = {test: true}; objFunction1(obj); objFunction2(obj);Estoy pensando en convertirlo en una clase, por ejemplo:
class item{ constructor(test){ this.test = test; return this; } function1(){ console.log(this, 1); } function2(){ console.log(this, 2); } } var obj = new item(true); obj.function1(); obj.function2(); ¿Cómo maneja JavaScript esto? si tuviera 10,000 instancias de item , ¿JavaScript duplica esos métodos para cada instancia o simplemente almacena una referencia a la declaración de clase?
lo que básicamente estoy preguntando, ¿mi código original es más eficiente?
Si tiene 100000 o cualquier cantidad de objetos, pero function1 y function2 2 solo tendrán una copia en su prototype
Dado que la sintaxis de clase es solo azúcar sintáctica sobre el antiguo constructor de funciones. Cuando escribe la sintaxis de clase anterior, los métodos se declaran en el prototype de esa clase y puede verificarlo como:
const obj1 = new item(true); const obj2 = new item(false); obj1.function1 === obj2.function1; Si la expresión obj1.function1 === obj2.function1 devuelve true , eso significa que solo hay una función definida en su prototype
class item { constructor(test) { this.test = test; return this; } function1() { console.log(this, 1); } function2() { console.log(this, 2); } } const obj1 = new item(true); const obj2 = new item(false); console.log(obj1.function1 === obj2.function1); // trueNota: He puesto en mayúscula la primera letra de la función constructora que especifica externamente que es una función constructora. Es solo una convención utilizada en la comunidad JS.
La sintaxis de la clase anterior será igual a la siguiente sintaxis del constructor de funciones como:
function function1() { console.log(this, 1); } function function2() { console.log(this, 2); } function Item(test) { this.test = test; } Item.prototype.function1 = function1; Item.prototype.function2 = function2; const obj1 = new Item(true); const obj2 = new Item(false); console.log(obj1); console.log(obj2); console.log(obj1.function1 === obj2.function1);La respuesta corta es no.
Las funciones no se duplicarían; solo se crearía una definición para cada función como prototipo de los objetos.
JavaScript usa herencia basada en prototipos, lo que significa que los objetos tienen un prototipo que "contiene" los métodos compartidos por todos los objetos del mismo prototipo:
JavaScript a menudo se describe como un lenguaje basado en prototipos: para proporcionar herencia, los objetos pueden tener un objeto prototipo, que actúa como un objeto de plantilla del que hereda métodos y propiedades.
(fuente: Mozilla )
Si declara dos objetos usando la misma "clase", puede ver que sus instancias son diferentes pero los métodos son los mismos
var objA = new item(true); var objB = new item(true); objA === objB // false objA.function1 === objA.function // true Puede acceder al prototipo del objeto utilizando la propiedad __proto__ algo obsoleta (pero aún admitida por Chrome):
objA.__proto__ === objB.__proto__ // trueEntonces, en términos de memoria y tiempo de ejecución, las dos opciones probablemente sean casi idénticas.