A summary of JS object-oriented construction object based on JavaScript Advanced program Design

Introduction:

In ECMAScript, there is no independent function, and all functions must be methods of an object. and a function is an object. The properties of all objects can be defined dynamically after the object is created , and early binding (early binding) refers to the attributes and methods that define the object before it is instantiated, so that the compiler or interpreter can convert the machine code ahead of time. ECMAScript is not a strongly typed language, so early binding is not supported.
late binding (late binding) refers to the type of object that the compiler or interpreter does not know before it runs.
With late binding, there is no need to check the object's type, just check to see if the object supports attributes and methods. All variables in the ECMAScript are late-bound, allowing a large number of object operations to be performed without penalty.

How to construct objects: 1, the most common way to construct objects:

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

2, factory method (Factory function because the class cannot be created in ECMAScript, the function encapsulates the creation of the object with a specific interface.) The implementation method is very simple, that is, to create an object within the function, give the object properties and methods, and then return the object. ）

function generateObj(){var obj=newObject；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 contained in the Generateobj () function and returns the value of the Obj object as the (obj) function.
When this function is called, a new object is created, with all the necessary properties assigned to it, and a copy of the Obj object described earlier.
Using this method, you can easily create two versions of the Obj object (obj1 and Obj2), which have exactly the same properties. But 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 mode:

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

3. How to construct a function

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

The difference from the factory approach is that you need to create an object inside the constructor and use the This keyword instead.

3. Prototype mode

function GenerateObj(){"red"function(){alert(this.color);};varnew GenerateObj();obj.show();

This approach takes advantage of the object's prototype property and can be seen as a prototype on which to create a new object. Use an empty constructor to set the class name, and then all the properties and methods are given directly to the prototype property but this prototype has a fatal disadvantage, and when the attribute points to an object, the object is also shared

function GenerateObj(){newArray("red","black");varnew GenerateObj();varnew GenerateObj();obj1.colors.push("yellow"//显示"red,black,yellow"//显示"red,black,yellow"

4. Mixed type (combination of constructors and prototypes)

function GenerateObj(col){thisfunction(){alert(this.color);};varnew GenerateObj("red");obj.show();

That is, the constructor defines all non-function properties of an object, and is defined in a prototype manner, the function properties (methods) of the object.

5, dynamic prototype (combined with prototype recommended)

function Car(col){this.color = col;if (typeof"undefined"function(){alert(thistrue;}}varnew Car("red");

In fact, the basic idea of the dynamic prototyping method is the same as the mixed constructor/prototype, that is, the non-function attribute is defined within the constructor, and the function attribute is defined by the prototype attribute. The only difference is the location of the object method, which is visually encapsulated in the properties and methods. The method uses flags (_initialized) to determine whether any method has been assigned 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); }varPerson1 =NewCreateperson (' ZS ',' Boy ',' 2001-02-03 ');varPerson2 =NewCreateperson (' ls ',' Boy ',' 2001-02-04 '); Person1.sayhi ();//outputs "Hi! I am ZS "Person2.sayhi ();//outputs "Hi! I am LS "

In general, an object or class is more than one method and requires multiple methods to work with it.

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

A summary of JS object-oriented construction object based on JavaScript Advanced program Design