溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發(fā)布時間：2020-09-28 13:32:52 來源：腳本之家 閱讀：183 作者：CangoWu 欄目：web開發(fā)

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

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

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

在JavaScript里，構(gòu)造函數(shù)通常是認為用來實現(xiàn)實例的，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ù)模式的作用和注意事項

模式作用：

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

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

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

注意事項：

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

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

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

三、構(gòu)造函數(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ā)的時候?qū)憜我?  //4.js里構(gòu)造函數(shù)比較特殊的地方 new
  //5.其他的語言里 比如PHP 里人家實現(xiàn) 有一個關(guān)鍵字 A class
  //6.zaomen就是構(gòu)造函數(shù) 他又充當了類的概念
  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測試運行效果如下：

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

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

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手