JavaScript設計模式中建構函數模式的介紹-js教程-PHP中文網

JavaScript設計模式中建構函數模式的介紹

不言

發布： 2018-07-03 15:17:46

原創

1280 人瀏覽過

這篇文章主要介紹了JavaScript設計模式之構造函數模式,結合實例形式分析了構造函數模式的概念、功能、定義及使用方法,需要的朋友可以參考下

本文實例講述了JavaScript設計模式之構造函數模式。分享給大家供大家參考，具體如下：

一、建構函式模式概念

建構函式用來建立特定類型的物件－不僅宣告了使用過的對象，建構子還可以接受參數以便第一次建立物件的時候設定物件的成員值。你可以自訂自己的建構函數，然後在裡面宣告自訂類型物件的屬性或方法。

在JavaScript裡，建構子通常是認為用來實作實例的，JavaScript沒有類別的概念，但有特殊的建構子。透過new關鍵字來呼叫自訂的建構函數，在建構函數內部，this關鍵字引用的是新建立的物件。

二、建構函式模式的作用與注意事項

模式作用：

#1.用於建立特定型別的物件

2.第一次宣告的時候給物件賦值

3.自己宣告建構函數，賦予屬性與方法

注意事項：

#1.宣告函數的時候處理業務邏輯

2.區分與單例的區別，配合單例實作初始化

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>

登入後複製

運行效果如下：