JavaScript object

Everything in JavaScript is an object: strings, numbers, arrays, dates, etc.

In JavaScript, an object is data with properties and methods.

JavaScript object is an unordered collection data type, which consists of several key-value pairs.

Object definition

You can use characters to define and create JavaScript objects:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script language="JavaScript">
        var person = new Object();
     person.name="kevin";
     person.age=31;
     alert(person.name);
     alert(person["age"])
</script>
</head>
<body>
</body>
</html>

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.

JavaScript objects are containers for property variables.

The object key-value pair is written similar to:

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

JavaScript objects are dynamically typed, and you can freely add or delete attributes to an object:

var xiaoming = {
name: '小明'

##};xiaoming.age; // undefined

xiaoming.age = 18; // Add an age attribute

##xiaoming.age; // 18

delete xiaoming .age; // Delete age attribute

##xiaoming.age; // undefined

delete xiaoming['name']; // Delete name attribute

xiaoming.name; // undefined

delete xiaoming.school; //Deleting a non-existent school attribute will not Error

Object methods

The method of an object defines a function and is stored as a property of the object.

Object methods are called (as a function) by adding ().

This instance accesses the fullName() method of the person object:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<p id="demo"></p>
<script>
var person = {
    firstName: "Tom",
    lastName : "Jay",
    id : 666,
    fullName : function() 
      {
       return this.firstName + " and " + this.lastName;
    }
};
      document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

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> <script> function Person(name,age,job) { this.name=name; this.age=age; this.job=job; 　　this.friends=["Jams","Martin"]; } Person.prototype.sayFriends=function() { alert(this.friends); }; var person1 = new Person("kevin",31,"SE"); var person2 = new Person("Tom",30,"SE"); person1.friends.push("Joe"); person1.sayFriends();//Jams,Martin,Joe person2.sayFriends();//Jams,Martin </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]