JS object-oriented, prototype, inherit

ECMAScript has two development modes: 1. Functional (procedural), 2. object-oriented (OOP). An object-oriented language has a flag, which is the concept of a class, through which any number of objects with the same properties and methods can be Created. however, ECMAScript does not have a class concept, so its objects are also different from those in class-based Languages.
var box = new Object ();
Box.name = ' Lee ';
Box.age = 100;
Box.run = function ()
{
Return this.name + this.age + ' running ... '; //this represents the object under the current scope, that is, the object instantiated by the new object (), which is placed under a scope. such as Box.run () {}.
}
Alert (box.run ());

Alert (this.name); //the this here represents window

Factory mode solves the problem of repeated instantiation, but the object is not recognized
function CreateObject (name,age)
{
var obj = new Object (); Creating objects
Obj.name = name; Add Property
Obj.age = age;
Obj.run = function () {
Return this.name + this.age + ' running ... ';
};
Return obj; Return object reference
}

var box1 = CreateObject (' Lee ', 100);
var box2 = CreateObject (' Jack ', 200);
Alert (box1.run ());
Alert (box2.run ());

Alert (typeof box1);
Alert (typeof box2);

Constructors Create objects
function Box (name,age) { //create an object, all constructors ' objects are actually object
THIS.name = name; //add a property
This.age = age;
This.run = function () { //add a method
Return this.name + this.age + ' running ... ';
};
};
function Desk (name,age) { //create an object, all constructors ' objects are actually object
THIS.name = name; //add a property
This.age = age;
This.run = function () { //add a method
Return this.name + this.age + ' running ... ';
};
};
1. The constructor does not have a new object, but it is automatically var obj = new object in the background
2.this is the equivalent of obj
3. The constructor does not need to return an object reference, it is returned automatically by the background

1. The constructor is also a function, but the first letter of the function name is capitalized
2. You must have a new constructor name (), new box (), and the first letter of the box is Capitalized.
3. You must use the new Operator.
var box1 = new Box (' Lee ', 100);
var box2 = new Box (' Jack ', 200);
var box3 = new Desk (' KKK ', 500);
Alert (box1.run ());
Alert (box2.run ());
Alert (box1 instanceof Box);
Alert (box2 instanceof Box);
Alert (box3 instanceof Desk);

Prototype
function Box () {} //constructor functions There is nothing in the body, if there is, it is called instance property, instance method
Box.prototype.name = ' Lee '; //prototype Properties
Box.prototype.age = 100; //prototype Properties
Box.prototype.run = function () { //prototype method
Return this.name + this.age + ' running ... ';
};
var box1 = new Box ();
var box2 = new Box ();
Alert (box1.name);
Alert (box1.run ());

If it is an instance method, different instantiation, their method address is not the same, is Unique.
If it is a prototype method, then their addresses are Shared.
Alert (box1.run = = box2.run); //address sharing, Because the Run method of both Box1 and Box2 belong to Box's prototype method
Alert (box1.prototype); //this property is an object that cannot access the
Alert (box1.__proto__); //this property is a pointer to the prototype prototype object, IE browser does not support this property, printing does not come out
Alert (box1.constructor); //construct property, You can get the constructor itself. The function is to be positioned by the prototype pointer and then get the constructor itself. is actually the object instance corresponding to the role of the prototype Object.

Judging an object instance (object Reference) is not pointing to the prototype object, basically, as long as the instantiation, he automatically points to.
Alert (Box.prototype.isPrototypeOf (box1));

var obj = new Object ();
Alert (Object.prototype.isPrototypeOf (obj));

Execution flow of prototype mode
1. First find the property or method in the constructor instance, and if so, return immediately;
2. If not in the constructor instance, go to its prototype object, and if so, Return.
Box1.name = ' Jack '; //instance attribute, and there is no rewriting of the prototype attribute, the nearest principle
Alert (box1.name);
Alert (box2.name); //instance properties are not shared, so Box2 cannot access instance properties, only prototype properties
Delete box1.name; //remove attributes from an instance
Delete Box.prototype.name; //delete A property in a prototype
Box.prototype.name = ' KK '; //overwrite attributes in the prototype
Alert (box1.name);

Box1.name = ' KAC '
Alert (box1.hasownproperty (' Name ')); //determine If the specified attribute exists in the instance
Alert (' name ' in box1); returns true regardless of whether the instance attribute or the prototype attribute exists

