JavaScript設計模式之構造函數模式實例教程

更新時間：2018年07月02日 15:22:04 作者：CangoWu

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

一、構造函數模式概念

構造函數用于創(chuàng)建特定類型的對象——不僅聲明了使用過的對象，構造函數還可以接受參數以便第一次創(chuàng)建對象的時候設置對象的成員值。你可以自定義自己的構造函數，然后在里面聲明自定義類型對象的屬性或方法。

在JavaScript里，構造函數通常是認為用來實現實例的，JavaScript沒有類的概念，但是有特殊的構造函數。通過new關鍵字來調用自定義的構造函數，在構造函數內部，this關鍵字引用的是新創(chuàng)建的對象。

二、構造函數模式的作用和注意事項

模式作用：

1.用于創(chuàng)建特定類型的對象

2.第一次聲明的時候給對象賦值

3.自己聲明構造函數，賦予屬性和方法

注意事項：

1.聲明函數的時候處理業(yè)務邏輯

2.區(qū)分和單例的區(qū)別，配合單例實現初始化

3.構造函數大寫字母開頭

三、構造函數模式代碼和實戰(zhàn)總結

<!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.用于創(chuàng)建特定類型的對象
  //2.這樣的函數名會被人笑話
  //3.js開發(fā)的時候寫單引號
  //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("絢麗",'123');
  alert("xiaoli" + xiaoli.create());
</script>
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運行工具 http://tools.jb51.net/code/HtmlJsRun測試運行效果如下：