How to create an object in javascript

JS is an object-based language that can simulate object-oriented languages such as JAVA|C++ using object-oriented ideas.

•Process-oriented

◦Follow the steps to solve the problem

•Object-oriented

◦Focus on the objects (content and roles) needed to solve the problem, and then call relevant methods according to certain rules according to business logic.

Objects are divided into system objects and custom objects. We can create system objects by calling the system constructor, such as array|date, etc. Custom objects must be created by themselves and cannot be created using system functions.

javascript create object

1. Create directly

 //Create directly //JS create an object//1: Create an empty object var person1 = new Object(); //2: Add the required properties and methods of the object into person1.name ="ailer" ; console .log(person1.name); person1.gender = "male"; //3: Method added to this object|(function) person1. manager= function (){ console .log("Ailer is my English name" ); } //4: Call object method: object. method name(); person1.manager(); //Function|Method? When a function belongs to an object, the function belongs to the method under this object; the function is called through the method name; //Variable|Attribute? When a variable belongs to a certain object, the variable is the method under this object. Call variables by attribute names. //Increase person1.age ="6" ; //Change person1.name ="lemon" ; //Check console .log(person1.name); //Delete person1.age; console .log(person1.age); ==> undefined //Reference type, store address//Basic type: store value flag bit/* var arr1 = [1,2,3,4] var arr2 = [5, 6, 7,9]; var arr2 = arr1;//Arr2[0]=10;//Change the value in arr2, arr1 also changes alert(arr1[0]);//===>10 Reference type*/ var per2 = new Object(); per2.name = "Relia"; per2.age = "18"; per2.gender = "femal"; per2.hobby = "lemons"; //1: Access properties through. (point syntax) //2: Access the properties of the object through [] (square brackets); the square brackets must be attribute strings or variables that save the attribute string | Use square brackets var n = "name" //console.log(per2["name"]);//Double quotes console .log(per2[n]); for ( var property in per2) {// console.log(per2[property]); }

Although intuitive, the code is redundant when creating multiple objects

2. Create using functions (factory mode)

To solve the problem of multiple similar object declarations, we can use a method called factory pattern, which is to solve the problem of instantiating objects with a large number of duplications.

 //Define the constructor function createPerson ( name, age) {//Create a new empty object var person = new Object;//Add attribute|method person.name = name; person.age = age; person. manager = function() { console .log("ai" ); }//Return return person; } var per1 = createPerson( "aier", 12 ); console .log(per1.name); var per2 = createPerson( "lemon", 23 ); console .log(per2.age); console.log(per2 instanceof Object);//true console.log(per2 instanceof createPerson);//false//cannot distinguish the object type console.log(per2.manager==per1.manager);//false It can be obtained that per1 and per2 open and closed spaces are respectively

Excellent: Bulk creation of similar instances

Missing: The instance uses similar attributes, causing memory waste to be public and the type of the object cannot be distinguished.

3. Literal creation

Excellent: Simple and direct

Missing: Unable to build similar objects in batches

 //The object created by literals does not point to the instance, but to object //Create var per1 = { name:"Ailer", constructor:per1, age:12, gender:"female", hobby:"play", eat:function(){ console.log(this.name); } } per1.eat();//ailer per1.name="lemon"; per1.eat();//lemon console.log(typeof per1);//Object console.log(per1.constructor==Object);//true

4. new+constructor

 //Constructor creates an object, and its child objects are not recognized by instanceof. All created with new+obj//Objects are recognized, but some code area is still wasted; ==>Produce prototype creation//Create js object new+constructor//1: Create constructor|Usually, the first letter is capitalized function CreatePerson( name , age){ //2: Affix the attributes|method of the object on this pointer. When the function is called to create an object, this pointer points to this new object; //This this is added to this object this.name = name; this.age = age; /*this.speak = function(){ //Here this also points to the creation object console.log(this.name+"hello"); } } /* CreatePerson.prototype.gender = "20"; CreatePerson.prototype. ea = function(){ console .log(this.name+ "sfd" ); }*/// __proto__: is: the prototype attribute in the instance object, pointing to the prototype object corresponding to the corresponding constructor // [[prototype]] //Call var per1 = new CreatePerson( "ailer", "20" ); var per2 = new CreatePerson( "relia", "18" ); console .log(per1 instanceof CreatePerson); //==true console .log(per2 instanceof CreatePerson); //==>true console .log(per1.speak== per2.speak); //==false means that the system has opened up two different code areas, causing memory waste.

It is more convenient to create a literal, so it generates a constructor, a normal constructor (factory pattern), and the sub-object instanceof is not recognized and memory is wasted. Use new+ constructor, and the sub-object is recognized, but some code is still duplicated, memory is wasted, and prototype code is generated to solve it.

5. Prototype mode

 function CreateAnimal(name, age) { //1.2: Bind external parameters to the instance attribute this.name = name; this.age = age; } //1.3 Bind the same attribute on the prototype (prototype attribute, prototype method) CreateAnimal.prototype.gender = "male"; CreateAnimal.prototype.style = function() { console.log(this.name + "ailers"); }; //2: Call the constructor to create an object var cat1 = new CreateAnimal("xiaohua", "2"); var cat2 = new CreateAnimal("xiaohua", "2"); cat1.style(); console.log(cat1.style==cat2.style);//The method references the same address, put the attribute in the prototype object to save the address//instanceof can determine which object belongs to [function] //Constructor builder can also use it to determine which object belongs to [constructor] [constant] //The instance object saves a constructor attribute pointing to its constructor function//instanceof and constructor. The difference between console.log(cat1 instanceof CreateAnimal);//true console.log(cat1 instanceof Object);//true console.log(cat1 instanceof Object);//true console.log(cat1.constructor == CreateAnimal);//true console.log(cat1.constructor == Object); //==false //The prototype of the constructor also has a constructor attribute that refers to the constructor function console.log(CreateAnimal.prototype.constructor == CreateAnimal);//true //in determines whether the property exists in this object. This attribute is an instance attribute or prototype// alert("name" in cat1)//true// alert("gender" in cat1);//true //hasOwnProperty: to determine whether a certain property is an instance attribute or inherited from the prototype attribute if it is true, else does not exist| does not return false; console.log(cat1.hasOwnProperty("aaa"));//false The non-existent property returns false console.log(cat1.hasOwnProperty("name"));//true instance property console.log(cat1.hasOwnProperty("style"));//false The prototype property returns false //Travel the property to find the prototype property//Judge whether the parameter is the prototype property tool class console.log(isPrototype("gender", cat1));//true function isPrototype(proString, obj) { if(proString in obj) { if(!obj.hasOwnProperty(proString)) { return true; } else { return false; } } else { return false; } } /*function isProperty(object, property) {//Judge whether there is a property in the prototype return !object.hasOwnProperty(property) && (property in object);}*/

Dynamic Prototype Mode

 //Initialize the prototype function per(name, age, gender) { this.name = name; this.age = age; this.gender = gender; //Execute only once when initializing the prototype if(typeof this.sayName != "function") { Person.prototype.sayName = function() { alert(this.name); } } }

The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.