Javascript beginners: Comprehensive learning of object concepts

This article describes almost all basic concepts about objects, what are objects, how to create objects, how to set and read object attributes, how to delete attributes, constructors, and object prototypes, parent class, subclass, inheritance, and so on.


1. Object
* An object is a composite data type that groups multiple data values in a single unit and uses names to access these values. Another way to interpret an object is that an object is an unordered set of attributes, each of which has its own name and value. The named values stored in an object can be original values such as numbers and strings, or objects.
*/
Var o = new Object ();

2. directly create objects
* The object quantity is composed of the attribute description list. The list is contained in braces. The attribute description is separated by commas.
* Each attribute description in the direct object quantity is composed of the attribute name plus the colon and attribute value.
*/
Var zhangsan = {name: "zhangsan", age: 34, married: true };
Window. alert (typeof zhangsan); // output object

3. Read and set attributes
* The properties of an object are read and set through the dot operator. You can directly create new attributes of an object.
*/
Window. alert (zhangsan. car); // output undefined
Zhangsan. car = "BMW"; // assign a value directly
Window. alert (zhangsan. car); // outputs the BMW

4. Attribute Enumeration
* Each attribute is enumerated through a for loop, and the order cannot be fixed.
* Note that the attribute name is not the attribute value.
*/
Var values = "";
For (var v in zhangsan) values + = v + "\ n"; // enumerate each attribute
Window. alert (values );

5. delete is used for Attribute deletion, such as delete zhangsan. car.
*/

6. Constructor
* Constructor is a javascript function with two features:
* (1) it is called by the new operator;
* (2) What is passed to it is an application for a newly created null object. The reference is used as the value of the keyword "this, it also needs to initialize the newly created object.
* Remember: The constructor only initializes the object and does not return the newly created object.
*/
Function Rectangle (w, h ){
This. width = w;
This. height = h;
}
Var ret1 = new Rectangle (2, 1 );
// Note how the constructor uses its parameters to initialize the attributes of the object referenced by the this keyword.

7. Object Method
* The so-called method is a javascript function called through an object. As we know, functions are numeric values. They use no special names. They can be assigned to any variable or even to any attribute of an object, this attribute is the object method.
* In the object's method body, the value of this keyword becomes the object that calls this method.
*/
Function print (){}
Ret1.print = print;

8. Discussion about this
* Any function used as a method will get an additional actual parameter, that is, the object that calls the function. Since a method usually performs an operation on that object, it is best to use the method call syntax to express the fact that a function acts on the object.
* For example, rect. setSize (width, height );
* SetSize (rect, width, height );
* Although the two lines of code perform the same operation on the object rect, the first line of code indicates that the object rect is the focus of the operation (or the target of the operation) this is obviously much clearer.
*
* Although it is useful to treat functions and Methods Differently, there is actually no big difference between them. Recall that the function is the value stored in the variable, and that variable is just an attribute of the global object. Therefore, when you call a function, you actually call a method of a global object.
* In such a function, the keyword "this" references a global object. Therefore, there is no technical difference between functions and methods. The real difference lies in the design and purpose. methods are used to operate this object, and functions are usually independent, this object is not required.
*/
(Function f (){
Var values = "";
For (var v in this) values + = v + "";
Window. alert (values );
}) (); // Return all properties and method names of the window object

9. Prototype objects and inheritance
* Javascript each object has an original object, and each object inherits all attributes of the prototype object.
* The prototype of an object is defined by the constructor that creates and initializes the object. All functions in javascript have the prototype attribute, which references an object. Although the prototype object is empty during initialization,
* However, any property you define in it will be inherited by all objects created by the constructor.
*
* The constructor defines the class of the object and initializes the attributes of state variables in the class, such as width and height. Because the prototype object is associated with the constructor, each member of the class inherits the same attributes from the prototype object.
* This indicates that the prototype object is an ideal place for storing methods and other constant attributes.
*
* Note: Inheritance occurs automatically when a property value is queried. Attributes are not copied from the prototype object to the new object. They just look like the attributes of those objects. There are two important meanings.
* A prototype object can greatly reduce the memory demand for each object, because the object can inherit many attributes. Second, even if the property is added to its prototype object after the object is created, the object can inherit these attributes.
*
* Each class has a prototype object, which has a set of attributes. However, there are actually a large number of class instances, and each instance can inherit the attributes of the prototype object. Because a prototype object can be inherited by multiple objects, javascript
* The asymmetry between read/write attribute values must be enhanced. When reading the attribute p of object o, javas first checks whether o has an attribute named p. If o does not have this attribute, javascript checks whether o's prototype object has this attribute. In this way, the prototype-based Inheritance Mechanism works.
*
* When writing a property value, javascript does not check whether the property value exists in the prototype object. Because, if this attribute of the prototype object is allowed to be changed, the P value of the entire object class is changed, including the attribute values of other new object variables.
*
* Therefore, property inheritance only occurs when the attribute value is read, rather than when the attribute value is written. If the property p of the object o you set is inherited from its prototype object, the result is that you directly create a new property p in object o. Now that o has a property named p, it will no longer inherit the value of p from its prototype object. When you read the p value, java first queries the properties of o.
* Because it discovers p defined in o, it does not need to query the prototype object, and no longer discovers the p value defined in the prototype object. We call p in o "obscure" or "hide" the property p in the prototype object.
*
* Because the attributes of a prototype object are shared by all objects in a class, they are usually used to define the same attributes of all objects in the class. This makes the prototype object applicable to the definition of methods and constants.
*/

