JavaScript Objects

JavaScript objects are data that have properties and methods.

Real-Life Objects, Properties, and Methods

In real life, a car is an object.

Objects have their properties, such as weight and color, and methods such as start and stop:

Object Properties Methods

car.name = Fiat

car.model = 500

car.weight = 850kg

car.color = white
car.start()

car.drive()

car.brake()

car.stop()

All cars have these properties, but the properties of each car are not exactly the same.

All cars have these methods, but they are executed at different times.

JavaScript Objects

In JavaScript, almost everything is an object.

Note In JavaScript, objects are very important. Once you understand objects, you can understand JavaScript.

You have already learned about assigning values to JavaScript variables.

The following code assigns to the variablecarthe value "Fiat":

var car = "Fiat";

An object is also a variable, but an object can contain multiple values (multiple variables), and each value is presented as aname:valuepair.

var car = {name:"Fiat", model:500, color:"white"};

In the above example, three values ("Fiat", 500, "white") are assigned to the variable car.

Note JavaScript objects are containers for variables.

Object Definition

You can use a literal to define and create JavaScript objects:

Example

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Try it Yourself »

Defining a JavaScript object can span multiple lines; spaces and line breaks are not required:

Example

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

Try it Yourself »

Object Properties

It can be said that "JavaScript objects are containers for variables".

However, we usually think of "JavaScript objects as containers for key-value pairs".

Key-value pairs are usually written asname : value(the key and value are separated by a colon).

Key-value pairs in JavaScript objects are usually calledobject properties.。

Note JavaScript objects are containers for property variables.

The writing of object key-value pairs is similar to:

  • associative arrays in PHP
  • dictionaries in Python
  • hash tables in C
  • hash maps in Java
  • hash tables in Ruby and Perl

Accessing Object Properties

You can access object properties in two ways:

Example 1

person.lastName;

Try it Yourself »

Example 2

person["lastName"];

Try it Yourself »

Object Methods

An object method defines a function and stores it as a property of the object.

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

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

Example

name = person.fullName();

Try it Yourself »

If you access the fullName property of the person object, it will be returned as a string defining the function:

Example

name = person.fullName;

Try it Yourself »

 

Note JavaScript objects are containers for properties and methods.

In the following tutorials, you will learn more about functions, properties, and methods.

Accessing Object Methods

You can create an object method using the following syntax:

methodName : function() {
    // 代码 
}

You can access an object method using the following syntax:

Example

objectName.methodName()

Try it Yourself »

Usually fullName() is a method of the person object, and fullName is a property.

If you use the fullName property, without adding(), it will return the definition of the function:

Example

objectName.methodName

Try it Yourself »

There are many ways to create, use, and modify JavaScript objects.

Similarly, there are many ways to create, use, and modify properties and methods.

Note In the following tutorials, you will learn more about objects.

More Examples

Create JavaScript Object I

Create JavaScript Object II

Access Object Properties I

Access Object Properties II

Function Property Accessed as a Method

Function Property Accessed as a Property

Other Extensions