数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 JavaScript 对象中添加方法？
在本文中，我们将介绍如何在 JavaScript 中向 JavaScript 对象添加方法，并提供相应的示例。
JavaScript 对象是一个具有属性的实体。属性可以是变量或方法，它们定义了对象的状体和行为。方法是对象的属性，它为对象添加行为。
我们可以使用对象原型向 JavaScript 对象添加方法。所有 JavaScript 对象都从原型获取其属性和方法。
让我们通过本文后面的示例更好地理解这个概念。
语法
使用对象原型向 JavaScript 对象添加方法的语法为：
functionName.prototype.newMethodName = function(){}
or
functionName.prototype.newMethodName = function(param1,param2,..paramN){}
其中：
functionName 是现有的函数名
newMethodName 是要添加的方法名。
param1, param2..paramN 是要传递给新方法的参数。
示例 1
这是一个示例程序，通过扩展 Calculator 函数原型的行为来向对象添加 add 方法。
<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.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function Calculator(){
Calculator.prototype.add = function (a,b){
var result = a+b;
document.getElementById('method-to-obj').innerHTML='The sum of two numbers is : '+result;
}
}
var calc = new Calculator();
calc.add(10,20);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 2
这是一个向 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.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function Car(name, model, year, color) {
this.Name = name;
this.Model = model;
this.Year = year;
this.Color = color;
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
car1.prop = function() {
return ""+this.Name+" has launched in the year "+this.Year;
}
document.getElementById("method-to-obj").innerHTML = car1.prop();
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
示例 3
这是一个创建返回对象的函数的示例程序。在这个示例中，.mul 被创建为对象的属性。每个创建的新对象都有一个为其创建的 .mul 函数。在这个例子中，方法是函数的参数。
<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.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function ReturnCalculatorObject() {
var a, b,
multiplication = function (a, b) {
var result = a * b;
document.getElementById('method-to-obj').innerHTML = 'The Product of two numbers is : ' + result;
},
object1 = {
mul: multiplication
};
return object1;
}
var calc = new ReturnCalculatorObject();
calc.mul(20, 30);
</script>
</body>
</html>
执行上述代码后，将生成以下输出。
更新于：2022-12-09
6000+ 次浏览
广告