Object-oriented

• Encapsulation - the ability to store relevant information in objects
• Aggregation - The ability to store one object within another
• Inheritance - The ability of class properties and methods derived from another class (or classes)
• Polymorphism - The ability to write functions or methods that can run in multiple ways

Composition of objects
Objects consist of attributes, which can be either raw or reference values.If a feature stores a function, it is considered a method of an object, otherwise it is considered a property.

Declarations and instantiations

var oObject = new Object ( );
var oStringObject = new String( );

Reference to object
In ECMAscript, the physical representation of an object cannot be accessed, only the reference to the object can be accessed.Every time an object is created, it is a reference to the object stored in the variable, not the object itself.

Object Abolition
Whether there is a storage unit collector in ECMAscript means there is no need to specifically destroy objects to free memory.When there is no reference to an object anymore, the object is said to be abolished.
By setting all references to an object to null, you can force the object to be abolished.

var oObject = new Object;
oObject = null;

Early and late binding
Binding is the method of combining an object's interface with its instance.
Early binding, which defines its properties and methods before instantiating an object so that a compiler or interpreter can convert machine code ahead of time.
Late binding refers to the type of object that the compiler or interpreter does not know before running.With late binding, you don't have to check the type of the object; you just need to check if the object supports attributes and methods.
All variables in ECMAscript are late-bound, allowing a large number of object operations without penalties.

Local Object

ECMA-262 defines local objects as "objects provided by an ECMAScript implementation independent of the host environment".Simply put, local objects are classes defined by ECMA-262.

Array class

var aValue = new Array();
var aValue = new Array( 20 );
var aColors = new Array( );
aColors[0] = "red";
aColor[1] = "green";

The property length gets the size of the array, and the length property of the array is also the position of the last item plus 1, which means that the position of the array with three items is from 0 to 2, and the array can hold up to 4294967295 items.
The Array object overrides the toString() and valueOf() methods and returns a special string.

var aColors = [ "red", "green", "blue" ];
alert( aColors.toString( ) ); //outputs "red,green,blue"
alert( aColors.valueOf( ) ); //outputs "red,green,blue"

ECMAScript provides a join () method to connect string values, and the join () method has only one parameter, the string used between array items.

var aColors = [ "red", "green", "blue" ];
alert( aColors.join( "," ) ); //"red,green,blue"
alert( aColors.join( "-spring-" ) ); //"red-spring-green-spring-blue"

Each item in the array returned by the split() method is a string character.

var aColors = "green";
var aColors = sColors.split( " " );
alert( aColors.toString( ) ); //outputs "g,r,e,e,n"

Array objects have two methods that String classes have, concat () and slice () methods.
ECMAscript provides methods for arrays to become a stack structure, push() pop().

var stack = new Array;
stack [0] = "red";
stack [1] = "green";
stack [2] = "yellow";
alert( stack.toString( ) ); //outputs "red,green,yellow"
var vItem = stack.pop( );
alert( vItem ); //outputs "yellow"
alert( stack.toString( ) ); //outputs "red,green"

Array also provides a way to manipulate the first item, shift (), which deletes the first item in the array and returns it as a function value, and unshift (), which places one item in the first position of the array and moves the rest down.

var aColors = [ "red", "green", "blue" ];
var vItem = aColors.shift( );
alert( aColors.toString( ) ); //outputs "blue"
alert( vItem ); // outputs "red"
aColors.unshift( "black" );
alert( aColors.toString( ) ); //outputs "black,green,blue"

Arrays can also become a queue by calling the shift and push methods.
The sort () method sorts the array items in ascending or descending order based on their values. To do this sort, first call the toString() method, convert all values to strings, and then compare the array items according to the character code.

var aColors = [ "red", "green", "blue", "yellow" ];
aColors.sort( );
alert(aColors.toString( ) ); //outputs "blue green red yellow"

The reverse() method reverses the order of the array items

var aColors = [ "red", "green", "blue", "yellow" ];
aColors.reverse( );
alert(aColors.toString( ) ); //outputs "yellow blue green red"

By far, the most complex method is splice().This method is very simple and simply inserts the data item into the middle of the array.

1. Delete - You can delete any number of items from the array by declaring only two parameters, the position of the first item to be deleted and the number of items to be deleted, arr.splice.
   0,2) The first two items in the array arr will be deleted.
