JS create object, inherit prototype, ES6 class inheritance

Object-oriented programming:
two basic concepts of objects in Java:
1. Class: Class is the template of the object, for example leader this is general term leader, not specifically who.
2: Instance: an instance is an object created from a class, and many instances can be created according to class leader: Liyi,yingjiangyong and so on. Each instance represents a specific leader, and they
All belong to the leader type.
There are no classes and instances in previous versions of ES6, and object-oriented programming is done through prototype prototype.
Difference: There are no classes and objects in JS, all objects are instances, but the prototype of one object points to another object.
//Create the first method of the object:. __proto__
var unical={
Name: ' Liyi ',
Age:31,
Hello:function () {
Alert (' Hello, ' +this.name+ '! ');
}
}
var qinbb={
Name: ' Qinbb ',
Age:24
}
qinbb.__proto__=unical;
qinbb.name;//' QINBB '
Qinbb.age;//24
Qinbb.hello ();//hello, qinbb!
//prototype chain: QINBB--->unical.prototype--->object.prototype--->null
//QINBB the prototype to unical, so you can inherit the method inside the unical (. Hello ()), first in the QINBB, found in the prototype inside to find。
var leader={
Name: ' Lipei ',
Age:30,
Run:function () {
Alert (' My leader is ' +this.name);
}
}
Qinbb.__proto__=leader;
qinbb.name;//' QINBB '
Qinbb.age;//24
Qinbb.run ();//my leader is QINBB
Qinbb.hello ();
//prototype chain: QINBB--->leader.prototype--->object.prototype--->null
//Error: Qinbb.hello () is not a method because the prototype is pointed to leader, and the previous unical will no longer inherit

/* The second method of creating the object: Objece.create ()
* Best not to use. __ptoto__ point to the prototype object, the lower version of the browser will not support (ie does not),
The use of objece.create () to pass in a prototype object under the *ES6 version is a way to create a prototype inheritance.
*/
//Create the second method of the object Objece.create ()
var leader={
Name: ' Lipei ',
Age:30,
Run:function () {
Alert (' My leader is ' +this.name);
}
}
//Can pass multiple parameters, but the order should correspond.
function Createleader (name,age) {
//Create a new object based on the leader prototype:
var s = object.create (Leader);
//Initialize new objects:
S.name = name;
S.age = age;
return s;
}
var qinbb=createleader (' Qinbb ', 24);
var qinbb=createleader (, ' qinbb ');//If the name and age do not correspond
The prototype of Qinbb.__proto__===leader;//true QINBB is that leader created Objece.create () through the QINBB () in the constructor Createleader
/*
* Constructors Create objects
*/
///Create the third method of the object: constructor (define a constructor first, make sure to call the function with the keyword new and return an object)
function Leader (name) {
This.name=name;
This.hello=function () {
Alert (this.name+ ' is a leader! ');
}
}
var liyi= new Leader (' Liyi ');
var qinbb = new Leader (' Qinbb ');
Liyi.hello===qinbb.hello;//output: false Although the same function is called, but not the same this is explained in method four
Object.getprototypeof (Liyi);//Output Object {}
Liyi.constructor===leader.prototype.constructor;//true
Liyi.__proto__===leader.prototype;//true
Leader.prototype.constructor;
/ * Output as follows
function Leader (name) {
This.name=name;
this.hello=function () {
alert (this.name+ ' is a leader! ');
}
}*/
leader.prototype.constructor===leader//Output: True
/*liyi's prototype chain: Liyi-->leader.prototype-->object.prototype-->null
*qinbb's prototype chain: Qinbb-->leader.prototype-->object.prototype-->null
*/
//The fourth method of creating an object: In method Three, the function is not called without new.
function Extendleader (props) {
This.name=props.name | | ' Anonymous ';
This.grade=props.grade | | ' Ordinary employees ';
}
/*run actually only need to share the same function, which can save a lot of memory,
just move the run function to Liyi, QINBB the common prototype of these objects */
Extendleader.prototype.run=function () {
Alert (this.name+ ' 's level is: ' +this.grade);
}
function Createleader (props) {
return new Extendleader (props);
}
var liyi=createleader ({name: ' Liyi ', Grade: ' manager '});
var qinbb=createleader ({name: ' QINBB '});
liyi.run===qinbb.run;//Output True

/*
* Prototype inheritance, Java inside is extends can inherit class, JS to inherit, ES6 version before the more complex.
* The intermediate function needs to be constructed, and the prototype of the intermediate function is pointed to the object that needs to be inherited, and then the prototype of the inherited object points to the intermediate function.
*/
//Constructor Create object
function Leader (props) {
This.name=props.name;
This.grade=props.grade | | ' Ordinary employees ';
}
function Extendleader (props) {
Leader.call (This,props);
This.skill=props.skill | | ' No ';
return new Extendleader (props); Don't use new when you create a new object
}
function F () {}//constructs an intermediate function
f.prototype=leader.prototype;//the prototype of the intermediate function f to the Leader prototype.
//Again the prototype of Extendleader points to the prototype of the intermediate function f, which is leader's prototype, at this time the Extendleader constructor is leader
Extendleader.prototype=new F ();
//Fix the Extendleader constructor to Extendleader, so the Extendleader prototype IS leader prototype, the constructor is itself
Extendleader.prototype.constructor=extendleader;
var liyi=new extendleader ({name: ' Liyi ', Skill: ' Internet technology is proficient '});
liyi.name;//output ' Liyi '
liyi.grade;//output: ' Ordinary employees '
liyi.skill;//output: ' Internet technology is proficient '

class Inheritance
/*
This method is only possible with *CLASS:ES6 and ES6.
The advent of *class simplifies prototype inheritance a lot, and class is designed to make it easier to define classes.
*extends to inherit objects, intermediate prototypes and so on can be removed, you can inherit the extension class
*/
create an object with class
Class leader{
Constructor (name) {//constructor constructor Function
This.name=name;
}
Hello () {//Functions defined on the prototype
Alert (' Hello, ' +this.name+ '! ');
}
}
var liyi= new Leader (' Liyi ');
liyi.name;//output ' Liyi '
Liyi.hello ();//Output ' Hello, liyi! '
Inheriting extensions with extends
Class Extendleader extends leader{
Constructor (Name,grade,skill) {//If you do not extend the leader constructor, you can save constructor this step
Super (name);
This.grade=grade;
This.skill=skill;
}
Run () {
Console.log (this.name+ ' position: ' +this.grade+ ' skills: ' +this.skill ');
}
}
var liyi=new extendleader (' Liyi ', ' research manager ', ' proficiency in various technologies ');
liyi.name;//' Liyi '
liyi.grade;//' development manager '
liyi.skill;//' mastery of various technologies '
liyi.hello;//' Hello, liyi! '
Liyi.run ();//' Liyi Position: Development Manager Skills: Proficiency in various technologies '

JS create object, inherit prototype, ES6 class inheritance