De combien de façons existe-t-il de personnaliser des objets en javascript ? Une introduction à cinq méthodes d'objet personnalisé couramment utilisées dans js

Le contenu de cet article porte sur combien de façons de personnaliser des objets en JavaScript ? L'introduction des cinq méthodes d'objets personnalisées couramment utilisées dans js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Objet : En JavaScript, un objet est une donnée avec des propriétés et des méthodes.

Il existe sept façons de personnaliser des objets en JavaScript : création directe, initialiseur d'objet, constructeur, prototype, constructeur/prototype mixte, prototype dynamique et usine. Les 5 premiers types sont plus couramment utilisés.

1. Méthode de création directe :

Syntaxe de création :

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. Méthode d'initialisation d'objet :

Syntaxe de création :

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. Méthode de prototype de prototype :

Après avoir déclaré une nouvelle fonction, la fonction (en JavaScript, les fonctions sont aussi des objets) aura un attribut de prototype. ajouter de nouvelles propriétés et méthodes à l'objet.

Syntaxe de création :

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. Méthode du constructeur :

Syntaxe de création :

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

ou

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

(Remarque : lorsque la méthode constructeur est utilisée pour créer des objets, cela ne peut pas être omis, ce qui est également la différence entre les fonctions ordinaires)

        //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();

Méthode mixte constructeur/prototype : (Une nouvelle méthode dérivée de la combinaison des méthodes 3 et 4)

La méthode constructeur facilite l'affectation dynamique des attributs, mais cette méthode définit également la méthode dans le corps du constructeur, ce qui rend le code plus compliqué et la méthode prototype est ; ce n'est pas pratique pour attribuer dynamiquement des valeurs aux propriétés, mais les propriétés et les méthodes définies de cette manière réalisent la séparation, par conséquent, le constructeur définit les propriétés et la méthode prototype définit les méthodes ;

Syntaxe de création :

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();

Voici 5 méthodes couramment utilisées pour personnaliser des objets en JS.

Recommandations associées :

Une brève discussion sur l'utilisation de JS pour lire les attributs personnalisés des objets DOM (tags)

JS Comment personnaliser l'objet console pendant le processus

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!