Javascript 简明教程
JavaScript - Object Methods
JavaScript Object Methods
JavaScript 对象方法是包含函数定义的对象属性。对象是属性的集合,属性在名称(或键)和值之间关联。属性的值可以是一个函数;在这种情况下,属性称为方法。
您可以直接将方法添加到对象或者将其添加为属性值。方法还可以获取参数并返回值。对象方法是将功能添加到对象的有力方式。它们允许封装代码并使其可重用。
Syntax
遵循以下语法将方法添加到对象。
const obj = {
sum: function () {
// Method body
}
}
obj.sum();
在以上语法中,'sum' 是在 'obj' 对象内定义的方法。您可以像访问对象属性那样访问该方法,并添加一对括号来调用该方法。
Example
我们在下例中的 'company' 对象中添加了 getInfo() 方法。getInfo() 方法返回包含对象属性的字符串。
此处,我们用 'this' 关键字来访问对象中的对象属性。'this' 关键字表示对象本身。
随后,我们用对象作为引用来调用该方法。
<html>
<body>
<p>Company Information</p>
<p id = "output"> </p>
<script>
const company = {
companyName: "Tutorials Point",
companyWebsite: "www.tutorialspoint.com",
getInfo: function () {
return "Comapny Name: " + this.companyName +"<br>Website: " + this.companyWebsite;
},
}
document.getElementById("output").innerHTML = company.getInfo();
</script>
</body>
</html>
Company Information
Comapny Name: Tutorials Point
Website: www.tutorialspoint.com
Object Method Shorthand
ES6 提供了将方法定义到对象中的最短方法。
Syntax
遵循以下语法将方法添加到对象。
const Obj = {
sum() {
// Method body
}
}
Obj.sum();
与前一个类似,您可以在以上语法中访问和调用该方法。
Example
在下例中,我们定义了getInfo() 方法,如同前一个示例。
<html>
<body>
<p id = "output"> </p>
<script>
const employee = {
name: "John Doe",
age: 32,
getInfo() {
return "The employee name is " + this.name + " and his age is " + this.age + " Years.";
},
}
document.getElementById("output").innerHTML = employee.getInfo();
</script>
</body>
</html>
The employee name is John Doe and his age is 32 Years.
Example
下例在 'nums' 对象内定义了 getSum() 方法。getSum() 方法获取两个参数并返回它们的和。
我们在调用它时将数字参数传递给该方法。
<html>
<body>
<p id = "output">The sum of 2 and 3 is </p>
<script>
const nums = {
getSum(a, b) {
return a + b;
}
}
document.getElementById("output").innerHTML += nums.getSum(2, 3);
</script>
</body>
</html>
The sum of 2 and 3 is 5
Updating or Adding a Method to the Object
在 JavaScript 中,更新或将新方法添加到对象与更新或将新属性添加到对象是一致的。您可以使用点或方括号表示法来更新或将方法添加到对象。
Example
下例在 'nums' 对象内定义了 getSum() 方法。
随后,我们在 nums 对象内添加 getMul() 方法。我们通过传递两个参数来调用 getMul() 方法以获得它们相乘的结果。
<html>
<body>
<p id = "output">The multiplication of 2 and 3 is </p>
<script>
const nums = {
getSum(a, b) {
return a + b;
}
}
nums.getMul = function (a, b) {
return a * b;
}
document.getElementById("output").innerHTML += nums.getMul(2, 3);
</script>
</body>
</html>
The multiplication of 2 and 3 is 6
Using Built-in Methods
JavaScript 对象如字符串、数字、布尔值等也包含内置方法。您可以将对象作为引用来执行它们。
Example
在下例中,我们定义了包含数值的变量 'num'。随后,我们使用 toString() 方法将数字转换为字符串。
<html>
<body>
<p id = "demo"> </p>
<script>
const output = document.getElementById("demo");
const num = new Number(20);
let str = num.toString();
output.innerHTML += "After converting the number to string: " + str + "<br>";
output.innerHTML += "Data type of after conversion: " + typeof str;
</script>
</body>
</html>
After converting the number to string: 20
Data type of after conversion: string