JavaScript Objects

Real-life objects, properties, and methods

In real life, a car is aobject.

Cars have such attributes as weight and colorAttributeand also have actions like start and stop.Method:

object Attribute Method

car.name = porsche

car.model = 911

car.length = 4499mm

car.color = white

car.start()

car.drive()

car.brake()

car.stop()

All cars have the sameAttributeBut the attribute values vary from car to car.

All cars have the sameMethodHowever, methods can be executed at different times.

JavaScript Objects

As you have already learned, JavaScript variables are containers for data values.

This code assigns aa single value(porsche) assigned to the variable named carvariable:

var car = "porsche";

Try it yourself

An object is also a variable. But an object contains many values.

This code assignsmultiple values(porsche, 911, white) assigned to the variable named carvariable:

var car = {type:"porsche", model:"911", color:"white"};

Try it yourself

Values are assigned withName:Valuewritten in the form of (name and value separated by a colon).

JavaScript objects areNamed valuescontainer.

Object properties

The name:value pairs in (JavaScript objects) are calledAttribute.

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
Attribute Attribute value
firstName Bill
lastName Gates
age 62
eyeColor blue

Object method

An object can also haveMethod.

A method is executed on an objectaction.

A method is executedFunction definitionis stored in the attribute.

Attribute Attribute value
firstName Bill
lastName Gates
age 62
eyeColor blue
fullName function() {return this.firstName + " " + this.lastName;}

The method is a function stored as a property.

Instance

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

the this keyword

In the function definition,this referring to the "owner" of the function.

In the above example,this refers to the object that "owns" the fullName function person object.

In other words,this.firstName means this objectthe firstName property.

Please JS this keywordThis chapter will learn more about the knowledge of the this keyword.

Object definition

We have defined (created) a JavaScript object:

Instance

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

Try it yourself

Spaces and line breaks are allowed. Object definitions can span multiple lines:

Instance

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

Try it yourself

Access object property

You can access properties in two ways:

objectName.propertyName

or

objectName["propertyName"]

Example 1

person.lastName;

Try it yourself

Example 2

person["lastName"];

Try it yourself

Access object method

You can access object methods using the following syntax:

objectName.methodName()

Instance

name = person.fullName();

Try it yourself

If youWithout () Accessing the fullName method will returnFunction definition:

Instance

name = person.fullName;

Try it yourself

Methods are actually stored as function definitions in the form of property values.

Do not declare strings, numbers, and boolean values as objects!

If a JavaScript variable is declared with the keyword "new", it will be created as an object:

var x = new String();        // Declare x as a String object
var y = new Number();        // Declare y as a Number object
var z = new Boolean();       // Declare z as a Boolean object

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

Please avoid string, numeric, or logical objects. They will increase the complexity of the code and reduce the execution speed.

You will learn more about objects in the later chapters of this tutorial.

textbook JavaScript ObjectsFor more information about

ECMAScript Object-Oriented Technology
For more knowledge about the topic, please read the relevant content in the Advanced JavaScript Tutorial:
ECMAScript Object Application
This section briefly introduces the terminology of object-oriented technology, the requirements of object-oriented languages, and the composition of objects.
ECMAScript Object Type
This section introduces the three types of ECMAScript: local objects, built-in objects, and host objects, and provides links to related reference manuals.
ECMAScript Object Scope
This section explains ECMAScript scope and the this keyword.
ECMAScript Define Class or Object
This section details various ways to create ECMAScript objects or classes.
ECMAScript Modify Object
This section explains how to modify objects by creating new methods or redefining existing methods.