JavaScript object

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:

Associative array in PHP
Dictionary in Python
Hash table in C language
Hash map in Java
Hash tables in Ruby and Perl

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.

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

JavaScript object

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]