Shulou(Shulou.com)06/01 Report--

Editor to share with you what the inheritance and prototype chain of JavaScript is, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

I. Preface

The inheritance and prototype chain of JavaScript are relatively rare and difficult to understand in the process of learning the front end, so here is a record of everything I know and know.

Constructor 2.1 instance members and static members of the constructor

The constructor consists of both instance members and static members, where instance members are members added within the function through the this keyword; they can only be accessed through instantiated objects through instantiated objects; and static members are members added to the function itself and can only be accessed through the constructor.

/ / create a constructor let Father = function (name,age) {/ / instance member this.name = name; this.age = age; this.method = "I am an instance member";} / / static member Father.like = "mother"; / / verify whether the instance object can be accessed directly by the constructor console.log (Father.method); / / undefinedconsole.log (Father.like) / / mother / / instantiate an object let father = new Father ("Xiao Wang", 27); / / verify whether a static object can be accessed by an instantiated object console.log (father.name); / / Xiao Wang console.log (father.age); / / 27console.log (father.like); / / the process of undefined2.2 instantiating an object

An instantiated object can be implemented through the constructor through the new keyword, so what happens during the specific instantiation? It can be roughly divided into the following steps:

(1) create an empty object son {}

(2) prepare prototype chain connection for son son.__proto__ = Father.prototype

(3) rebind this so that the this of the constructor points to the new object Father.call (this)

(4) assign son.name to the attribute of the new object

(5) return this return this, and the new object will have the methods and properties of the constructor.

A small question: are all methods for instantiating objects shared?

There are two methods to construct a function, the first is defined directly inside the function, and the second is the method added through the prototype

/ / the method directly defined inside the function let Father = function () {this.read = function () {console.log ("I am the internally defined read method!") ;}} / / the method added through the prototype chain Father.prototype.look = function () {console.log ("I am the look method defined through the prototype chain!") ;} / / instantiate the object to verify let father1 = new Father (); let father2 = new Father (); father1.read (); / / I am the internally defined read method! Father2.read (); / / I am the internally defined read method! Console.log (father1.read = father2.read); / / falsefather1.look (); / / I am the look method defined through the prototype chain! Father2.look (); / / I am the look method defined through the prototype chain! Console.log (father1.look = = father2.look); / true

You can find that the method directly defined within the function allocates a new memory space to the method each time a new object is instantiated, while the method added through the prototype shares a space.

A small question: are the properties of all instantiated objects shared?

There is no memory space problem, and the value is the same when judging.

Let Father = function (name) {this.name = name;} let father1 = new Father ("Xiao Wang"); let father2 = new Father ("Xiao Hong"); console.log (father1.name = father2.name); / / falselet father1 = new Father ("Xiao Wang"); let father2 = new Father ("Xiao Wang"); console.log (father1.name = = father2.name); / / true

So we can summarize the basic rules for defining the constructor, that is, the public property is defined into the constructor, and the public method is put on the prototype object.

III. Prototype 3.1 what is a prototype

Father.prototype is a prototype, it is an object, can also be called a prototype object.

3.2 what is the purpose of the prototype

The role of prototypes is to share methods.

We can share methods through Father.prototype.method without responding to opening up space storage methods.

3.3 where does the this in the prototype point?

The this in the prototype points to the instance.

IV. Prototype chain

The prototype chain itself feels that it is particularly difficult for beginners or some front-end vegetable chickens (such as myself) to understand. In order to make the following parts easier to understand, here are the following points to remember:

_ _ proto__ is a property of every object, and prototype is a unique method of each function.

The _ _ proto__ property of each object points to the prototype of its own constructor

The constructor property always points to the constructor that creates the current object.

Function.__proto__ = Function.prototype

Object.prototype.__proto__ = = null, which is the end of the prototype chain.

4.1 what is a prototype chain

The process of linking the prototype to the prototype layer by layer is the prototype chain.

4.2 Application of prototype chain

Objects can use the properties and methods of the prototype prototype object because the object has a _ _ proto__ stereotype. Every object has a _ _ proto__ stereotype.

