如何在 JavaScript 中创建带有原型的对象？

在本文中，我们将讨论对象创建和原型，并通过示例了解对象创建的不同方式及其实现。原型是 JavaScript 中的对象从另一个对象继承特性的机制。原型属性也是一个对象，其方法和属性将被任何新对象继承。

JavaScript 中的简单对象可以与具有某些属性的现实对象进行比较。例如，可以将 Employee 视为一个对象，具有“name”、“age”、“department”、“id”等属性，这些属性对于每个员工都是唯一的。

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

句法：

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

例子：

Javascript

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

例子：

HTML

  

    
        Basic Example to Describe Object Prototype
    

  

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

  

输出：

565
Finance

另一种方法是创建一个构造函数来定义一个对象。

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

句法：

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

例子：

HTML

  

    
        Basic Example to Describe Object Creation
    

  

    
  
        /* 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: ƒ Employee(name, id, job)

在这里，定义了一个Employee 对象的构造函数，其中包含Employee 的基本细节，即姓名、id 和工作。

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

句法：

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

例子：

HTML

  

    
        Basic Example to Describe Object Creation
    

  

    
        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'}
    id: 2364
    job: "developer"
    name: "Stephen"
    
Employee {name: 'Maria', id: 8896, job: 'tester'}
    id: 8896
    job: "tester"
    name: "Maria"

在这里，我们使用 Employee 构造函数创建了两个员工Employee1和Employee2 ，该构造函数充当 Employee 对象的模板。

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

例子：

HTML

  

    
        Basic Example to Describe Object Prototype
    

  

    
        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() 。首先，它将检查属性的名称和作业是否存在于相应的对象中。如果不是，那么该属性将被视为 undefined 。因此，构造函数定义了对象将继承的所有属性和方法。