Recently, I read online about someone’s experience during an interview with Taobao, and then I found that there were many things that I was not clear about, so I wrote some articles to deepen my understanding of some issues.
A question mentioned in the article is: How does JavaScript implement inheritance?
Below I will explain some methods and examples I found online to deepen my impression.
We know that function in JavaScript is versatile. In addition to being used for function definitions, it can also be used for class definitions.
Inheritance in JavaScript is a bit strange. Unlike C++ and some object-oriented languages, it does not have access control modifications such as public and private, and there is no implement or other specific symbols to indicate inheritance.
Regarding the inheritance of JavaScript classes, you can refer to the following example.
Copy the code code as follows:
<script type="text/javascript">
function Person() {
//properties
this.Gender = "female";
this.Age = 18;
this.Words = "Silence";
// method
this.shouting = function() {
alert("Happy! Method of parent class");
}
}
//Inherit
functionProgrammer() {
this.base = Person;
}
Programmer.prototype = new Person;
//Add new methods to subclasses
Programmer.prototype.typeCode = function() {
alert("I am a coder! IT migrant worker, very unhappy. Subclass method");
}
// Call example
function sayHello() {
var a = new Programmer();
alert(a.Gender); // Call the properties of the parent class
a.shouting(); // Call the method of the parent class
a.typeCode(); // Call the method of the subclass
}
sayHello();
</script>
In the above example, a person class is first declared, which contains some attributes and methods, and then a programmer class is declared, which has a base attribute. This attribute is not necessary, but for the sake of specifications and for finding objects in the future All inherited classes need to be written, and then the person class is copied to the programmer's prototype object (prototype); thus class inheritance is realized.
Simulate some principles of classes and inheritance in JavaScript
In object-oriented languages, we use classes to create a custom object. However, everything in JavaScript is an object, so how to create a custom object?
This requires the introduction of another concept - prototype. We can simply regard prototype as a template. The newly created custom objects are all copies of this template (prototype) (actually not a copy but a link. It’s just that this kind of link is invisible and gives people the impression that it is a copy).
Let's look at an example of creating a custom object via prototype:
Copy the code code as follows:
//Constructor
function Person(name, sex) {
this.name = name;
this.sex = sex;
}
//Define the prototype of Person. The properties in the prototype can be referenced by custom objects.
Person.prototype = {
getName: function() {
return this.name;
},
getSex: function() {
return this.sex;
}
}
Here we call the function Person a constructor, which is a function that creates a custom object. It can be seen that JavaScript simulates the functions of classes through constructors and prototypes.
The following is an example to explain in detail the specific work done by JavaScript when creating a custom object:
Copy the code code as follows:
var zhang = new Person("ZhangSan", "man");
console.log(zhang.getName()); // "ZhangSan"
var chun = new Person("ChunHua", "woman");
console.log(chun.getName()); // "ChunHua"
When the code var zhang = new Person("ZhangSan", "man") is executed, the following things are actually done internally:
Create a blank object (new Object()).
Copy the attributes (key-value pairs) in Person.prototype to this empty object (as we mentioned earlier, the internal implementation is not a copy but a hidden link).
Pass this object to the constructor through the this keyword and execute the constructor.
Assign this object to the variable zhang.
All work done.
In order to prove that the prototype template is not copied into the instantiated object, but is a way of linking, please see the following code:
Copy the code code as follows:
function Person(name, sex) {
this.name = name;
this.sex = sex;
}
Person.prototype.age = 20;
var zhang = new Person("ZhangSan", "man");
console.log(zhang.age); // 20
// Override the age attribute in prototype
zhang.age = 19;
console.log(zhang.age); // 19
delete zhang.age;
// After deleting the instance attribute age, this attribute value is obtained from prototype again
console.log(zhang.age); // 20
In the above example, if it is only obtained by copying, after deleting the age attribute, the object will not exist. However, the age attribute in the example can still be output, or the previous value will be overwritten. , indicating that we only deleted 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 to implement simple inheritance in JavaScript?
The following example creates an employee class Employee that inherits all properties from the prototype prototype from Person.
Copy the code code as follows:
function Employee(name, sex, employeeID) {
this.name = name;
this.sex = sex;
this.employeeID = employeeID;
}
// Point the prototype of Employee to an instance of Person
// Because instances of Person can call methods in the Person prototype, instances of Employee can also call all properties 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
Okay, the above are some specific processes and methods for implementing inheritance in JavaScript.
Of course, to summarize, the inheritance mechanism in JavaScript is only based on simulation. Compared with some object-oriented languages, it is rough and has some flaws. However, in general, this still does not reduce the efficiency of front-end developers. enthusiasm.