JavaScript object

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

In addition, JavaScript allows custom objects.

Everything is an object

JavaScript provides multiple built-in objects, such as String, Date, Array, etc. Objects are just special data types with properties and methods.

Boolean type can be an object.
Number type can be an object.
A string can also be an object
A date is an object
Mathematics and regularity Expressions are also objects
An array is an object
Even functions can be objects

JavaScript Object

Object is just a special kind of data. Objects have properties and methods.

Accessing the properties of an object

Properties are values related to the object.

The syntax for accessing object properties is:

objectName.propertyName

This example uses the length property of the String object. Get the length of the string:

var message="Hello World!";
var x=message.length;

After the above code is executed, x The value will be:

Methods to access the object

Methods are actions that can be performed on the object.

You can call methods through the following syntax:

objectName.methodName()

This example uses the String object The toUpperCase() method to convert text to uppercase:

var message="Hello world!";
var x=message.toUpperCase();

After the above code is executed, the value of x will be:

HELLO WORLD!

Create JavaScript object

Pass JavaScript allows you to define and create your own objects.

There are two different ways to create a new object:

Define and create an instance of the object
Use functions to define object and then creates a new object instance

Creating a direct instance

This example creates a new instance of the object and adds four Attributes:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 
document.write(person.firstname + " is " + person.age + " years old.");
</script>

</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

Alternative syntax (using object literals):

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>

</body>
</html>

Run instance»

Click" Run instance" button to view the online instance

Using the object constructor

This example uses a function to construct the object:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
function person(firstname,lastname,age,eyecolor){
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>
</html>

Run instance »

Click the "Run instance" button to view the online instance

In JavaScript, this usually points to the function we are executing, or to the function to which the function belongs Objects (Runtime)

Creating JavaScript Object Instances

Once you have an object constructor, you can create a new object instance, like this:

var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");

Add properties to JavaScript objects

You can add new properties to an existing object by assigning a value to the object:

Assuming personObj already exists - you can It adds these new properties: firstname, lastname, age and eyecolor:

person.firstname="John";
person.lastname="Doe";
person.age=30 ;
person.eyecolor="blue";

x=person.firstname;

After the above code is executed, the value of x will be:

John

Adding methods to JavaScript objects

Methods are nothing more than functions attached to an object.

Method of defining an object inside the constructor function:

function person(firstname,lastname,age,eyecolor)
{
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
	this.eyecolor=eyecolor;

	this.changeName=changeName;
	function changeName(name)
	{
		this.lastname=name;
	}
}

changeName() The value of function name is assigned to the lastname attribute of person.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    this.changeName=changeName;
	function changeName(name){
		this.lastname=name;
	}
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

</body>
</html>

Run instance»

Click the "Run instance" button to view the online instance

JavaScript Classes

JavaScript is an object-oriented language, but JavaScript does not use classes.

In JavaScript, classes are not created, nor are objects created from classes (as in other object-oriented languages).

JavaScript is prototype-based, not class-based.

JavaScript for...in loop

The JavaScript for...in statement loops through the properties of an object.

Syntax

for (variable in object)
{
	执行的代码……
}

Note: The code block in the for...in loop will be executed once for each attribute.

Example

Loop through the properties of the object:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
	
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>
	
</body>
</html>

Run Example»

Click the "Run Instance" button to view the online instance