How many ways are there to customize objects in javascript? An introduction to five commonly used custom object methods in js

The content of this article is about how many ways to customize objects in JavaScript? The introduction of the five commonly used custom object methods in js has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Object: In JavaScript, an object is data with properties and methods.

There are seven ways to customize objects in JavaScript: direct creation, object initializer, constructor, prototype, mixed constructor/prototype, dynamic prototype, and factory. The first 5 types are more commonly used.

1. Direct creation method:

Creation syntax:

var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
       //函数体
}
…;
对象变量名. methodNameN = function([参数列表]){
       //函数体
}

    //1.直接先创建空对象，然后不断丰富
	var student = new Object();
	student.name = "小王";
	student.age = 20;
	student.doHomework=function(){
		console.log(this.name+"正在学习......");
	}
			
	student.doHomework();

2. Object initializer method:

Creation syntax:

var 对象变量名 = {
       property1 : value1,
       property2 : value2,
       …,
       propertyN : valueN,
       methodName1 : function([参数列表]){
              //函数体
       },
       …,
       methodNameN : function([参数列表]){
              //函数体
       }
}

    //2.初始化器：定义对象变量方法 
    var volunteer = {
	    name : "小王",
	    age : 20,

	    getName : function(){
                    //this不能省略
		    return this.name;
	    },
	    doHomework : function(name){
		    console.log(name+"正在学习");
	    }
    }//该定义方法中{}里面用,隔开
			
    console.log(volunteer.name+":"+volunteer.age);
    volunteer.doHomework(xiaoming);//调用方法

3. Prototype method:

After declaring a new function, the function (in JavaScript, a function is also an object) will have a prototype attribute, through which new attributes can be added to the object. and methods.

Creation syntax:

function 对象构造器( ){
}
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
      //函数体
}

        //3.prototype原型式
	function Boy(){
				
	}
	Boy.prototype.age=12;
	Boy.prototype.name="小明";
	Boy.prototype.introduction=function(){
		console.log(this.name+"的年龄为"+this.age);
	}
			
	var boy=new Boy();//创建对象
	boy.introduction();

4. Constructor method:

Creation syntax:

function 构造函数([参数列表]){
       this.属性 = 属性值;
       …
       this.属性N = 属性值N;
       this.函数1 = method1;
       …
       this.函数N = methodN;
}
function method1([参数列表]){
       //函数体
}
…
function methodN([参数列表]){
        //函数体
}

or

function  构造函数([参数列表]){
    this.属性 = 属性值;
       …
    this.属性N = 属性值N;
    this.函数1 = function([参数列表]){
              //函数体
    } ;
       …
    this.函数N = function([参数列表]){
              //函数体
    } ;
}

( Note: If the constructor method is used to create an object, this cannot be omitted, which is also the difference between ordinary functions)

        //4.构造函数式
	function Girl(age){
		this.name="小红";
		this.age= age;
		this.introduction=function(){
			console.log(this.name+"的年龄为"+this.age);
		}
	}
	
	var girl= new Girl(8);
	girl.introduction();

5. Mixed constructor/prototype method: (derived from a combination of methods 3 and 4) New method)

The constructor method is convenient for dynamically assigning values ​​​​to properties, but this method also defines the method in the constructor body, making the code more complicated; while the prototype method is not convenient for dynamically assigning values ​​​​to properties, but this method The properties and methods defined in this way achieve separation; so we learn from each other - constructors define properties and prototypes define methods.

Creation syntax:

function 对象构造器([参数列表]){
}
对象构造器.prototype.函数名 = function([参数列表]){
       //函数体
}

	function Kid(name,age){
		this.name=name;
		this.age= age;
	}
	Kid.prototype.introduction=function(){
		console.log(this.name+"的年纪为"+this.age);
	}
	
	var kid1=new Kid("小明",12);
	kid1.introduction();
	var kid2=new Kid("小王",12);
	kid2.introduction();

The above are 5 commonly used methods of customizing objects in JS.

Related recommendations:

A brief discussion on the use of JS to read custom attributes of DOM objects (tags)

How to customize the console object during the process

The above is the detailed content of How many ways are there to customize objects in javascript? An introduction to five commonly used custom object methods in js. For more information, please follow other related articles on the PHP Chinese website!