資料結構
網路
關係型資料庫管理系統 (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+ 次瀏覽
廣告