I. Attributes and Methods of Objects
- In JavaScript, objects are collections of attributes and methods, which are also called members of objects.
Object attributes
- Get the value of the attribute
-
Set the value of the property
Object Method
- Call Method Syntax
-
Method of calling object
Types of JavaScript Objects
- (1) Custom Object
-
Built-in objects: Math, Date, Array...
-
(3) Browser objects: document, window...
3. Custom Objects
Direct creation of custom objects
Demonstration case:
- Create Object User
var User = {
name:"mr",
pwd:"mrsoft"
}
-
Output attribute values
(2) Creating objects through custom constructors
- Define constructors
function User(name,pwd){
this.name = name;
this.pwd = pwd;
}
-
Create object instances
var user1 = new User("mr","mrsoft");- Demonstration case:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Creating custom objects with constructors</title>
<script type="text/javascript">
function Book(name,type,price){
this.name = name; //Object's name attribute
this.type = type; //Object's type attribute
this.price = price; //price attribute of object
this.show = function(){ //show method of object
document.write("Title:"+this.name+" Type:"+this.type+" Price:"+this.price);
}
}
</script>
</head>
<body>
<script type="text/javascript">
var book1 = new Book("JavaScript From entry to proficiency","JavaScript",60); //Create a new object book1
book1.show();
document.write("<p>");
var book2 = new Book("HTML From entry to proficiency","HTML",50); //Create a new object book2
book2.show();
</script>
</body>
</html>
③adopt Object Object Creation Custom Object
- Concept:ObjectThe object isJavaScriptThe internal object of the object, which provides the basic function of the object
- Grammatical Format:
- Demonstration case:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>application Object create object</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var book = new Object(); //Create an empty object //Method of Defining Objects book.getBookInfo = getBookInfo; function getBookInfo(name,type,price){ document.write("Title:"+name+"<br>Type:"+type+"<br>Price:"+price); } //Method of calling object book.getBookInfo("JavaScript Introductory classic","JavaScript","80"); </script> </body> </html>
4. prototype attributes
- The prototype attribute is an attribute that all functions in JavaScript have. This property can add attributes or methods to an object
Demonstration case:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Calculate the circumference and area of a circle</title> </head> <body> <script type="text/javascript"> function Circle(r){ this.r=r;//Setting the r attribute of the object } Circle.prototype.pi=3.14;//Adding pi attributes of objects Circle.prototype.circumference=function(){//Definition of circumference method for calculating circumference return 2*this.pi*this.r; } Circle.prototype.area=function(){//Area method for defining the area of a circle return this.pi*this.r*this.r; } var c=new Circle(10);//Create a new object c document.write("The radius of a circle is"+c.r+"<br>");//Radius of output circle document.write("The circumference of a circle is"+parseInt(c.circumference())+"<br>");//Circumference of Output Circle document.write("The area of a circle is"+parseInt(c.area()));//Area of output circle </script> </body> </html>
5. Object Access Statements (for...in, with)
for...in Loop statement
- Concept:for...in Statements are used to traverse each attribute of an object, each time saving the attribute name as a string in a variable.
- Matters needing attention:application for...in Statement traverses the attributes of an object and must be in the form of an array (object name) when outputting attribute values[Attribute name])Output instead of using "object name".The form of attribute name
- Demonstration case:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>All attributes of the output object</title> </head> <body> <script type="text/javascript"> function Book(name,type,price,publishing){ this.name = name; //Object's name attribute this.type = type; //Object's type attribute this.price = price; //price attribute of object this.publishing = publishing; //Object publishing property } var book=new Book("JavaScript From entry to proficiency","JavaScript",60,"tsinghua university press"); for(var i in book){ //Apply the for...in loop statement document.write ("Property name:"+i+"，Attribute values:"+book[i]+"<br>"); //Output each attribute name and value } </script> </body> </html>
with statement
- Concept: with statements are used to avoid repeated references to specified object names when accessing an object's properties or methods
