suchen

Heim  >  Artikel  >  Web-Frontend  >  Einführung in Konstruktormuster in JavaScript-Entwurfsmustern

Einführung in Konstruktormuster in JavaScript-Entwurfsmustern

不言
不言Original
2018-07-03 15:17:461346Durchsuche

Dieser Artikel stellt hauptsächlich das Konstruktormuster von JavaScript-Entwurfsmustern vor und analysiert das Konzept, die Funktion, die Definition und die Verwendung des Konstruktormusters in Form von Beispielen.

Dieser Artikel erklärt Die Beispiele stellten das Konstruktormuster von JavaScript-Entwurfsmustern vor. Teilen Sie es wie folgt mit allen zur Referenz:

1. Konzept des Konstruktormusters

Der Konstruktor wird zum Erstellen von Objekten eines bestimmten Typs verwendet – er deklariert nicht nur das verwendete Objekt, sondern auch den Konstruktor Kann Parameter akzeptieren, um die Elementwerte des Objekts festzulegen, wenn das Objekt zum ersten Mal erstellt wird. Sie können Ihren eigenen Konstruktor anpassen und darin Eigenschaften oder Methoden benutzerdefinierter Objekttypen deklarieren.

In JavaScript werden normalerweise Konstruktoren verwendet, um Instanzen zu implementieren. JavaScript verfügt nicht über das Konzept von Klassen, es gibt jedoch spezielle Konstruktoren. Der benutzerdefinierte Konstruktor wird über das Schlüsselwort new aufgerufen. Innerhalb des Konstruktors verweist das Schlüsselwort this auf das neu erstellte Objekt.

2. Die Funktionen und Vorsichtsmaßnahmen des Konstruktormusters

Musterfunktionen:

1. Zuweisen von a Wert für das Objekt bei der ersten Deklaration

3. Deklarieren Sie den Konstruktor selbst, weisen Sie Attribute und Methoden zu

Hinweise:

1 🎜 >

2. Unterscheiden Sie den Unterschied zwischen Singleton und Singleton und implementieren Sie die Initialisierung mit einem Großbuchstaben

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>

Der Betriebseffekt ist wie folgt:

Die Oben finden Sie den gesamten Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in Fabriken in JavaScript-Entwurfsmustern

Einführung in Proxy-Muster in JavaScript-Entwurfsmustern


Das obige ist der detaillierte Inhalt vonEinführung in Konstruktormuster in JavaScript-Entwurfsmustern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript 构造函数 对象 this
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in Fabriken in JavaScript-EntwurfsmusternNächster Artikel：Einführung in Fabriken in JavaScript-Entwurfsmustern

In Verbindung stehende Artikel

Mehr sehen