keys - ¿Cuál es la mejor forma de crear un objeto en javascript? ¿Es necesario "var" antes de la variable del objeto?

javascript object properties

Question

Hasta ahora, vi tres formas de crear un objeto en JavaScript, ¿cuál es la mejor manera de crear un objeto y por qué?

También vi que en todos estos ejemplos, la palabra clave "var" no se usa antes de la propiedad, ¿por qué? no es necesario declarar "var" antes del nombre de una propiedad ya que mencionó que las propiedades son variables.

Olvidé preguntar una cosa más:

En way2 y way3 el nombre del objeto está en mayúscula, donde está en way1 el nombre del objeto está en minúscula ... ¿qué caso deberíamos usar para un nombre de objeto?

camino 1

function person(fname,lname,age,eyecolor)
{
   this.firstname=fname;
   this.lastname=lname;
   this.age=age;
   this.eyecolor=eyecolor;
}

myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");

camino 2

var Robot =
{
    metal: "Titanium",
    killAllHumans: function()
    {
        alert("Exterminate!");
    }
};
Robot.killAllHumans();

modo 3 (objetos de JavaScript usando sintaxis de matriz):

var NewObject = {};
NewObject[''property1''] = value;
NewObject[''property2''] = value;
NewObject[''method''] = function(){ /* function code here */ }

Answer 1

Hay muchas formas de crear tus objetos en JavaScript. El uso de una función constructer para crear una notación literal de objeto o objeto está usando mucho en JavaScript. Además de crear una instancia de Object y agregarle propiedades y métodos, existen tres formas comunes de crear objetos en JavaScript.

Funciones constructivas

Hay funciones de construcción integradas que todos podemos usar de vez en cuando, como Date (), Number (), Boolean () etc, todas las funciones de constructores comienzan con mayúscula, mientras tanto podemos crear una función de constructor personalizada en JavaScript Me gusta esto:

function Box (Width, Height, fill) {  
  this.width = Width;  // The width of the box 
  this.height = Height;  // The height of the box 
  this.fill = true;  // Is it filled or not?
}  

y puede invocarlo, simplemente usando new (), para crear una nueva instancia del constructor, crear algo como a continuación y llamar a la función de constructor con los parámetros rellenos:

var newBox = new Box(8, 12, true);  

Literales de objetos

El uso de literales de objetos es un caso muy utilizado de creación de objetos en JavaScript, este es un ejemplo de creación de un objeto simple, puede asignar cualquier cosa a las propiedades de sus objetos, siempre que estén definidos:

var person = { 
    name: "Alireza",
    surname: "Dezfoolian"
    nose: 1,  
    feet: 2,  
    hands: 2,
    cash: null
};  

Prototipos

Después de crear un Objeto, puede crear prototipos de más miembros, por ejemplo, agregando color a nuestro Cuadro, podemos hacer esto:

Box.prototype.colour = ''red'';

Answer 2

Hay varias formas de definir una función. Está totalmente basado en su requerimiento. Debajo están los pocos estilos:

1. Constructor de objetos
2. Constructor literal
3. Basado en funciones
4. Basado en Protoype
5. Función y Prototipo basado
6. Singleton Based

Ejemplos:

1. Constructor de objetos

var person = new Object();

person.name = "Anand",
person.getName = function(){
  return this.name ; 
};

2. Constructor literal

var person = { 
  name : "Anand",
  getName : function (){
   return this.name
  } 
} 

3. función Constructor

function Person(name){
  this.name = name
  this.getName = function(){
    return this.name
  } 
} 

4. Prototipo

function Person(){};

Person.prototype.name = "Anand";

5. Combinación función / prototipo

function Person(name){
  this.name = name;
} 
Person.prototype.getName = function(){
  return this.name
} 

6. Semifallo

var person = new function(){
  this.name = "Anand"
} 

Puede probarlo en la consola, si tiene alguna confusión.

Answer 3

No hay la mejor manera, depende de tu caso de uso.

• Usa el modo 1 si quieres crear varios objetos similares. En su ejemplo, Person (debe comenzar el nombre con una letra mayúscula) se llama función de constructor . Esto es similar a las clases en otros lenguajes OO.
• Usa el modo 2 si solo necesitas un objeto de un tipo (como un singleton). Si desea que este objeto herede de otro, entonces debe usar una función de constructor.
• Utilice el modo 3 si desea inicializar las propiedades del objeto dependiendo de otras propiedades del mismo o si tiene nombres de propiedad dinámicos.

Actualización: como ejemplos solicitados para la tercera manera.

Propiedades dependientes:

Lo siguiente no funciona ya que this no se refiere a un book . No hay forma de inicializar una propiedad con valores de otras propiedades en un literal de objeto:

var book = {
    price: somePrice * discount,
    pages: 500,
    pricePerPage: this.price / this.pages
};

en cambio, podrías hacer:

var book = {
    price: somePrice * discount,
    pages: 500
};
book.pricePerPage = book.price / book.pages;
// or book[''pricePerPage''] = book.price / book.pages;

Nombres de propiedades dinámicas:

Si el nombre de la propiedad se almacena en alguna variable o se crea a través de alguna expresión, entonces debe usar la notación de corchetes:

var name = ''propertyName'';

// the property will be `name`, not `propertyName`
var obj = {
    name: 42
}; 

// same here
obj.name = 42;

// this works, it will set `propertyName`
obj[name] = 42;

Answer 4

No hay una "mejor manera" de crear un objeto. Cada forma tiene beneficios dependiendo de su caso de uso.

El patrón de constructor (una función emparejada con el new operador para invocarlo) proporciona la posibilidad de usar herencia prototípica, mientras que las otras formas no lo hacen. Entonces, si quieres herencia prototípica, entonces una función constructora es un buen camino a seguir.

Sin embargo, si desea herencia de prototipos, también puede usar Object.create , lo que hace que la herencia sea más obvia.

Crear un objeto literal (ej: var obj = {foo: "bar"}; ) funciona muy bien si tiene todas las propiedades que desea configurar en la mano en el momento de la creación.

Para establecer propiedades más adelante, la sintaxis NewObject.property1 generalmente es preferible a NewObject[''property1''] si conoce el nombre de la propiedad. Pero lo último es útil cuando no tiene el nombre de la propiedad antes de tiempo (por ejemplo: NewObject[someStringVar] ).

¡Espero que esto ayude!

Answer 5

Supongo que depende de lo que quieras. Para objetos simples, supongo que podrías usar los segundos métodos. Cuando tus objetos crecen y planeas utilizar objetos similares, creo que el primer método sería mejor. De esta forma, también puedes extenderlo usando prototipos.

Ejemplo:

function Circle(radius) {
    this.radius = radius;
}
Circle.prototype.getCircumference = function() {
    return Math.PI * 2 * this.radius;
};
Circle.prototype.getArea = function() {
    return Math.PI * this.radius * this.radius;
}

No soy un gran admirador del tercer método, pero es realmente útil para editar propiedades dinámicamente, por ejemplo var foo=''bar''; var bar = someObject[foo]; var foo=''bar''; var bar = someObject[foo]; .