Understanding inheritance in JS-JS Tutorial-php.cn

Understanding inheritance in JS

jacklove

Release： 2018-06-15 15:43:07

Original

2718 people have browsed it

Prototypal inheritance of js

The prototype chain is the main method to implement js inheritance. Its principle is to use prototypes to let one reference type inherit the properties and methods of another reference type. If we make a prototype object equal to an instance, then the prototype object at this time will contain a pointer to another prototype. If another prototype is equal to an instance of an object, this is the basic concept of the prototype chain. .

The following is a simple example

    var Parent = function(){
        this.name = &#39;parent&#39; ;
    } ;
    Parent.prototype.getName = function(){
        return this.name ;
    } ;
    Parent.prototype.obj = {a : 1} ;    var Child = function(){
        this.name = &#39;child&#39; ;
    } ;
    Child.prototype = new Parent() ;    var parent = new Parent() ;    var child = new Child() ;
    console.log(parent.getName()) ; //parent
    console.log(child.getName()) ; //child

Copy after login

The above code defines two types: parent and child. Each type has a property and method. The main difference between them is that child inherits parent. Inheritance is achieved by creating an instance of parent and assigning this instance to child.prototype. The essence of implementation is to rewrite the prototype. Chain object, replacing it with a new instance. Directly assign the object of the parent class to the prototype of the subclass constructor, so that the object of the subclass can access the properties in the prototype of the parent class and the parent class constructor.
We can use the instanceof operator to judge. Use this operator to test the instance and the constructor that appears in the prototype chain, and return true

Borrowing the constructor

What is Constructor

The JavaScript constructor does not exist as a specific method of the class; when any ordinary function is used to create a class of objects, it is called a constructor, or constructor. For a function to serve as a true constructor, it needs to meet the following conditions:

1. Set the properties of the new object (this) inside the function, usually by adding properties and methods.

2. The constructor can contain a return statement (not recommended), but the return value must be this, or other non-object type value.

Regarding the JavaScript constructor, there is one area that is easily confused, and that is the constructor attribute of the prototype. In JavaScript, each function has a default prototype object attribute prototype, which contains two member attributes by default: constructor and
proto. The details of the prototype will not be discussed in this article. What we are concerned about now is the constructor attribute.

According to the habitual object-oriented thinking, we say that the constructor is equivalent to the definition of "class", so we may think that the constructor attribute is the actual constructor of the class. When the new expression creates an object Sometimes, the constructor will be called directly to initialize the object, which is a big mistake. The actual process of new expression execution has been introduced above (four steps), of which the third step is used to initialize the object. The initialization function called is the "class function" itself, not the constructor

    function CO(){
    this.p = “I’m in constructed object”;    this.alertP = function(){
        alert(this.p);
        }
    }    var o2 = new CO();

Copy after login

Borrowing constructor inheritance

The basic idea is very simple, that is, calling the supertype constructor inside the subtype constructor. Because functions are nothing but objects that execute code in a specific environment, constructors can also be executed on newly created objects by using the apply() and call() methods.

   function superType(){
       this.colors = ["red","blue","green"];
   }   function subtype(){
       superType.call(this);
   }   var instance1 = new subtype();
   instance1.colors.push("black");
   alert(instance1.colors);//"red,blue,green,black"
   var instance2 = new subtype();
   alert(instance2.colors);//"red,blue,green"

Copy after login

By using call(), we actually call the supertype() constructor in the context of the newly created subtype instance. In this way, the supertype constructor will be executed on the new subtype object, so All object initialization code defined in the supertype() function will be executed on the subtype object.

   function superType(name){
       this.name = name;
   }   function subtype(){
       superType.call(this,"Marry");       this.age = 29;
   }   var instance = new subtype();
   alert(instance.name);//"Marry"
   alert(instance2.age);//"29"

Copy after login

This is a great advantage of the constructor. You can pass parameters to the supertype constructor in the subtype constructor. .

This article explains the understanding of JS inheritance. For more related content, please pay attention to the php Chinese website.

Related recommendations:

JS decryption, online JS decryption and decryption

How to optimize JS code

Local object of JavaScript

The above is the detailed content of Understanding inheritance in JS. For more information, please follow other related articles on the PHP Chinese website!