JavaScript objects are data that have properties and methods.
Real life objects, properties and methods
In real life, a car is an object.
The object has its properties, such as weight and color, etc., and the methods include start and stop, etc.:
All cars have these methods, but the time they are executed is different. . All cars have these attributes, but the attributes of each car are different.
JavaScript Object
In JavaScript, almost everything is an object.
In JavaScript, objects are very important. When you understand objects, you can understand JavaScript.
#You have learned about JavaScript variable assignment.
The following code sets the value of variable car to "Fiat":
var car = "Fiat";
Object Also a variable, but an object can contain multiple values (multiple variables).
var car = {type:"Fiat", model:500, color:"white"};
In the above example, 3 values ("Fiat ", 500, "white") is assigned to the variable car.
In the above example, 3 variables (type, model, color) are assigned to the variable car.
Tip: JavaScript objects are containers for variables.
Object definition
You can define and create JavaScript objects using characters:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网（php.cn)</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁.";
</script>
</body>
</html>Run the program and try it
Define JavaScript objects to span multiple lines, spaces and newlines are not necessary:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网（php.cn)</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
</script>
</body>
</html>Run the program and try it
Object properties
It can be said that "JavaScript objects are containers of variables".
However, we usually think of "JavaScript objects as containers of key-value pairs".
Key-value pairs are usually written as name : value (key and value are separated by colon).
Key-value pairs in JavaScript objects are often called object properties.
Tip: JavaScript objects are containers for property variables.
The object key-value pair is written similar to:
Accessing object properties
You can access object properties in two ways:
Method one
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网（php.cn)</title>
</head>
<body>
<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>Run the program to try it
Method two
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> PHP中文网</title>
</head>
<body>
<p>
有两种方式可以访问对象属性:
</p>
<p>
你可以使用 .property 或 ["property"]。
</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html> Run the program to try it
Accessing object methods
##You can create object methods using the following syntax:
methodName : function() { code lines }
You can access object methods using the following syntax:
objectName.methodName()
Usually fullName() is used as a method of the person object, and fullName is used as a property.
There are many ways to create, use and modify JavaScript objects.
There are also many ways to create, use and modify properties and methods.
Next Section