Judge that only the attributes exist in the prototype
function Isproperty (object,property) {
Return!object.hasownproperty (property) && (object)
//}
Alert (isproperty (box1, ' name '));

function Box () {};
var box = new Box ();
Alert (box.prototype); //use object instance cannot access to prototype
Alert (box.__proto__); //use object instance to access prototype pointer
Alert (box.prototype); //use constructor name (object Name) to access prototype

Create a prototype object in a literal way
function Box () {};
Here {} is the object, object,new object is the equivalent of {}
Box.prototype = {
constructor:box, //force point to Box
Name: ' Lee ',
age:100,
Run:function () {
Return this.name + this.age + ' running ... ';
}
};
A prototype object created using the literal method causes constructor to point to object instead of box
The literal way to create a prototype object constructor is pointing to object because of box.prototype={};
This writing is actually creating a new Object. And each time a function is created, it is created with its prototype,
This object will also automatically get the constructor Property. so, the new Object's constructor rewrite Box's original constructor
So it points to the new object, and the new object does not specify a constructor, so it points to Object.

Overridden a prototype object
Box.prototype = {
age:200; //this will not retain any information about the previous Prototype. Cut off the previous relationship between the original prototype object and the constructor object Instance.
}
var box = new Box ();
Alert (box.constructor = = box);
Alert (box.age);

Array sorting
var box = [5,1,6,9,3,5,8,1];
Alert (box.sort ());

See if sort is a method in the array prototype object
Alert (Array.prototype.sort);
See if substring is a method in a string prototype object
Alert (String.prototype.substring);

Feature extensions for built-in reference types
String.prototype.addstring = function () {
Return this + ', was added! ‘;
};
var box = ' Lee ';
Alert (box.addstring ());

Prototype disadvantage
function Box () {}
box.prototype={
constructor:box,
Name: ' Lee ',
age:100,
family:[' gege ', ' Jiejie ', ' Meimei ',
Run:function () {
Return this.name + this.age + ' running ... '
}
};
var box1 = new Box ();
Alert (box1.family);
Box1.family.push (' Didi '); //the reference type After the first instance has been modified, keeping the share
Alert (box1.family);
var box2 = new Box ();
Alert (box2.family); //shared The prototype of the reference type after Box1 was added

To solve the problem of constructing parameters and sharing, we can combine the constructor + prototype pattern
function Box (name,age) {
THIS.name = name;
This.age = age;
this.family = [' gege ', ' Jiejie ', ' Meimei '];
}
Box.prototype = {
constructor:box,
Run:function () {
Return this.name + this.age + ' running ... ';
}
};
var box1 = new Box (' Kee ', 100);
Alert (box1.family);
Box1.family.push (' Didi ');
Alert (box1.family);
var box2 = new Box (' Lee ', 200);
Alert (box2.family); //reference type does not use prototypes, so no sharing

Dynamic prototype mode, You can encapsulate the prototype into a constructor Function. Better encapsulation
function Box (name,age) {
THIS.name = name;
This.age = age;
this.family = [' gege ', ' Jiejie ', ' Meimei '];

If (typeof this.run! = ' function ') { //to determine if this.run exists
Alert (' KS ')
Box.prototype.run = function () {
Return this.name + this.age + ' running ... ';
};
Alert (' JS ');
}
}
Initialization of the prototype, as long as the first initialization is possible, there is no need to initialize each time the constructor is instantiated
var box1 = new Box (' Kee ', 100);
var box2 = new Box (' Lee ', 200);

Parasitic constructor Factory mode + constructor
function Box (name,age) {
var obj = new Object ();
Obj.name = name;
Obj.age = age;
Obj.run = function () {
Return this.name + this.age + ' running ... ';
};
Return obj;
}
var box1 = new Box (' Lee ', 100);
Alert (box1.run ());
var box2 = new Box (' Jack ', 200);
Alert (box2.run ());

//secure Constructor
function Box (name,age) {
var obj = new Object ();
Obj.name = name;
Obj.age = age;
Obj.run = function () {
return this.name + this.age + ' running ... ';
};
Return obj;
}
var box1 = Box (' Lee ', +);
Alert (box1.run ());
var box2 = Box (' Jack ', 200);
Alert (box2.run ());

//inheritance, implemented through the prototype chain
function Box () {//inherited function is called supertype (parent class, base Class)
THIS.name = ' Lee ' ;
}
Box.prototype.name = ' Jack ';
function Desk () {//inherited functions are called subtypes (subclasses, derived classes)
This.age = +;
}
function Table () {
this.level = ' aaaaaa ';
}
//inherit from a prototype chain, an object instance after a Hyper-type instantiation, an assignment to a prototype property of a type
//new box () gives the information in the box construct and the information in the prototype to desk
//desk's prototype, which gets the information in Box's Construction + prototype
Desk.prototype = new box (); //inherit through the prototype chain
Table.prototype = new Desk ();
var desk = new Desk ();
var table = new Table ();
Alert (desk.age);
Alert (desk.name); //nearest principle, in instance, returns, does not go to prototype search
Alert (table.level);
//subtypes are subordinate to themselves or to other Hyper-type
Alert (desk instanceof desk);
Alert (desk instanceof Box);
Alert (box instanceof Desk);

Impersonating inheritance with objects
function Box (name,age) {
THIS.name = name;
This.age = age;
this.family = [' gege ', ' Jiejie ', ' Meimei ']; //reference type, which is not shared in the construction
}
Box.prototype.family = ' jiating ';
function Desk (name,age) {
Box.call (this,name,age) //object impersonating, can only inherit the information in the construction
}
var desk = new Desk (' Lee ', 100);
Alert (desk.name);
Alert (desk.family);

The prototype chain + borrows the Constructor's pattern, this pattern is called the combinatorial inheritance, solves the reuse question
function Box (name,age) {
THIS.name = name;
This.age = age;
this.family = [' gege ', ' Jiejie ', ' Meimei '];
}
Box.prototype.run = function () {
Return this.name + this.age + ' running ... ';
}
The method in the constructor, placed in the constructor, each time the instantiation, will allocate a memory address, waste space. preferably in a prototype, guaranteed to be instantiated multiple times with only one address
function Desk (name,age) {
Box.call (this,name,age) //object posing
}
Desk.prototype = new Box (); //prototype Chain Inheritance
var desk = new Desk (' Lee ', 100);
Alert (desk.run ());

//prototype inheritance: This inheritance uses prototypes to create new objects based on existing objects, and does not create custom Types.
//temporary Transit function
function obj (o) {//o represents an object that will be passed into the
function F () {} The //f construct is a temporary new object used to store objects passed through .
F.prototype = o; //assign an O object instance to the prototype object of the F construct
return new F (); //finally returns an object instance that gets passed over to the object
}
//f.prototype = 0 is actually equivalent to Desk.prototype = new Box ();
//this is the literal way of declaring, equivalent to var box = new Box ();
var box = {
name: ' Lee ',
age:100,
family:[' gege ', ' Jiejie ', ' Meimei ']
};
//box1 is equal to new F ();
var box1 = obj (box);
//alert (box1.name);
Alert (box1.family);
Box1.family.push (' Didi ');
Alert (box1.family);
var box2 = obj (box);
Alert (box2.family); The properties of the //reference type are shared

//parasitic inheritance = prototype + Factory mode
Function obj (o) {
function F () {}
F.prototype = o;
return new F ();
}
//parasitic function
function Create (o) {
var f = obj (o);
F.run = function () {
return this.name + ' method ';
}
Return f;
}
var box = {
name: ' Lee ',
age:100,
family:[' gege ', ' Jiejie ', ' Meimei ']
};
var box1 = Create (box);
Alert (box1.run ());

Parasitic combination inheritance
function obj (o) {
function F () {}
F.prototype = o;
return new F ();
}
Parasitic functions
Function Create (box,desk) {
var f = obj (box.prototype);
F.constructor = desk; //adjust prototype construction pointers
Desk.prototype = f;
}
function Box (name,age) {
THIS.name = name;
This.age = age;
}
Box.prototype.run = function () {
Return this.name + this.age + ' ssssss ';
}
function Desk (name,age) {
Box.call (this,name,age); //object Impersonation
}
Inheritance through parasitic combination inheritance
Create (box,desk); //this is used instead of Desk.prototype = new Box ();
var desk = new Desk (' Lee ', 100);
Alert (desk.run ());
Alert (desk.constructor);

JS object-oriented, prototype, inherit