1. Knowledge reserve:
1. Functions that enumerate attribute names:
(1) for...in: You can traverse all enumerable properties in the object (including own properties and inherited properties) in the loop body.
(2) Object.keys(): Returns an array (enumerable attributes)
(3) Object.getOwnPropertyNames(): All own properties
3. Properties of attributes: data attributes and accessor attributes
(1) Data attributes: writable enumerable configurable value
The data attribute has only one simple value;
(2) Accessories attributes: write (set), read (get), enumerable, configurable
Accessor attributes are not writable (i.e., there is no writable feature).
If the attribute has a set method, then this attribute is writable and there is a get method, then this attribute is readable.
4. Methods to define attribute properties: Object.defineProperty (object, attribute, descriptor object)
5. Get the descriptor object of the property: Object.getOwnPropertyDescriptor (object, property)
2. Example
1. According to the usage of for...in, we can write a method to simulate "inheritance":
<script type="text/javascript"> var child={}; var mother={ name:"zhangzhiying", lastAge:21, sex:"female" }; function extend(target,source){ for(var p in source){ target[p]=source[p]; } return target; } extend(child,mother); console.log(child); //<STRONG>Object {name: "zhangzhiying", lastAge: 21, sex: "female"}</STRONG> </script>2. Use for in to loop through the properties of the prototype object, and then assign values to our empty objects one by one, thus realizing "inheritance". This idea is very correct. Let’s modify the above example:
<script type="text/javascript"> var child={}; var mother={ name:"zhangzhiying", lastAge:21, <STRONG>set age(value){ this.lastAge=value; }, get age(){ return this.lastAge+1; },</STRONG> sex:"female" };<BR> <STRONG> mother.age=15;</STRONG> //There is a set method, which has writable function extend(target,source){ for(var p in source){ target[p]=source[p]; } return target; } extend(child,mother); console.log(child); //<STRONG>Object {name: "zhangzhiying", lastAge: 15, age: 16, sex: "female"}</STRONG> </script>You can see that a pair of sets are used in the code, get; where age is an accessor attribute.
The result of the run: a normal object that does not contain set, get.
Conclusion: The "inheritance" implemented by for in does not handle set and get , it converts the accessor attribute (age) into a static data attribute.
3. Set data attributes for mother object
<script type="text/javascript"> var child={}; var mother={ name:"zhangzhiying", lastAge:21, set age(value){ this.lastAge=value; }, get age(){ return this.lastAge+1; }, sex:"female" }; Object.defineProperty(mother,"lastAge",{writable:false}); //Set lastAge to not be writable mother.age=15; //Set invalid, because the value of lastAge remains unchanged, lastAge+1 remains unchanged, that is, the age remains unchanged function extend(target,source){ for(var p in source){ target[p]=source[p]; } return target; } extend(child,mother); console.log(child); //Object {name: "zhangzhiying", lastAge: 21, age: 22, sex: "female"} child.lastAge=12; //The result shows that lastAge changes, indicating that child.lastAge does not "inherit" the feature of mother.lastAge. Let's use getOwnPropertyDesriptor() method to confirm <BR> console.log(Object.getO<EM id=__mceDel></script> </EM>
Conclusion: To achieve inheritance, we still need to solve the problem -> "Inheritance" attribute characteristics.
4. Complete version
<script type="text/javascript"> var child={}; var mother={ name:"zhangzhiying", lastAge:21, set age(value){ this.lastAge=value; }, get age(){ return this.lastAge+1; }, sex:"female" }; Object.defineProperty(mother,"lastAge",{writable:false}); mother.age=15; <SPAN style="COLOR: #333399"><STRONG>function extend(target,source){ var names=Object.getOwnPropertyNames(source); //Get all property names for(var i=0;i<names.length;i++){ if(names[i] in target) continue; //If this property exists, skip (in prototype inheritance, if the attribute of the own property and the property of the prototype object are duplicated, retain the own property) var desc=Object.getOwnPropertyDescriptor(source,names[i]); //Get the descriptor object of the mother attribute (that is, the set of attribute characteristics, represented by the descriptor object in es5) Object.defineProperty(target,names[i],desc); //Get the mother's descriptor object to the child's attribute definition} return target; }</STRONG></SPAN> extend(child,mother); console.log(child); child.lastAge=12; console.log(Object.getOwnPropertyDescriptor(child,"lastAge")); console.log(child); </script>Final results:
You can clearly see the printing three times, child "inherited" to set and get, the lastAge value has not changed, and writable is also false.
Summary: I am reading the "Authoritative Guide to JavaScript" recently. I will summarize some experiences. If there are any mistakes, please correct me and learn and make progress together~
The above detailed explanation of JavaScript's inheritance using functions is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.