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

This article mainly introduces the JavaScript object-oriented example analysis, the article is very detailed, has a certain reference value, interested friends must read it!

JavaScript prototype chain

Every object has a prototype, which points to another object, and the other object has its own prototype, so the chain made up of the prototype is called the prototype chain.

The end of the prototype chain

If a prototype chain is useless, then when looking for attributes that do not exist on a prototype chain, it will always look for it, and there will be an endless loop. This is obviously not the case, so what is the end of the prototype chain?

Top-level prototype of Object

Look at the code ~

The / / obj literal creation method is similar to new Object () / / so the obj object is an instance of Object, that is, obj.__proto__ = = Object.prototypevar obj = {name: "fzb",}; / / what is the _ _ proto__ of obj.__proto__ or Oject.prototype? The answer is: nullconsole.log (obj.__proto__); / / [Object: null prototype] {} console.log (obj.__proto__.__proto__); / / null

The special features of [Object: null prototype] {}:

1. The object has a prototype attribute, but the prototype points to null, which is already the top-level prototype.

2. There are many other methods on this object, but they cannot be enumerated and cannot be seen.

Create a memory diagram of an Object object

Memory diagram of the above example

Object is the parent of all classes

The prototype object at the top of the prototype chain is the prototype object of Object.

Example:

Function Student (sno, name) {this.sno = sno; this.name = name;} const stu = new Student (201801, "fzb"); console.log (stu); / / Student {sno: 201801, name: 'fzb'} console.log (stu.__proto__); / / {} console.log (stu.__proto__.__proto__); / / [Object: null prototype] {} console.log (Student.__proto__) / / {} / * * the comments will be explained later * * Why not Student.__proto__ = [Object: null prototype] {} * because Student.__proto__ = Function.prototype * Function.prototype.__proto__ = Object.prototype = [Object: null prototype] {} * * the content of the notes will be explained later * * / console.log (Student.__proto__.__proto__) / / [Object: null prototype] {}

Memory diagram:

Prototype chain implements inheritance

Inheritance can reuse code, and subclasses can use the

Example:

Function Person () {this.name = "fzb";} Person.prototype.running = function () {console.log (this.name + "running ~");}; function Student (sno) {this.sno = sno;} Student.prototype = new Person (); / / after rewriting the entire prototype object, reconfigure constructorObject.defineProperty (Student.prototype, "constructor", {configurable: true, enumerable: false, writable: true, value: Student,}) Student.prototype.studying = function () {console.log (this.name + "learning");}; const stu = new Student (201801); stu.running (); / / fzb is running ~ stu.studying (); / / fzb is learning

Memory diagram:

Defect

1 > when printing subclass objects, some properties should have been printed, but they cannot be printed on the parent class.

2 > when multiple subclass objects perform certain operations, they will influence each other.

/ / add a little bit of code to the above example, function Person () {this.name = "fzb"; this.friends = []; / / add an attribute} const stu1 = new Student (201801); stu1.friends.push ("zzw"); const stu2 = new Student (201801); console.log (stu2.friends); / / ['zzw'] / / stu2 fetches the friends attribute of stu1, which is not allowed

3 > parameters cannot be passed. Some attributes exist in the parent class constructor. Initialization parameters cannot be passed to the parent class when the subclass is instantiated.

Borrow constructor to realize inheritance

Within the subclass constructor, call the constructor. Change the this point within the parent class constructor, and then the properties added by the parent class on the this will be on the object instantiated by the subclass.

Function Person (name) {this.name = name; this.friends = [];} Person.prototype.running = function () {console.log (this.name + "running ~");}; function Student (sno, name) {Person.call (this, name); / / add code this.sno = sno;} Student.prototype = new Person () / / after rewriting the entire prototype object, reconfigure constructorObject.defineProperty (Student.prototype, "constructor", {configurable: true, enumerable: false, writable: true, value: Student,}); Student.prototype.studying = function () {console.log (this.name + "learning");}; const stu1 = new Student (201801, "stu1"); stu1.friends.push ("zzw"); const stu2 = new Student (201802, "stu2") Console.log (stu2.friends); / / []

At this time, the three drawbacks of prototype chain inheritance are solved. But there are new defects.

Defect

1 > the parent class constructor was executed at least twice

2 > the prototype object of the subclass constructor is the instance object of the parent class, then the property on the object will be undefined

The above is all the content of the article "JavaScript object-oriented sample Analysis". Thank you for reading! Hope to share the content to help you, more related 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.