ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript デザイン パターンのコンストラクター パターンの概要

JavaScript デザイン パターンのコンストラクター パターンの概要

不言
リリース: 2018-07-03 15:17:46
オリジナル
1362 人が閲覧しました

この記事では主に JavaScript デザインパターンのコンストラクターパターンを紹介し、サンプルの形でコンストラクターパターンの概念、機能、定義、使用法を分析します。必要な友人はそれを参照してください

この記事の例は構造を説明します。 JavaScript デザイン パターンの関数モード。参考として、以下のように皆さんと共有してください:

1. コンストラクター パターンの概念

コンストラクターは、特定の種類のオブジェクトを作成するために使用されます。コンストラクターは、使用されるオブジェクトを宣言するだけでなく、最初の作成セットのパラメーターも受け入れることができます。オブジェクトの場合は、そのオブジェクトのメンバー値。独自のコンストラクターをカスタマイズし、そのコンストラクター内でカスタム タイプ オブジェクトのプロパティまたはメソッドを宣言できます。

JavaScript では、通常、インスタンスを実装するためにコンストラクターが使用されます。JavaScript にはクラスの概念がありませんが、特別なコンストラクターがあります。カスタム コンストラクターは、 new キーワードを通じて呼び出されます。コンストラクター内では、新しく作成されたオブジェクトが this キーワードによって参照されます。

2. コンストラクターパターンの機能と注意事項

パターンの機能:

1. 特定の型のオブジェクトを作成するために使用されます

2. オブジェクトの初回宣言時に値を代入します

3. コンストラクターを自分で宣言し、属性とメソッドを割り当てる

1. 関数を宣言するときにビジネスロジックを処理する

2. シングルトンとの違いを区別して初期化を実装する

3.大文字で始まります

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>
ログイン後にコピー

動作効果は次のとおりです:

以上がこの記事の全内容だと思います。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

JavaScript デザイン パターンのファクトリの紹介


JavaScript デザイン パターンのプロキシ パターンの紹介


以上がJavaScript デザイン パターンのコンストラクター パターンの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート