如何在 JavaScript 对象构造函数中添加属性?
在本文中,我们将介绍如何在 JavaScript 中向 JavaScript 对象构造函数添加属性,并提供相应的示例。
向对象构造函数添加属性与向普通对象添加属性不同。如果要添加属性,必须在构造函数本身中添加,而不是在构造函数外部添加,而在普通对象中,可以在任何地方添加。
为了更好地理解给定的任务,让我们深入了解 JavaScript 中构造函数的语法和用法。
语法
构造函数的语法如下:
Constructor(); // No parameters Constructor(param1); //One parameter constructor Constructor(param1,param2,…,paramN) // N-parameter constructor.
其中param1,param2,..paramN 是传递给构造函数的参数。
示例 1
这是一个向 JS 对象构造函数添加属性的示例程序。在这个例子中,我们将参数作为属性添加到构造函数中。
<!DOCTYPE html> <html> <head> <meta charset ="UTF-8"> <meta http-equiv ="X-UA-Compatible" content ="IE=edge"> <meta name ="viewport" content ="width=device-width, initial-scale=1.0"> <title>To add a method to a JavaScript Object Constructor.</title> </head> <body style="text-align : center"> <h3>Add a method to a JavaScript Object Constructor.</h3> <p id="prop-to-obj"></p> <script> function Car(name, model, year, color) { this.Name = name; this.Model = model; this.Year = year; this.Color = color; this.type = 'SUV' } var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red"); document.getElementById("prop-to-obj").innerHTML = car1.Name+" is of "+car1.type+" type"; </script> </body> </html>
执行以上代码后,将生成以下输出。
示例 2
这是一个将方法作为属性添加到 JS 对象构造函数的示例程序。我们可以将函数作为属性添加到对象中。然后可以将它们称为方法。
<!DOCTYPE html> <html> <head> <meta charset ="UTF-8"> <meta http-equiv ="X-UA-Compatible" content ="IE=edge"> <meta name ="viewport" content ="width=device-width, initial-scale=1.0"> <title>To add a method to a JavaScript Object Constructor.</title> </head> <body style="text-align : center"> <h3>Add a method to a JavaScript Object Constructor.</h3> <p id="method-to-obj-constructor"></p> <script> function Car(name, model, year, color) { this.Name = name; this.Model = model; this.Year = year; this.Color = color; this.type = 'SUV'; this.description = function() { return this.Name+" is of "+this.Model+" model and launched in the year "+this.Year+" and is of "+this.type+" type." } } var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red"); document.getElementById("method-to-obj-constructor").innerHTML = car1.description(); </script> </body> </html>
执行以上代码后,将生成以下输出。
示例 3
这是一个向 JavaScript 对象构造函数添加属性(方法和参数)的示例程序。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>To add a method to a JavaScript Object Constructor.</title> </head> <body style="text-align : center"> <h3>Add a method to a JavaScript Object Constructor.</h3> <p id="method-to-obj-constructor"></p> <script> function Student(name, rollNo, course) { this.Name = name; this.RNo = rollNo; this.course = course; this.year = "2022"; this.college = "St. Xaviers College"; this.studentDetails = function () { return this.Name + " with roll number " + this.RNo + " is a student of : " + this.college; } } var studentObj = new Student("Harsha", "17355B07C7", "CSE"); document.getElementById("method-to-obj-constructor").innerHTML = studentObj.studentDetails(); </script> </body> </html>
执行以上代码后,将生成以下输出。
广告