Basic Object concepts
JS supports the following objects:
1. User-Defined Object
2. Core or built-in objects (date, String, number, etc)
3. browser object (BOM)
4. Document Object (DOM)
Object method:
If a function name is assigned to an attribute, this attribute is used as a method of the object.
<script type="text/javascript"> var toy = new Object(); toy.color = "red"; toy.display = printObject(); function printObject() { alert(toy.color); } toy.display(); </script>
Result: red
Create a class and its objects:
Unlike the class mechanism in Java or C ++, JS is defined by functions.
<script type="text/javascript"> function Book() { this.name="abc"; } var bookObj = new Book; alert(bookObj.name); </script>
Result: ABC
The book () function defines a class. When the new function is called, it becomes a constructor and returns the object of this class.
Note: You can dynamically add attributes to objects in JS:
<script type="text/javascript"> function Book() { this.name="abc"; } var bookObj = new Book; bookObj.date = "1990" alert(bookObj.date); </script>
Result: 1990
Inline functions as object methods:
Inline functions assign values to attributes directly in constructors, eliminating the trouble of defining and assigning values first in the first example.
<script type="text/javascript"> function Book() { this.name="abc"; this.msg = function() {alert(this.name);} } var bookObj = new Book; bookObj.msg(); </script>
Result: ABC
Object literal)
You can create an object without calling the constructor.
Objects use key/value to represent object attributes and can be nested.
Syntax:
1. Use a colon to separate key values
2. Use commas to separate keys and values in each group
3. the last key value is separated by commas (,).
4. The entire object is enclosed in a pair of parentheses.
Common Object literal:
Running result: the dialog boxes of Tom, fallin, and fallout are displayed respectively.
Number of nested objects:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Running result:
City: Nanjing --- Province: JiangsuPrototype)
When the prototype attribute of the constructor is assigned a value, it is automatically extended to all instances of the class.
Add a property for the object using the prototype Property
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Result:
Page output
Book1 is published by Jack
Book2 is published by JackNote: The method for adding a new property also applies to adding a new method.
Prototype search chain: when obtaining the object attributes in JS, it will first check whether the property is directly defined in that object. If it is not found, it will be searched from the prototype attribute. If it still does not exist, the parent class object is searched up, and the top-level (object) is always found. This process is called the prototype search chain.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">Output result:
Book1 is published by Jack and in the Science
Book2 is published by Jack and in the ScienceIn this example, the process of searching up is as follows: publisher-> none-> book in the book. prototype: publisher-> book-> Search for category in book-> none-> book. prototype: Search for category-> none-> Object-> none-> object. prototype-> Find
If the object. prototype is not found, undefined is returned.
Inheritance through prototype:
JS does not have the extends keyword, so implementation inheritance uses the prototype method.
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <HTML>Result: B is speaking and ABC is displayed.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
