Maison > interface Web > js tutoriel > Résumé des méthodes courantes de création de classes en JavaScript

Résumé des méthodes courantes de création de classes en JavaScript

巴扎黑
Libérer: 2017-08-16 11:36:58
original
1142 Les gens l'ont consulté
Les exemples de cet article décrivent les méthodes courantes de création de classes dans JS. Partagez-le avec tout le monde pour référence, les détails sont les suivants :
Javascript est un langage basé sur les objets, et presque tout ce que vous rencontrez est un objet. Cependant, ce n'est pas un véritable langage de programmation orienté objet (POO) car il n'y a pas de classe dans sa syntaxe. (Cependant, ES6 a introduit le concept de classe comme modèle pour les objets. Les classes peuvent être définies via le mot-clé class. Premiers pas avec ES6 : http://es6.ruanyifeng.com/).
Mais dans le développement de projets, le développement orienté objet JS est souvent utilisé, ce qui nous oblige à utiliser JS pour créer des classes permettant d'instancier certains objets. Ensuite, nous présentons plusieurs façons de créer des classes en JS :
1 Méthode Factory :
//通过工厂方式创建对象,先定义一个工厂方法
function createObj(){
  var obj = new Object();
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
//调用工厂方法创建对象:
var obj1 = createObj();
//也可以用这种形式
function createObj(){
  var obj = {}; //这样生成对象
  obj.name="xxx";
  obj.say=function(){
    alert("我是xxx");
  }
  return obj;
}
var obj1 = createObj();
Copier après la connexion

Le problème avec cette méthode est qu'à chaque fois vous passez par la méthode factory. Pour créer un objet, le nom de l'attribut et la méthode de l'objet doivent être recréés, ce qui gaspille de la mémoire.
2. Méthode constructeur :
//创建一个构造器,构造函数首字母大写
function Obj(){
  this.name="xxx";
  this.say=function(){
    alert("我是xxx");
  };
}
//利用构造器,通过new关键字生成对象
var obj1=new Obj();
Copier après la connexion

C'est la méthode la plus basique, mais elle présente également les mêmes défauts que la méthode d'usine.
3. Méthode prototype :
//用空函数创建一个类
function Obj(){
}
//在类的原型链上添加属性和方法
Obj.prototype.name="xxx";
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1=new Obj();
Copier après la connexion

L'inconvénient de cette méthode est que lorsqu'il y a des attributs de référence, changer l'attribut d'un objet changera également l'attribut des autres objets. . Parce qu'un attribut de référence pointe vers le même endroit.
4. Méthode de combinaison prototype/constructeur
//用构造函数定义对象的非函数属性
function Obj(name){
  this.name=name;
  this.arr=new Array('a','b');
}
//用原型方式定义对象的方法
Obj.prototype.say=function(){
  alert("我是xxx");
}
//生成对象
var obj1 = new Obj('xxx');
Copier après la connexion

Il s'agit actuellement de la méthode la plus couramment utilisée pour créer des classes et des objets, encapsulant des méthodes et des propriétés de différentes manières.
5. Mode prototype dynamique
//动态原型方式和原型/构造混合方式的原理相似,唯一的区别就是赋予对象方法的位置
function Person(name, sex) {
  this.name = name;
  this.sex = sex;
  if (typeof this.say != "function") {
    Person.prototype.say = function () {
      alert(this.name);
    }
  }
}
var man =new Person ("凯撒", "男");
man.say();//凯撒
Copier après la connexion

Le mode prototype dynamique encapsule toutes les informations dans le constructeur, seulement si elles n'existent pas, elles seront ajoutées. le prototype. Ce code ne sera exécuté que lors du premier appel.
Il y a trois étapes pour instancier l'objet obj :
1. Créez l'objet obj :
obj=new Object();
Copier après la connexion

2. Pointez le __proto__ interne de obj vers le prototype de la fonction Obj qui le construit. . En même temps, obj. constructor===Obj.prototype.constructor, faisant ainsi pointer obj.constructor.prototype vers Obj.prototype (obj.constructor.prototype===A.prototype). obj.constructor.prototype et le _proto_ interne sont deux choses différentes. _proto_ est utilisé lors de l'instanciation d'un objet. obj n'a pas d'attribut de prototype, mais il a un __proto__ interne. Vous pouvez utiliser __proto__ pour obtenir les attributs de prototype sur la chaîne de prototypes. .et méthodes de prototypage.
3. Utilisez obj comme ceci pour appeler le constructeur Obj pour définir les membres (c'est-à-dire les propriétés de l'objet et les méthodes de l'objet) et les initialiser.
Lorsque ces trois étapes sont terminées, l'objet obj n'a aucun lien avec le constructeur Obj. À ce stade, même si le constructeur Obj ajoute des membres, cela n'affectera plus l'objet obj instancié.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal