How JavaScript Implements the inherited

  This article mainly describes how JavaScript implements inheritance, and friends who need it can refer to

Recently the most online saw a person interview Taobao experience, and then found himself a lot of not very clear place, so I write some articles to deepen their understanding of some problems. The   article mentions a question: How does JavaScript implement inheritance?   Below I will explain some of the methods and examples found on the Internet, to deepen their impression.   We know that function in JavaScript is omnipotent, and can be used for class definitions in addition to the function definitions used.   JavaScript inheritance, it is also a bit strange to say, unlike C + + and some object-oriented languages, he does not have public,private and other access control modifiers, and there is no implement or other specific notation to illustrate the implementation of inheritance.   Inheritance of JavaScript classes can refer to this example below.     Code as follows: <script type= "Text/javascript" >  function person () {   //attribute       This. Gender = "female";     this. Age = 18;     this. Words = "Silence";    /methods     this.shouting = function () {        alert ("Happy!") Method of the parent class ");    }}//Inheritance function programmer () {    this.base = person;} Programmer.prototype = new Person; Add a new method to the Subclass Programmer.prototype.typeCode = function () {    alert ("I'm knocking the code!") It workers, very unhappy. Subclass of the Method "); //Invoke Sample function SayHello () {    var a = new programmer ();     alert (a.gender);//Call the parent class'sProperties     a.shouting (); Method of calling Parent class     A.typecode (); Methods to invoke subclasses}         SayHello (); </script>     The first example is to declare a person class that contains properties and methods, and then declares a programmer class with a base attribute, which is not required. However, it is necessary to write for the specification and later to find the classes inherited by the object, then copy the person class for the programmer prototype object (prototype), and then implement the inheritance of the class.   Simulate some of the principles of class and inheritance in JavaScript   in object-oriented languages, we use classes to create a custom object. While everything in JavaScript is an object, what is the way to create a custom object?   This requires the introduction of another concept-prototype (prototype), we can simply think of prototype as a template, the newly created custom object is a copy of this template (prototype) (actually not a copy but a link, But the link is invisible and gives people the impression that it is a copy.   Let's take a look at an example of creating a custom object through prototype:   code is as follows://constructor   function person (name, sex) {      THIS.N AME = name;       this.sex = sex;  }  //define person's prototype, attributes in the prototype can be custom object referenced   Person.prototype = {      getname:function () {&NB Sp         return this.name;      },       getsex:function () {          return this.Sex      }  }     Here we call the function person the constructor, which is the function that creates the custom object. As you can see, JavaScript simulates the functionality of a class by constructing functions and prototypes.   The following is an example to illustrate the specific work that JavaScript does by creating a custom object:     Copy code code as follows: var Zhang = new person ("Zhangsan", "Mans"); Console.log (Zhang.getname ()); "Zhangsan" var chun = new Person ("Chunhua", "Woman"); Console.log (Chun.getname ()); "Chunhua"     Contemporary code var Zhang = when the new person ("Zhangsan", "the Man") executes, there are actually several things internally:   Create a blank object (new Object ()). Copy attributes in Person.prototype (key-value pairs) into this empty object (as we mentioned earlier, the internal implementation is not a copy but a hidden link). Pass this object through the This keyword into the constructor and execute the constructor. Assign this object to the variable Zhang. All work done. To prove that the prototype template is not copied to an instantiated object, but rather a link, look at the following code:     Code as follows: function person (name, sex) {    this.name = name;     this.sex = sex; } Person.prototype.age = 20; var Zhang = new person ("Zhangsan", "Mans"); Console.log (Zhang.age); 20//Overwrite The age attribute in prototype zhang.age = 19; Console.log (Zhang.age); Delete Zhang.age; After the instance property age is deleted, this property value is then fetched from the prototype Console.log (Zhang.age);     In the above example, if he is merely copying it, the object will not exist after the age attribute is deleted, but the age attribute in the example can also be output or overwrite the previous value. This means that we simply delete the attribute with the same name in the subclass, and the age attribute in the parent class still exists in the object through an invisible link.   How do I implement simple inheritance in JavaScript?   The following example creates an employee class employee that inherits all the attributes from the prototype prototype from person.     Code as follows: function Employee (name, sex, EmployeeID) {    this.name = name;     This.sex = SE X     This.employeeid = EmployeeID; ///The prototype of employee points to an instance of person//Because instances of person can invoke methods in the person prototype, the instance of employee can also invoke all attributes in the person prototype. Employee.prototype = new Person (); Employee.prototype.getEmployeeID = function () {    return this.employeeid;}; var Zhang = new Employee ("Zhangsan", "Man", "1234"); Console.log (Zhang.getname ()); "Zhangsan   Well, these are some of the specific procedures for JavaScript to implement inheritance, and ways to implement inheritance."   Of course, the inheritance mechanism in JavaScript is simply simulated, in some object-oriented languages, rough and flawed, but in general, this still doesn't and will reduce the enthusiasm of the front-end developers.