10. instance attributes, instance methods, class attributes, and class methods
* Each object has its own copy of instance attributes. The instance attributes in javas are those created or initialized using constructors in the object.
*
* The instance method is called by a specific object or instance. The instance method uses the keyword "this" to reference the objects or instances to operate on. Although any instance of a class can call the instance method, it does not mean that each object contains its own unique copy of the method as the instance property. On the contrary, each instance method is shared by all instances of the class. In javascript, defining an instance method for a class is implemented by setting an attribute in the prototype object of the constructor as a function value.
* In this way, all instances created by the constructor will share an inherited reference to the function.
*
* Class attributes indicate that only one copy is available for all class instances. In javascript, class attributes are essentially global variables. However, they are associated with a class and have a logical location in the javascript namespace, so that they will not be overwritten by other attributes with the same name.
* For example, Circle. PI = 3.14. Although Circle is a constructor, because javascript Functions are objects, we can create function attributes, just like creating object attributes.
*
* The class method is similar to the class property. In javascript, to define a class method, you only need to use an appropriate function as the attribute of the constructor.
*/

11. parent class and Child class
* In javascript, the parent class of all classes of the Object class is at the top of the class hierarchy chart. All classes inherit all methods of the Object class.
*
* We have learned how to inherit attributes from the prototype objects of their constructors. How do they inherit the attributes of objects? We know that the prototype Object itself is an Object, which is created by the constructor Object.
* This means that the prototype inherits the Object. prototype attribute. Therefore, ret1 inherits the attributes of Rectangle. prototype and Object. prototype. Because the prototype attribute of all objects inherits the Object. prototype attribute,
* Therefore, all javascript subclasses inherit all the attributes of the Object, that is, the Object class is the root class of javascript and is at the top layer of the class hierarchy chart.
*/

12. Use [] to read and set Object Attributes
* Generally, the dot operator is used to access the object attributes, but the attributes after the dot operator are identifiers. In javascript, identifiers must be input word by word. They are not a data type. If the attributes in the program are dynamic and uncertain, we will not be able to access them.
* As explained above, an object is a set of attributes, that is, an array. Then, you can use the array access member operator [] to access object attributes. [] Is the property name, is a string type, we can dynamically determine the object property name.
*
* Objects using the [] operator are also called correlated arrays. An associative array is a data structure that allows you to dynamically associate any value with any string. In fact, javascript objects are implemented using Correlated arrays internally. The dot operator is used only to make them look more like static objects in C ++ and Java.
*
* The previous for/in loop is actually an array operation.
*
* We generally mean that an array is a data structure that associates any value with a non-negative integer.
*
* Arrays are actually objects with additional feature layers. For example, var a = new Array (); window. alert (typeof a); Output Object.
*/

13. attributes and methods of the Object class
* The constructor attribute indicates initializing the constructor of the object. Therefore, you can use this attribute to determine the object type.
*/
Function A () {return "aaaaaaaaa "};
Var a = new ();
Window. alert (a. constructor); // output the Function Definition of.
Window. alert (a. constructor = A); // The result is true.
Window. alert (a. constructor (); // output aaaaaaaaaa

/**
* The toString () method does not have any actual parameters. It returns a string that represents the type or value of the object that calls it. When javascript needs to convert an object into a string, it calls the toString method of this object.
* For example, when you use the operator "+" to connect a string with an object, or pass an object to alert () or document. when the write () method is used, the toString () method is called.
*/


Source Network