En este artículo, discutiremos la creación de objetos y prototipos, junto con la comprensión de las diferentes formas de creación de objetos y su implementación a través de los ejemplos. Los prototipos son el mecanismo por el cual los objetos en JavaScript heredan características de otro objeto. Una propiedad prototipo también es un objeto cuyos métodos y propiedades serán heredados por cualquier objeto nuevo.
Un objeto simple en JavaScript se puede comparar con objetos de la vida real con algunas propiedades. Por ejemplo, un empleado puede considerarse como un objeto, con propiedades como «nombre», «edad», «departamento», «id», etc., que es único para cada empleado.
1. Objeto Literal: El primer método para crear un objeto es mediante el uso de Objeto Literal. Describe los métodos y propiedades que el objeto heredará directamente.
Sintaxis:
var Object = {name: "value", id: "number" , category: "section"}
Ejemplo:
Javascript
<script>
var Student = {
name: "GeeksforGeeks",
age: 18,
class: 11,
roll: 34,
section: "F"
}
console.log(Student);
</script>
Producción:
{name: 'GeeksforGeeks', age: 18, class: 11, roll: 34, section: 'F'}
Otro método para crear un objeto es definiendo su prototipo.
2. Prototipos: cada función de JavaScript tiene una propiedad de objeto prototipo que está vacía de forma predeterminada. Podemos inicializar métodos y propiedades a este prototipo para crear un objeto.
Sintaxis:
let obj = Object.create(Object_prototype)
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe Object Prototype
</title>
</head>
<body>
<script>
let Employee = {
id: 565,
department: "Finance"
}
let Employee1 = Object.create(Employee);
console.log(Employee1.id);
console.log(Employee1.department);
// Output : 565
// Output : Finance
</script>
</body>
</html>
Producción:
565 Finance
Otro método es crear una función constructora para definir un objeto.
3. Constructor: esta es una función que se utiliza para definir un objeto y sus propiedades. esta palabra clave se utiliza para asignar un valor a estas propiedades del objeto.
Sintaxis:
function Object(property1, property2) {
this.property1 = property1;
this.property2 = property2;
}
var obj = new Object( property1, property2 );
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe Object Creation
</title>
</head>
<body>
<script>
/* constructor function that will define
prototype of an Employee object */
function Employee(name, id, job) {
this.name = name;
this.id = id;
this.job = job;
}
// This will show Employee's prototype
console.log(Employee.prototype);
</script>
</body>
</html>
Producción:
constructor: ƒ Employee(name, id, job)
Aquí, se define un constructor de un objeto Empleado que contiene detalles básicos de un Empleado, es decir, nombre, identificación y trabajo.
Podemos crear un objeto Employee usando este constructor de función Employee que heredará las propiedades de este constructor.
Sintaxis:
let Object1 = new Object(property1, property2, property3)
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe Object Creation
</title>
</head>
<body>
<script>
function Employee(name, id, job) {
this.name = name;
this.id = id;
this.job = job;
}
// creating an Object from prototype
let Employee1 = new
Employee('Stephen', 2364, 'developer');
console.log(Employee1);
let Employee2 = new
Employee('Maria', 8896, 'tester');
console.log(Employee2);
</script>
</body>
</html>
Producción:
Employee {name: 'Stephen', id: 2364, job: 'developer'}
id: 2364
job: "developer"
name: "Stephen"
Employee {name: 'Maria', id: 8896, job: 'tester'}
id: 8896
job: "tester"
name: "Maria"
Aquí, creamos dos empleados , Employee1 y Employee2 , utilizando la función constructora Employee, que actúa como una plantilla para los objetos de Employee.
También podemos agregar ciertas funciones en una función Constructor, que se puede llamar para cualquier objeto.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Basic Example to Describe Object Prototype
</title>
</head>
<body>
<script>
function Employee(name, id, job) {
this.name = name;
this.id = id;
this.job = job;
}
/* Adding intro() method to the Prototype
property of Employee */
Employee.prototype.intro = function () {
console.log('My name is ' + this.name +
' and I am a ' + this.job);
};
// Creating an Object from prototype
let Employee1 = new Employee('Stephen',
2364, 'developer');
let Employee2 = new Employee('Maria',
8896, 'tester');
// Using intro method for Employee objects
Employee1.intro();
Employee2.intro();
</script>
</body>
</html>
Producción:
My name is Stephen and I am a developer My name is Maria and I am a tester
Después de crear dos objetos , Employee1 y Employee2 , llamamos a Employee1.intro() y Employee2.intro(). Primero, verificará si el nombre de la propiedad y el trabajo están presentes en los objetos respectivos. De lo contrario, esa propiedad se considerará indefinida . Así, un constructor define todas las propiedades y métodos que heredará un objeto.