JavaScript 如何使用原型创建对象

在本文中，我们将讨论对象创建和原型，以及理解对象创建的不同方式及其通过示例的实现。

原型是JavaScript中对象从另一个对象继承特性的机制。原型属性也是一个对象，其方法和属性将被任何新对象继承。

在JavaScript中，一个简单的对象可以与现实生活中的对象进行比较，具有一些属性。例如，可以将一个员工视为一个对象，具有“姓名”、“年龄”、“部门”、“ID”等属性，这对每个员工来说是独一无二的。

下面是在JavaScript中使用原型创建对象的一些常见方法：

• 使用对象字面量
• 使用原型
• 使用构造函数
• 使用函数构造器
• 在构造函数中使用函数

方法1：使用对象字面量

创建对象的第一种方法是使用对象字面量。它描述了对象将直接继承的方法和属性。

语法：

let Object = {name: "value", id: "number" , category: "section"}  

示例：

Javascript

let Student = {
    name: "GeeksforGeeks",
    age: 18,
    class: 11,
    roll: 34,
    section: "F"
}
console.log(Student);

输出

{ name: 'GeeksforGeeks', age: 18, class: 11, roll: 34, section: 'F' }

使用原型定义对象是另一种方法。

方法2：使用原型

每个JavaScript函数默认都有一个空的原型对象属性。我们可以为这个原型初始化方法和属性，从而创建一个对象。

语法：

let obj = Object.create(Object_prototype)  

示例：

JavaScript

let Employee = {
    id: 565,
    department: "Finance"
}
 
let Employee1 = Object.create(Employee);
 
console.log("id :", Employee1.id);
console.log("department :", Employee1.department);

输出

id : 565
department : Finance

方法3：使用构造函数：

这是一个用于定义对象及其属性的函数。this 关键字用于为对象的这些属性赋值。

语法：

function Object(property1, property2) {  
    this.property1 = property1;  
    this.property2 = property2;  
}  
let obj = new Object(property1, property2);  

示例：

JavaScript

/* 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);

输出

{}

{constructor: ƒ}  
constructor: ƒ Employee(name, id, job)  
[[Prototype]]: Object  

在这里，定义了一个包含员工的基本详情（名称、ID和职位）的Employee对象的构造函数。

方法4：使用函数构造函数

我们可以使用该Employee函数构造函数创建Employee对象，该对象将继承该构造函数的属性。

语法：

let Object1 = new Object(property1, property2, property3)  

示例：

Javascript

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);

输出

Employee { name: 'Stephen', id: 2364, job: 'developer' }
Employee { name: 'Maria', id: 8896, job: 'tester' }

方法5：在构造函数中使用函数

我们还可以在构造函数中添加某些函数，这些函数可以为任何对象调用。

示例：

Javascript

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();

输出结果

My name is Stephen and I am a developer
My name is Maria and I am a tester

在创建了两个对象Employee1和Employee2之后，我们调用了Employee1.intro()和Employee2.intro()。首先，它会检查相应对象中是否存在属性的名称和工作。如果不存在，则该属性将被认为是未定义的。因此，构造函数定义了对象将继承的所有属性和方法。