What is the name and differences between the following ways of working with Javascript objects

Question

I wrote the same code in many ways, but I don’t know how to describe each of them, their correct name and differences.

The codes are as follows::

// Código 1

function Pessoa(nome)
{
    this.nome = nome;

    this.dizerNome = function()
    {
        alert(this.nome);
    }
}

var Pessoa1 = new Pessoa("Pedro");
Pessoa1.dizerNome();

// Código 2
var Pessoa =
{
    nome: null,
 
    dizerNome: function()
    {
        alert(this.nome);
    }
}

var Pessoa1 = Object.create(Pessoa);
Pessoa1.nome = "Pedro";
Pessoa1.dizerNome();

// Código 3
function Pessoa(nome)
{
    this.nome = nome;
};

Pessoa.prototype.dizerNome = function()
{
    alert(this.nome);
};

var Pessoa1 = new Pessoa("Pedro");

Pessoa1.dizerNome();

What is the name and difference between each of these ways of working with objects, and which one is most used in Javascript?

Answer 1

There are two ways to use Javascript objects: with Object Literal using key-value pairs ("key-value pairs"); or using a function that will be the object constructor.

Object Literal: in this mode of use, you just define a variable with braces {} and each value-key separated by a comma.

Function: define a function that will be the basis for instantiating new objects. In this case, as it is in a function block, you write programming statements normally, using semicolon at the end of each statement.

In its example, Code 1 refers to using a function that defines a Blueprint (or a class, although versions of Javascript before ES6 have no classes).

In Code 2, you are using Literal Object. But I notice that you used Object.create, but I think you shouldn’t use it that way because what happens is that when you pass Person to function Object., you create an object whose prototype is Person. When you change the name, for example, the name will be set in Person1, but you will still have the name in the prototype. To do an experiment, run your code in the Chrome Dev Tools Web Console (or another browser console) and check the value of the Personal variable1 in Code 2. You’ll see that the Personal object1 has a name property with Pedro value, but also has the pseudo-property __proto__ with the Person object as the prototype. And that object also has a name property which is null! So if you weren’t set to Pedro, Javascript would look at the prototype to see if it has the name property (as it has, it would show null, its value).

Anyway, I recommend using functions to create a Blueprint pro object (i.e. class) and set the prototype as your example in Code 3. That is, if you are instantiating objects of a kind of class. The way of making objects using literal Objet is also valid, although for other occasions.

Here a final note on prototype: attributes that are unique to each object (for example, name, age, height, weight, etc.) must be defined within the function that defines Blueprint pro object. The behavior of objects, things that are common to all of them (for example: talking, walking, sleeping, eating, drinking, etc.), should be defined using prototype. When you create an object based on a function definition, that object will have its own properties while the functions defined by the prototype are common to all instances of that class function. In other words, everything that is defined via the prototype is only defined once while the Person attributes are created for each instance.

I hope it helped. Just a touch for everyone that ES6 will soon become the default, so you can get used to using classes in Javascript using the following form:

class Pessoa {
  constructor(nome) {
    this.nome = nome;
  }

  // Métodos protótipos
  dizerNome() {
    alert(this.nome);
  }
}