Maison >interface Web >js tutoriel >Introduction au modèle de constructeur dans les modèles de conception JavaScript

Introduction au modèle de constructeur dans les modèles de conception JavaScript

不言original: 2018-07-03 15:17:461386parcourir

Cet article présente principalement le modèle de constructeur des modèles de conception JavaScript et analyse le concept, la fonction, la définition et l'utilisation du modèle de constructeur sous forme d'exemples. Les amis dans le besoin peuvent se référer à ce qui suit

Le. des exemples de cet article sont expliqués. Introduction du modèle de constructeur des modèles de conception JavaScript. Partagez-le avec tout le monde pour votre référence, comme suit :

1. Concept de modèle de constructeur

Le constructeur est utilisé pour créer des objets d'un type spécifique - déclare non seulement l'objet utilisé, mais également le constructeur. Peut accepter des paramètres pour définir les valeurs des membres de l'objet lors de la première création de l'objet. Vous pouvez personnaliser votre propre constructeur et y déclarer des propriétés ou des méthodes d'objets de type personnalisé.

En JavaScript, les constructeurs sont généralement utilisés pour implémenter des instances. JavaScript n'a pas le concept de classes, mais il existe des constructeurs spéciaux. Le constructeur personnalisé est appelé via le mot-clé new À l'intérieur du constructeur, le mot-clé this fait référence à l'objet nouvellement créé.

2. Les fonctions et précautions du modèle de constructeur

Fonctions du modèle :

1 Utilisé pour créer des objets de types spécifiques

2. valeur à l'objet lors de la première déclaration

3. Déclarez le constructeur vous-même, attribuez des attributs et des méthodes

Remarques :

1. 🎜 >

2. Distinguer la différence entre singleton et singleton, et implémenter l'initialisation avec singleton

3. La fonction constructeur commence par une lettre majuscule

3. 🎜>

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>构造函数模式</title>
</head>
<body>
<!--<script>
  function Car(model,year,miles){
    if(!(this instanceof Car)){
      return new Car(model,year,miles);
    }
    this.model = model;
    this.year = year;
    this.miles = miles;
    this.output = function(){
      return this.model + "走了" + this.miles + "公里";
    }
  }
  var tom = new Car("大叔",2009,20000);
  var dudu = Car("Dudu",2010,5000);
  console.log(typeof tom);
  console.log(tom.output());
  console.log(typeof dudu);
  console.log(dudu.output());
</script>-->
<script>
  //1.用于创建特定类型的对象
  //2.这样的函数名会被人笑话
  //3.js开发的时候写单引号
  //4.js里构造函数比较特殊的地方 new
  //5.其他的语言里 比如PHP 里人家实现 有一个关键字 A class
  //6.zaomen就是构造函数 他又充当了类的概念
  var AA = {
    zaomen:function(huawen) {
      if (!(this instanceof AA.zaomen)) {
        console.log(123);
        return new AA.zaomen(huawen);
      };
      var _huawen = "普通";
      if (huawen) {
        _huawen = huawen;
      }
      this.suo = "普通";
      this.huawen = _huawen;
      this.create = function () {
        return "【锁头】" + this.suo + "【花纹】" + this.huawen;
      }
    }
  };
  var BB = {
    zaomen:function(huawen,suo) {
      if (!(this instanceof BB.zaomen)) {
        return new BB.zaomen(huawen,suo);
      };
      var _huawen = "普通";
      if (huawen) {
        _huawen = huawen;
      }
      this._suo = "普通";
      if (suo) {
        _suo = suo;
      }
      this.suo = _suo;
      this.huawen = _huawen;
      this.create = function () {
        return "【锁头】" + this.suo + "【花纹】" + this.huawen;
      }
    }
  };
  /*function zaomen(huawen){
    if(!(this instanceof zaomen)){
      return new zaomen();
    }
    var _huawen = "普通";
    if(huawen){
      _huawen = huawen;
    }
    this.suo = "普通";
    this.huawen = _huawen;
    this.create = function(){
      return "【锁头】" + this.suo + "【花纹】" + this.huawen;
    }
  }*/
  var xiaozhang = AA.zaomen();
  alert("xiaozhang" + xiaozhang.create());
  var xiaoli = BB.zaomen("绚丽",&#39;123&#39;);
  alert("xiaoli" + xiaoli.create());
</script>
</body>
</html>

L'effet de l'opération est le suivant :

Ce qui précède est le contenu complet de l'article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction aux usines dans les modèles de conception JavaScript

Introduction au modèle de proxy dans les modèles de conception JavaScript

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!

php JavaScript 构造函数对象 this

Déclaration：

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

Article précédent：Introduction aux usines dans les modèles de conception JavaScriptArticle suivant：Introduction aux usines dans les modèles de conception JavaScript

Articles Liés

Voir plus