Javascript 简明教程

JavaScript - Object Methods

JavaScript Object Methods

JavaScript 对象方法是包含函数定义的对象属性。对象是属性的集合,属性在名称(或键)和值之间关联。属性的值可以是一个函数;在这种情况下,属性称为方法。

JavaScript object methods are object properties that contains function definitions. An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function; in that case the property is known as a method.

您可以直接将方法添加到对象或者将其添加为属性值。方法还可以获取参数并返回值。对象方法是将功能添加到对象的有力方式。它们允许封装代码并使其可重用。

You can either directly add a method to the object or add it as a property value. The method can also take the parameters and return the value. Object methods are a powerful way to add functionality to objects. They allow you to encapsulate code and make it reusable.

Syntax

遵循以下语法将方法添加到对象。

Follow the syntax below to add a method to the object.

const obj = {
	sum: function () {
		// Method body
	}
}
obj.sum();

在以上语法中,'sum' 是在 'obj' 对象内定义的方法。您可以像访问对象属性那样访问该方法,并添加一对括号来调用该方法。

In the above syntax, 'sum' is a method defined inside the 'obj' object. You can access the method as you access the object property and add the pair of parenthesis to invoke the method.

Example

我们在下例中的 'company' 对象中添加了 getInfo() 方法。getInfo() 方法返回包含对象属性的字符串。

We added the getInfo() method in the 'company' object in the example below. The getInfo() method returns the string containing the object properties.

此处,我们用 'this' 关键字来访问对象中的对象属性。'this' 关键字表示对象本身。

Here, we used the 'this' keyword to access the object properties inside the object. The 'this' keyword represents the object itself.

随后,我们用对象作为引用来调用该方法。

After that, we used the object as a reference to invoke the method.

<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 提供了将方法定义到对象中的最短方法。

The ES6 provides the shortest way to define a method into the object.

Syntax

遵循以下语法将方法添加到对象。

Follow the syntax below to add a method to the object.

const Obj = {
   sum() {
   // Method body
   }
}
Obj.sum();

与前一个类似,您可以在以上语法中访问和调用该方法。

Like the previous one, you can access and invoke the method in the above syntax.

Example

在下例中,我们定义了getInfo() 方法,如同前一个示例。

In the example below, we defined the getInfo() method as the previous example.

<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() 方法获取两个参数并返回它们的和。

The example below defines the getSum() method inside the 'nums' object. The getSum() method takes the two parameters and returns their sum.

我们在调用它时将数字参数传递给该方法。

We passed the number arguments to the method while invoking it.

<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 中,更新或将新方法添加到对象与更新或将新属性添加到对象是一致的。您可以使用点或方括号表示法来更新或将方法添加到对象。

In JavaScript, updating or adding a new method to the object is same as updating or adding new proeprties to the object. You can either use the dot or square bracket notation to update or add method to the object.

Example

下例在 'nums' 对象内定义了 getSum() 方法。

The example below defines the getSum() method inside the 'nums' object.

随后,我们在 nums 对象内添加 getMul() 方法。我们通过传递两个参数来调用 getMul() 方法以获得它们相乘的结果。

After that, we add the getMul() method inside the nums object. We invoke the getMul() method by passing two arguments to get the multiplication of them.

<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 对象如字符串、数字、布尔值等也包含内置方法。您可以将对象作为引用来执行它们。

JavaScript objects like string, number, boolean, etc., also contain built-in methods. You can execute them by taking the object as a reference.

Example

在下例中,我们定义了包含数值的变量 'num'。随后,我们使用 toString() 方法将数字转换为字符串。

In the example below, we have defined the 'num' variable containing the numeric value. After that, we used the toString() method to convert the number to a string.

<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