JS Elevation Chapter 8 Part 2

inheritance

Inheritance is the most discussed topic in object-oriented OOP programming. Many OOP languages support two types of inheritance, interface inheritance and implementation inheritance.

8.3.1 Prototype Chain ** (emphasis) **

Each star constructor has a star prototype object, the prototype has a function that points back to the constructor, and the instance has an internal pointer to the prototype (instance.proto). If the stereotype is an instance of another type, that means that the stereotype has an internal pointer (prototype.proto) to another stereotype, and the corresponding stereotype has a pointer (prototype.constructor) to another constructor. This creates a chain of stereotypes between the instance and the stereotype

I prefer the explanation of MDN documents

When it comes to inheritance, JavaScript has only one structure: objects. Each instance of an object has a private property that points to its constructor’s prototype. The prototype object also has a prototype object of its own (PROTO), cascading up until an object’s prototype object is null. By definition, NULL has no prototype and is the last link in the prototype chain. In other words, _proto_ is gone until null. Proto_ as a pointer to the next node, then each node (prototype) has a constructor function pointing to the constructor and a _proto to the next node, and the constructor refers back to the node via prototype.)

MDN interpretation is interpreted by code

let person=function(name,age){ this.name=name; person.age=age; } let jackMa=new person("JackMa",55); if(jackMa._proto_===person.prototype){ console.log("True,jackMa._proto_ === person.prototype"); }else{ console.log("False,jack._proto_! ==person.prototype"); } /* Key: You'll be surprised to find that it returns true, Prototype {a:1, _proto_:person. Prototype {b:2, _proto_:Object. Prototype {c:3, _proto_:Object. _proto_:null; } } } console.log(jack.c); Prototype = person. Prototype = Object. Prototype = personCopy the code

Comb. 1, the first jackMa proto = = = > person. The prototype | person. The prototype. _proto = = = > Object. The prototype | Object. The prototype. The proto = = > null

2, the prototype nodes will play with themselves, namely person. Prototype. Constrctor = = > the person, the person. The prototype = = > person. The prototype

3. Function and Object play with each other, as shown in Figure 2

2. Archetypes and inheritance

The relationship between prototypes and instances can be determined in two ways. The first is to use the instanceof operator, which returns true if the corresponding constructor appears in an instance’s prototype chain, and false otherwise

MDN 1. Inheritance attributes

let f=function(){ this.a=1; this.b=2; } let o=new f(); f.prototype.b=3; f.prototype.c=4; /* Do not define the properties directly above, it will break the prototype chain */ console.log(f); // Return {b:3,c:4} console.log(o); // return f.prototype {a:1,b:2} console.log(O._proto_); // Returns {b:3,c:4} console.log(O._proto_._proto_); // Return Object.prototype console.log(O._proto_.proto_._proto_); // Return null console.log(f.b); // return undefined console.log(f.c); / / return 4Copy the code

MDN 2. Inheritance method

In JavaScript, there are no methods like in other languages, and any function can be added to an object as an object property. Inheritance of functions is no different from inheritance of other attributes, including “attribute shadowing” equivalent to method rewriting

	let o={
		a:2,
		m(){
			return this.a+1;
		}
	};
	console.log(o.m());	//返回3
	let p=Object.create(o);	//ES6之前的写法
	let p1=new o();			//ES6的写法
	p.a=4;
	console.log(p.m());	//返回5
Copy the code

MDN 3. Use prototypes in Javascript

function doSth(){} console.log(doSth.prototype); // Functions in JavaScript always have a default stereotype attribute var doSth=function(){}; console.log(doSth); // Return the object {constructor:f},constuctor points to f()Copy the code

MDN 4. Add attributes to the prototype object

function doSomthing(){} doSomthing.prototype.foo="bar"; doSomthing.prototype.tel=110; console.log(doSomthing.prototype); // Return the object doSth with two properties 1, foo, and 2, telCopy the code

MDN 5. Create instance with new

Function prototype (){} prototype =" prototype "; let doSthInstacne=new doSth(); doSthInstance.prototype.name="JackMa"; console.log(doSthInstance); /* doSth{name:"JackMa", _proto_:{constructor:f doSth(){} _proto_:Object}} */Copy the code

Class Class

8.4.1 Class Definition. Classes are actually syntactic sugar

Let person=class{};Copy the code

The MDN: class definition creates a new class with a given name based on stereotype inheritance

class Polygon{ constructor(height,width){ this.area=height*width; This. calcArea=function(){return height*width; }}} let p=new Ploygon(100,100); console.log(p.area); // return 10000 console.log(p.calcarea ()); // return 10000Copy the code

1. Think of classes as special functions

class Person{}; console.log(typeof(Person)); // return Function console.log(person._proto_ === function.prototype); // Return true console.log(person._proto_.constructor ===Function); / / return trueCopy the code

Remember the function in the second picture of the prototype chain in the last section, play by yourself, more than Object can play, and this Person class is actually the animal in the picture

There are even more fun ones

class person{}; let p=new person(); console.log(p instanceof person); Log (person instanceof Function) // Return true console.log(person instanceof Object); // return true /****function and obje interplay/console.log(function instanceof Object); // Return true console.log(Object instanceof Function); // Return true /** */ console.log(Array instanceof Function); // Return what? console.log(Array instanceof Object); // Return what?Copy the code

Classes can be instantiated. Functions can also be instantiated

let sum=function(a,b){ return a+b; } let s1=new sum(); The console. The log (s1) _proto_) constructor (10, 5)); / / return to 15Copy the code

Class inheritance. Extends is still the principle behind prototype chains

1. The extends keyword is used in class inheritance or class expressions to create a class that is a subclass of another class

class ploygon{ constructor(width,height){ this.width=width; this.height=height; This. name=" polygon "; }} square extends ploygon{constructor(length){super(length,length); This. name=" square "; } set area(){ return this.width*this.height; } get area(value){ this.area=value } } let s1=new square(5); console.log(s1.area); / / return to 25Copy the code

Abstract base classes to prevent instantiation

This is done through new.target

Class Polygon{constructor(){if(new.target==Polygon){console.log("Ploygon is a base class that cannot be instantiated!" ); Throw new Error('Polygon is a base class that cannot be instantiated '); } } } let p=new Polygon(); Polygon is a base class that cannot be instantiated at new polygonCopy the code

3. Inherit built-in types

The ES6 class provides a smooth mechanism for inheriting built-in reference types that developers can easily extend

class superArray extends Array{ shuffle(){ for(let i=this.length-1; i>0; i--){ let j=Math.floor(Math.random()*(i+1)); [this[i],this[j]]=[this[j],this[i]]; // let TMP =this[I]; this[i]=this[j]; this[j]=tmp; } } } supperArray s1=new superArray(); console.log(s1 instanceof superArray); // Return true s1.shuffle(); console.log(s1); / / a return here [1, 5, 3, 9, 7, 4, 2, 8, 6] s1. Shuffle (); console.log(s1); // Return [5, 9, 4, 6, 7, 8, 2, 1, 3]Copy the code