快捷導(dǎo)航

JavaScript設(shè)計(jì)模式之構(gòu)造函數(shù)模式實(shí)例教程

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

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之構(gòu)造函數(shù)模式,結(jié)合實(shí)例形式分析了構(gòu)造函數(shù)模式的概念、功能、定義及使用方法,需要的朋友可以參考下

一、構(gòu)造函數(shù)模式概念

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

在JavaScript里，構(gòu)造函數(shù)通常是認(rèn)為用來實(shí)現(xiàn)實(shí)例的，JavaScript沒有類的概念，但是有特殊的構(gòu)造函數(shù)。通過new關(guān)鍵字來調(diào)用自定義的構(gòu)造函數(shù)，在構(gòu)造函數(shù)內(nèi)部，this關(guān)鍵字引用的是新創(chuàng)建的對象。

二、構(gòu)造函數(shù)模式的作用和注意事項(xiàng)

模式作用：

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

2.第一次聲明的時(shí)候給對象賦值

3.自己聲明構(gòu)造函數(shù)，賦予屬性和方法

注意事項(xiàng)：

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

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

3.構(gòu)造函數(shù)大寫字母開頭

三、構(gòu)造函數(shù)模式代碼和實(shí)戰(zhàn)總結(jié)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>構(gòu)造函數(shù)模式</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.這樣的函數(shù)名會被人笑話
  //3.js開發(fā)的時(shí)候?qū)憜我?
  //4.js里構(gòu)造函數(shù)比較特殊的地方 new
  //5.其他的語言里 比如PHP 里人家實(shí)現(xiàn) 有一個(gè)關(guān)鍵字 A class
  //6.zaomen就是構(gòu)造函數(shù) 他又充當(dāng)了類的概念
  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代碼運(yùn)行工具 http://tools.jb51.net/code/HtmlJsRun測試運(yùn)行效果如下：