2. Replace without deleting - Declaring three parameters inserts the data item at the specified location, starting at 0 (the number of array items to be deleted) and the item to be inserted.Additionally, you can specify additional items to delete using the fourth, fifth, or more parameters.arr.splice(
   2,0, "red" and "green" insert "red" and "green" at position 2.
3. Replace and Delete - Declaring three parameters inserts the data item at the specified position, the starting position, the number of array items to delete, and the item to be inserted.arr.splice(
   2,1, "red", "green") deletes the item at position 2 in the array arr and inserts "red" and "green" at position 2.

Date class

Create a new Date object

var d = new Date( );
var d = new Date( 0 );  

Built-in Objects

Global Object

The most special object because it doesn't exist at all.

var pointer = Global; // error

In ECMAscript, there are no separate functions, and all functions must be methods of an object.*isNaN(), isFinite(), parseInt(), and parseFloat()* are all methods of Global s objects.
The eval() method is similar to the interpreter and accepts a parameter, the ECMAscript string executed by the drug.

eval( "alert( 'hi' )" );

Equivalent to

alert( "hi" );

When the interpreter finds an eval() call, it interprets the parameter as a true ECMAscript statement and inserts it where the function is located.This means that eval() calls internally referenced variables that can be defined outside of parameters:

var msg = "hello world";
eval( "alert( msg )" );

Similarly, an eval function can be used to call an internally defined function or variable, which can then be referenced in code outside the function:

eval( "function sayHi () { alert( 'hi' ); }" );
sayHi(); 

The function sayHi is defined internally in the eval call because it will be replaced with a real function, so sayHi () can still be called in the next line.

Host object

All non-local objects are host objects, which are provided by the host environment implemented by ECmAscript.All BOM and DOM objects are host objects.

Scope

Public, Protected, Private Scope
There is only one scope in ECMAscript - a common scope, so be careful when defining your own classes and objects, all properties and methods are common by default.Because of the lack of private scope, developers have made a convention to underline property names.

obj.__color__ = "red";

Static scope is not static

Static scope-defined properties and methods can be accessed from the same location at any time.In java, classes have static properties and methods that can be accessed without instantiating their objects.
Strictly speaking, ECMAscript does not have a static scope, but it can provide properties and methods to constructors.

function sayHi () {
alert( "hi" );
}
sayHi.alternate = function () {
alert( "hola" );
}
sayHi();
sayHi.alternate();

Keyword this

The keyword this always points to the object that invokes the method, for example:

var oCar = new Object;
oCar.color = "red";
oCar.showColor = function () {
alert( this.color );
}

If you do not reference a variable with this keyword, ECMAscript treats it as a local or global variable.The function then looks for a local or global variable named color and warns null if it cannot be found.

Factory Mode

var oCar = new Object;
oCar.color = "red";
oCar.doors = 4;
oCar.mpg = 23;
oCar.showColor = function () {
alert( this.color );
}

Contrast to factory mode

function createCar () {
var oTempCar = new Object;
oTempCar.color = "red";
oTempCar.doors = 4;
oTempCar.mpg = 23;
oTempCar.showColor = function () {
alert( this.color );
return oTempCar;
}
var oCar1 = createCar();
var oCar2 = createCar();

Calling this function will create new objects and give them all the necessary attributes, duplicating a previously described car object.
The function can also be modified:

function createCar (sColors, iDoors, iMpg) {
var oTempCar = new Object;
oTempCar.color = sColors;
oTempCar.doors = iDorrs;
oTempCar.mpg = iMpg;
oTempCar.showColor = function () {
alert( this.color );
return oTempCar;
}
var oCar1 = createCar( "red", 4, 23 );
var oCar2 = createCar( "blue", 3, 25 );

Creating a new function showColor every time the function createCar is called means that each object has its own version of showColor, and in fact, each object shares the same function.
You can avoid this problem by defining a method of an object outside a factory function and pointing at it through an attribute

function showColor () {
alert( this.color );
}
function createCar (sColors, iDoors, iMpg) {
var oTempCar = new Object;
oTempCar.color = sColors;
oTempCar.doors = iDorrs;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
return oTempCar;
}
var oCar1 = createCar( "red", 4, 23 );
var oCar2 = createCar( "blue", 3, 25 );
oCar1.showColor();//outputs "red"
oCar2.showColor();//outputs "blue"

Constructor Style

Creating a constructor is as easy as defining a factory function. The first step is to select the class name, which is the name of the constructor. By management, the first letter of the name is capitalized so that it is distinguished from the variable name, which is usually lowercase.

function Car ( sColor, iDoors, iMpg) {
this.color = sColors;
this.doors = iDorrs;
this.mpg = iMpg;
this.showColor = function () {
alert( this.color )
};
}

Constructors repeat the generation of functions, creating separate function versions for each object.Similar to factory functions, however, you can override the constructor with an external function, but this is meaningless in meaning, which is the advantage of the prototype approach.

Prototype Mode

This method uses the prototype attribute of the object, which can be regarded as the prototype for creating a new object. Here, an empty constructor is used to set the class name, and then all properties and methods are directly assigned to the prototype attribute:

function Car () {
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.showColor = function () {
alert( this.color );
};
var oCar1 = new Car();
var oCar2 = new Car();

First, the constructor Car is defined, with no code in it.The next few lines of code define the properties of the Car object by adding properties to the Car prototype property.When new Car() is called, all properties of the prototype are given to the object to be created by the chicken, meaning that all Car instances store pointers to the showColor() function.Semantically, all attributes appear to belong to one object, thus resolving two of the previous two problems.
In addition, using this method, you can use the instanceof operator to check the type of object a given variable points to.

alert( oCar1 instanceof Car ); //outputs "true"

With the prototype approach, the constructor cannot be passed the value of the parameter initialization property, because the color properties of car1 and car2 are equal to "red", the doors property is equal to 4, and the mpg property is equal to 23, which means that the default value of the property cannot be changed until the object is created.
The real problem occurs when attributes point to objects, not functions, and function sharing does not cause any problems, but objects are rarely shared by multiple instances.

function Car () {
}
Car.prototye.color = "red";
Car.prototye.doors = 4;
Car.prototye.mpg = 23;
Car.prototye.drivers = new Array( "Mike", "Sue" );
Car.prototye.showColor = function () {
alert( this.color );
};
var oCar1 = new Car();
var oCar2 = new Car();
oCar1.drivers.push( "Matt" );
alert( oCar1.drivers ); //outputs "Mike,Sue,Matt"
alert( oCar2.drivers ); //outputs "Mike,Sue,Matt"

Here, the attribute drivers is a pointer to an Array object that contains two names "Mike" and "Sue".
Since drivers are reference values, both instances of Car point to the same array, which means adding the value "Matt" to car1.driver can also be output in car2.drivers.

Mixed constructor/prototype approach

The function properties (methods) of the object are defined prototypically, even if all the non-function properties defining the object are constructed using the constructor.All functions are created only once, and each object has its own instance of object properties.

function Car ( sColor, iDoors, iMpg ) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array( "mike", "Sue" );
}
Car.prototype.showColor = function () {
alert( this.color );
}
var oCar1 = new Car( "red", 4, 23);
var oCar2 = new Car( "blue", 3, 25);
oCar1.drivers.push( "Matt" );
alert( oCar1.drivers ); //outputs "mike, Sue, Matt"
alert( oCar2.drivers ); //outputs "Mike Sue"

Dynamic Prototyping Method

Override Car class:

function Car ( sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.drivers = new Array ( "Mike", "Sue" );

if ( typeof Car._initialized == "undefined" ) {
Car.prototype.showColor = function () {
alert( this.color );
}
Car.initialized = true;
}
}

In short, the method uses a flag (_initialized) to determine whether to assign any method to the prototype, which is created only once until the typeof Car._initialized == "undefined" is checked.

Mixed Factory Mode

The goal is to create a pseudo constructor that returns only a new instance of another object.

function Car () {
var oTempCar = new Object;
oTempCar.color = "red";
oTempCar.doors = 4;
oTempCar.mpg = 23;
oTempCar.showColor = function () {
alert( this.color );
};
return oTempCar;
} 

In which way

Prototyping has the advantage of data sharing and memory saving; however, mixed constructors/prototyping are the most widely used.In addition, the dynamic prototyping method is also popular and functionally equivalent to the constructor/prototype method.

Modify Object/Create New Method

You can use the prototype property to define new methods for any existing class.

Number.prototype.toHexString = function () {
return this.toString(16);
}

If you want to add a new method to each local object in ECMAscript, you must define it on the prototype property of the Object object.

Object.prototype.showValue = function () {
alert( this.valueOf() );
};
var str = "hello";
var iNum = 25;
str.showValue(); //outputs "hello"
iNum.showValue(); //outputs "25"

Very late binding

var o = new Object;
Object.prototype.sayHi = function () {
alert( "hi" );
};
o.sayHi();