Summarize the JS Object Oriented constructor and js object constructor Based on JavaScript advanced programming.

Summarize the JS Object Oriented constructor and js object constructor Based on JavaScript advanced programming.
Introduction:

In ECMAScript, there are no independent functions. All functions must be methods of an object. WhileA function is also an object. Attributes of all objects can be dynamically defined after an object is created.,Early binding)It refers to defining its features and methods before instantiating an object, so that the compiler or interpreter can convert the machine code in advance. ECMAScript is not a strong language, so it does not support early binding.
Late binding)It indicates that the compiler or interpreter does not know the object type before running.
Late binding does not require you to check the object type. You only need to check whether the object supports features and methods. All variables in ECMAScript use the late binding method, which allows a large number of object operations without any penalty.

Object Construction Method: 1. The most common object construction method:

var car=new Object;car.color=”green”;car.show=function (){alert(this.color)};car.run();

2. Factory method (factory functions cannot create classes in ECMAScript, so they use function encapsulation to create objects with specific interfaces. The implementation method is very simple, that is, to create an object in the function, assign attributes and methods to the object, and then return the object .)

function generateObj(){var obj=new Object；obj.color=”green”;obj.show=function (){alert(this.color)};return obj; }var obj1=generateObj();obj1.show();var obj2=generateObj();var obj2.show();

All code is included in the generateObj () function, and the obj object is returned as the (obj) function value.
When this function is called, a new object will be created, and all necessary attributes will be assigned to it. A previously described obj object will be copied.
By using this method, you can easily create two versions of the obj object (obj1 and obj2) with identical attributes. However, each call, each call to the function generateObj (), creates a new function show (), which means that each object has its own show () method. In fact, each object shares the same function.

Optimized factory model:

function generateObj(color,fn){var obj=new Objectobj.color=color;obj.show=fn;return obj; }var show=function show(){alert(this.color)};var obj1=generateObj("red",show);obj1.show();

3. constructor Method

var show= function(){alert(this.color);};function GenerateObj(col){this.color = col;this.show =show;}var obj= new GenerateObj("red");obj.show();

The difference from the factory method lies in that the object needs to be created inside the constructor, but the this keyword is used.

3. Prototype

function GenerateObj(){}GenerateObj.prototype.color = "red";GenerateObj.prototype.show = function(){alert(this.color);};var obj = new GenerateObj();obj.show();

This method uses the prototype attribute of the object to view it as the prototype on which the object is created. Use an empty constructor to set the class name. All attributes and methods are directly assigned to the prototype attribute. However, this prototype method has a fatal disadvantage. When the attribute points to an object, objects will also be shared.

Function GenerateObj () {} GenerateObj. prototype. colors = new Array ("red", "black"); var obj1 = new GenerateObj (); var obj2 = new GenerateObj (); obj1.colors. push ("yellow"); alert (obj1.colors) // display "red, black, yellow" alert (obj2.colors) // display "red, black, yellow"

4. Hybrid (combination of constructor and prototype)

function GenerateObj(col){this.color = col;}GenerateObj.prototype.show = function(){alert(this.color);};var obj = new GenerateObj("red");obj.show();

That is, you can use constructors to define all non-function attributes of an object. You can use a prototype to define the function attributes (methods) of an object ).

5. Dynamic prototype (recommended in combination with prototype)

function Car(col){this.color = col;if (typeof Car._initialized == "undefined"){Car.prototype.show = function(){alert(this.color);};Car._initialized = true;}}var car = new Car("red");

In fact, the basic idea of the dynamic prototype method is the same as that of the mixed constructor/prototype method. That is, the non-function attribute is defined in the constructor, while the function attribute is defined by the prototype attribute. The only difference is that the location of the object method is assigned, and the attributes and methods are visually encapsulated. This method uses the sign (_ initialized) to determine whether any method has been granted to the prototype.

Perhaps the best solution:

functon CreatePerson(name,sex,birthday) {   this.name =name;   this.sex = sex;   this.birthday = birthday; } CreatePerson.prototype.sayHi = function () {   alert("Hi ! I am "+this.name); } var person1 = new CreatePerson('zs','boy','2001-02-03'); var person2 = new CreatePerson('ls','boy','2001-02-04'); person1.sayHi(); //outputs "Hi ! I am zs" person2.sayHi(); //outputs "Hi ! I am ls"

Generally, an object or class has more than one method, and multiple methods need to be used together.

CreatePerson.prototype={   sayHi:function()   {     alert("Hi ! I am "+this.name);   },   walk:function()   {     alert("walk,walk");   },   …… }