JavaScript Objects
Everything in JavaScript is an object: strings, values, 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 regular expressions are also objects. Arrays are an object. Even functions can be objects.
JavaScript Objects
Objects are 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 to obtain the length of the string:
var message="Hello World!";
var x=message.length;
After the above code is executed, the value of x will be:
12
Methods for accessing objects
Methods are actions that can be performed on an object.
You can call a method with the following syntax:
objectName.methodName()
This example uses the toUpperCase() method of the String object 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!
Creating JavaScript Objects
With JavaScript, you can 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 a function to define the object and then create a new object instance
Create a direct instance
This example creates a new instance of the object and adds four properties to it:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
var person=new Object();
person.firstname="jack";
person.lastname="Doe";
person.age=35;
person.eyecolor="blue";
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html>
Alternative syntax (using object literals):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
</html> Use the object constructor
This example uses a function to construct the object:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("jack","Doe",35,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
</html>In JavaScript, this usually points to the function we are executing. Or point to the object to which the function belongs (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 add these new properties to it: 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
Add the method to the JavaScript object
Methods are just functions attached to the 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.
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.
Next Section