JavaScript uses function to implement the _javascript technique of inheritance detailed

I. Knowledge Reserves:

1, the Enumeration property name function:

(1) for...in: You can iterate through all enumerable properties in the object (including its own and inherited properties) in the loop body

(2) Object.keys (): Returns an array (enumerable of its own properties)

(3) Object.getownpropertynames (): All its own properties

3. Attributes: Data properties and accessor properties

(1) Data properties: Writable (writable) enumerable (enumerable) configurable (configurable) value (value)

The data attribute has only one simple value;

(2) Accessor properties: Write (set) read (get) enumerable (enumerable) configurable (configurable)

Accessor properties are not writable (that is, there is no writable attribute).

Property has a set method, which is writable and has a get method, and that property is readable.

4. Methods for defining attribute attributes: Object.defineproperty (objects, attributes, descriptor objects)

5, get the attribute Descriptor object: Object.getownpropertydescriptor (object, property)

Second, the example

1, according to the use of for...in, we can write simulation "inheritance" method:

<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 To loop through the properties of the prototype object, and then assign a value to our empty objects, thus implementing the "inheritance." This is a very good idea, so let's change the example below:

<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>    //has a set method with writable 
  function extend (target,source) {for 
  (Var p in source) {　　　　c16/> 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 set,get is used in the code, where age is an accessor property.

The result of a run: a generic object that does not contain set,get.

Conclusion: The "inheritance" of the for in implementation does not deal with set and get, which converts accessor attributes (age) to a static data property.

3. Set data properties for Mother objects

<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 the lastage into an 
  mother.age=15;                       The setting is not valid because the value of the lastage is unchanged, so the lastage+1 is invariant, that is, the age invariant 
  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 results show Lastage changes, indicating that Child.lastage does not have "inherited" to mother.lastage characteristics, we then use the Getownpropertydesriptor () method to confirm <BR> Console.log (Object.geto

<em id=__mcedel></script> 
</EM> 

Conclusion: To implement inheritance, we also need to solve the problem of->"inheritance" attribute attribute.

4. Perfect version

<script type= "Text/javascript" > var child={}; 
    var mother={name: "Zhangzhiying", lastage:21, set age (value) {this.lastage=value; 
    The 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);  Gets all property names for (Var i=0;i<names.length;i++) {if (Names[i] in target) continue;  If this attribute exists, it is skipped (in prototype inheritance, if its own attribute is the same as the property of the prototype object and retains its own attribute) var desc=object.getownpropertydescriptor (Source,names[i]);  Gets the descriptor object for the Mother property (that is, the collection of attribute attributes, ES5 is represented by a descriptor object) Object.defineproperty (TARGET,NAMES[I],DESC); 
  Assign the mother 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>

The final result:

Can obviously see three times of printing, the child "inherit" to set and Get,lastage values did not change, writable is false.

Summary: recently read the "JavaScript Authority Guide", summed up a little experience, there are errors welcome corrections, learning and progress together ~

The above JavaScript use function to realize the inheritance of the details are small parts to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.