Inheritance and prototype in Javascript

Javascript is a prototype-based object-oriented language and has no class concept. Let's talk about prototype first.

Each object has an original type. A prototype is an object. Modifying the prototype of an object affects all objects derived from this object. However, if you only modify this object, the prototype of the created instance is not affected. Because each object and prototype have a prototype, the prototype of the object points to the parent prototype of the object, and the parent prototype points to the parent prototype of the parent prototype, the prototype link is called the prototype chain. The end of this chain is usually the default object prototype.

The prototype reads from the prototype chain and writes to itself..

<SCRIPT type = "text/JavaScript"> function load () {function obj1 () {// object obj1} function obj2 () {// object obj2} obj2.prototype = new obj1 (); // value obj1 to the prototype object of obj2. prototype. foo = function () {alert ("object"); // The object Foo function pops up object} testobj = new obj2 (); // The obj2 value is assigned to the testobj. foo (); // execute the foo function obj1.prototype of the test object. foo = function () {alert ("obj1"); // re-assign a value to the prototype function Foo of obj1} testobj. foo (); // run the foo function of the test object here} window. onload = load; </SCRIPT>

Running result:

Result Analysis:

We first created the objects obj1 and obj2, assigned the prototype of obj1 to obj2, added the function Foo to the prototype of the object to display the 'object', and assigned the obj2 value to the testobj object, execute Foo in testobj. We find that the actual execution is foo in object. Why? This is because when reading the object, the object can be read from testobj --- obj2 --- obj1 --- object until the object can be read to foo. Therefore, the read is read from the prototype chain from the shortest to the depth. Then, we modified the prototype of obj1 so that it also has the foo function and re-executed the foo of testobj. We found that the actually executed Foo of obj1, it can be seen that when writing Foo to obj1, it is directly written to its own prototype.

Inheritance is simple replication

<SCRIPT type = "text/JavaScript"> function load () {var father = new object (); // create the parent object var son = new object (); // create the sub-object father. name = function () {alert ('Dad '); // pop up Dad} son. name = function () {alert ('son'); // The son} son is displayed. name = Father. name; // assign the name of the parent object to the sub-object father. name = function () {alert ('new Dad '); // overwrite the parent object name as new dad} father. name (); // The name son of the parent object is displayed. name (); // name of the sub-object popped up} window. onload = load; // Add the load function to load the page. </SCRIPT>

Running result:

Result Analysis:

We create the parent object father and sub-object son, define the father name as "dad", the Son name as "son", and then assign the father name to son, the father name is "new dad ". The execution of Father's name is displayed as "new dad", which is expected. The execution of son's name is "dad" instead of "new dad". We can see the inherited attributes, it only copies the attributes of the parent object, not references.

Two simple examples are used to illustrate the prototype and inheritance in Javascript. For its deeper prototype chain and constructor, due to limited learning, we will continue to discuss it after further study.