Let Father = function (name) {this.name = name;} let father = new Father ("Lao Wang"); console.log (father.__proto__ = Father.prototype); / / true / / verify the second 4.3 prototype chain diagram in the above statement

Combined with the first few points written in the first few points, it should not be a problem to understand the above picture, and the circled part of the picture is the appalling prototype chain.

Function Star (name) {this.name = name; / / (1) first see whether there is a dance method on the obj object, and if so, execute the method on the object this.dance = function () {console.log (this.name +'1') }} / / (2) if there is no dance method, look for the dance method on the constructor prototype object prototype. Star.prototype.dance = function () {console.log (this.name +'2');}; / / (3) if there is no more dance method, go to the Object prototype object prototype to find the dance method. Object.prototype.dance = function () {console.log (this.name +'3');}; / / (4) if there is no more, an error will be reported. Let obj = new Star ('Xiao Hong'); obj.dance ()

(1) first look at whether there is a dance method on the obj object, and if so, execute the method on the object.

(2) if there is no dance method, look for the dance method on the constructor prototype object prototype.

(3) if there is no more dance method, go to the Object prototype object prototype to find the dance method.

(4) if there is no more, an error will be reported.

A small problem: add methods to the prototype that you need to pay attention to

There are two ways to add, the first is the above writing, directly through the constructor. Prototype. The method name is added; the second is to redefine the prototype of the constructor, but in this case the original constructor constructor is lost, so be sure to connect back, as shown in the following example:

Function Star (name) {this.name = name;} Star.prototype = {dance:function () {console.log ("redefine prototype");}} Star.prototype.constructor = Star

In addition, built-in classes like Array and String cannot be handled this way.

V. inheritance

To make a long story short, first of all, we need to make clear what inheritance needs to inherit. In the previous article, we mentioned the basic rules for defining the constructor, that is, * * the public property is defined in the constructor, and the public method is put on the prototype object. * * what we need to inherit is nothing more than these two. The inheritance of public attributes can be defined by this through call () or apply (), while public methods can be handled by assignment of prototype objects, so it is easy to think of the following methods:

/ / define a parent class function Father (name) {this.name = name;} Father.prototype.dance = function () {console.log ('I am dancing');}; / define a subclass function Son (name, age) {Father.call (this, name); this.age = age;} / / connect Son.prototype = Father.prototype by assignment / / add the method Son.prototype.sing = function () {console.log ('I am singing');}; let son = new Son ('Xiao Hong', 100) for the subclass; / / the parent class is also affected by console.log (Father.prototype) / / {dance: class, sing: class, constructor: subclass}

Obviously, the above method is not appropriate when we only want to modify the methods in the subclass; so we can try to new a new parent class with the following code:

Function Father (name) {this.name = name;} Father.prototype.dance = function () {console.log ('I am dancing');}; function Son (name, age) {Father.call (this, name); this.age = age;} Son.prototype = new Father (); Son.prototype.sing = function () {console.log ('I am singing');}; let son = new Son ('Xiao Hong', 100) Console.log (Father.prototype) / / {dance: sugar, constructor: sugar} VI. Class grammar sugar

For programmers who have known about object-oriented programming before, the above writing about inheritance is a bit difficult to accept, so a syntax candy has been added in es6 to write inheritance more conveniently and conveniently. Here we will go directly to the code.

Class Father {constructor (name) {this.name = name;} dance () {console.log ("I am" + this.name + ", I am" + this.age + "this year," + "I am dancing");}} class Son extends Father {constructor (name, age) {super (name) This.age = age;} sing () {console.log ("I am" + this.name + ", I am" + this.age + "this year," + "I am singing");}} let obj = new Son ('Xiao Hong', 19); obj.sing (); obj.dance ()

Analyze the above code, first of all, a class (constructor) is still divided into two parts, namely, public properties and public methods, constructor () stores the public properties of the constructor, followed by public methods, the extends keyword indicates which class is inherited, and super () is to take out the corresponding public properties in the parent class, so that the code can be much more regular.

The above is all the content of the article "what is the inheritance and prototype chain of JavaScript". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.