An introduction to the analysis of js prototype objects and prototype chains (with code)

This article brings you an introduction to the knowledge of js prototypes and prototype chains (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Declare a constructor first

function People(name,age){
        this.name = name;
        this.age = age;
    }

Write the class method in the constructor prototype object, and the subclass can no longer inherit the method by calling the parent class constructor (attributes can still be inherited)

// 给People的原型添加方法
People.prototype.speak = function(){
        console.log("我是"+this.name);
    }
// 创建子类继承People
function Man(name,age,huzi){
        People.call(this,name,age);
        this.huzi = huzi;
    }

(The properties and methods of People and Man can be output and called to view, the test code will not be displayed in the code)

How to let Man inherit the methods of People at this time?

Man.prototype = People.prototype;
    Man.prototype.smoke = function(){
        console.log("抽烟");
    }

However, this is not right! You cannot directly point the prototype of the subclass to the prototype of the parent class. This will cause the two constructors to share a prototype, in which the methods of the parent class and subclass objects are accessible, and the correct The situation should be that the subclass can access the methods of the parent class, but the parent class cannot access the methods of the subclass

The prototype of a js object is also an object, so the js prototype also has a prototype.

When accessing an object method, if it exists in the object, it will be accessed directly. If it does not exist, it will be searched in the prototype of the object. If it exists, it will be accessed. If it does not exist, it will be searched in the prototype of the prototype. If it does not exist, it will continue to search online until it finds the Object location.

Object is a class (constructor), the prototype of the object of this class has no prototype

The prototype of the js object, and the chain structure composed of the prototype of the js prototype is called the js prototype chain

If a subclass wants to inherit the methods of the parent class, it needs to set the prototype object's prototype (__proto__) of the subclass's constructor to the prototype of the parent class's constructor

Then it is written like this:

Man.prototype.__proto__ = People.prototype;

It's okay to write it this way, but the official way of writing it is a better standard (it's not wrong to write it this way)

// Object.create用于指定原型创建一个对象(空对象)
    Man.prototype = Object.create(People.prototype);
    Man.prototype.smoke = function(){
        console.log("抽烟");
    }

When a subclass inherits a parent class, in addition to extending new methods, it can also rewrite For existing methods of the parent class, when the overridden method is called using a subclass object, the subclass's own method will be executed

Man.prototype.speak = function(){
        console.log("我是男性");
    }

Related recommendations:

JS Core Series: Shallow Talking about prototype objects and prototype chains

Scope chain and prototype chain in js and prototype inheritance

js Detailed explanation of prototype and prototype chain

Learn javascript object-oriented Understanding javascript prototype and prototype chain_javascript skills

The above is the detailed content of An introduction to the analysis of js prototype objects and prototype chains (with code). For more information, please follow other related articles on the PHP Chinese website!