<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • javascript工廠方式的使用

    時間:2024-10-01 19:39:23 JavaScript 我要投稿
    • 相關推薦

    javascript工廠方式的使用

      一、 工廠方式

    javascript工廠方式的使用

      自己的理解:要創建很多個對象的實例,這些實例有相同的屬性,但是有不同的屬性值。這個時候就需要創個工廠函數(factory function)。

      工廠函數(factory function):創建并返回特定類型的對象。

      工廠函數中如果一個屬性是方法的話,可以在工廠函數的外面定義對象的方法,然后通過屬性指向該方法,從而可以避開每次都調用自己的屬性方法,這樣做使得每個對象都共享了同一個函數。

      示例:

      復制代碼 代碼如下:

      //工廠函數外面定義對象的方法

      function ShowNameFn() {

      alert(this.Name);

      }

      //工廠方式創建對象

      function CreatBOFn(sName, iAge, bSex) {

      var BO = new Object();

      BO.Name = sName;

      BO.Age = iAge;

      BO.Sex = bSex;

      BO.ShowName = ShowNameFn; //該屬性實際上是指向函數的指針,是一個方法

      return BO;

      }

      //按鈕測試調用

      function FactoryCreateFn() {

      var oPerson1 = CreatBOFn("張三", 18, true); //創建實例實際上是直接調用方法

      oPerson1.ShowName();

      }

      總結:工廠函數這種方式定義類或對象,他在創建實例的時候就調用這個工廠函數。

      二、 構造函數方式

      第一步選擇類名,即構造函數的名字,BO名首字母大寫,看下面代碼發現跟上面的工廠函數類似。

      示例:

      復制代碼 代碼如下:

      //------第二種:構造函數方式--------------------------------

      function Car(color, money) {

      this.Color = color;

      this.Money = money;

      this.ShowMoney = function() {

      alert(this.Money);

      }

      }

      //按鈕調用測試

      function NewCarFn() {

      var Car1 = new Car("紅色", "23萬RMB");

      Car1.ShowMoney();

      }

      //----------------------------------------------------------

      比較上一種工廠函數方式的區別:

      ① 構造函數內部沒有創建對象,而是使用this關鍵字。

      ② 使用new運算符調用構造函數。

      三、 原型方式

      利用對象的prototype屬性,可以把他看成創建新對象所依賴的原型,用空構造函數來設置類名,然后所有的屬性和方法都被直接賦予prototype屬性。

      原型方式的問題:

      首先,這個構造函數沒有參數,使用原型方式時,不能通過給構造函數傳遞參數初始化屬性的值。必須在對象創建后才能改變屬性的默認值。

      其次,當屬性指向的是對象,而不是函數時,對象卻被多個實例共享的,其中一個改變將引起其他對象的改變。

      示例:

      復制代碼 代碼如下:

      //先定義一個空的構造函數

      function Car() {

      }

      //屬性和方法直接賦予prototype屬性

      Car.prototype.Color = "紅色,";

      Car.prototype.Money = "20萬";

      Car.prototype.Drivers = new Array("小三", "小四");

      var Car1 = new Car();

      Car1.Drivers.push("小五"); //實例1中給對象Drivers新增了值(實際上就是在原型里面加了多了個“小五”,所以當new第二個對象的時候讀屬性Drivers也出現了小五)

      alert(Car1.Drivers);

      var Car2 = new Car();

      alert(Car2.Drivers); //實例2中,對象中的值改變了!輸出“小三,小四,小五”

      四、 混合的構造函數/原型方式

      聯合使用構造函數和原型方式,就可以像其他語言一樣的創建對象。

      構造函數定義對象的所有非函數屬性,原型方式定義對象的函數屬性(方法)。

      示例:

      復制代碼 代碼如下:

      function BOStudent(name,age) {

      this.姓名 = name;

      this.年齡 = age;

      this.課程 = new Array("語文","數學");

      }

      BOStudent.prototype.ShowName = function() {

      alert(this.姓名);

      };

      //點擊按鈕調試

      function Admixture() {

      var stu1 = new BOStudent("張三", 20); //new第一個BO

      var stu2 = new BOStudent("李四", 22); //new第二個BO

      stu1.課程.push("物理"); //給對象1 添加物理課程項

      alert(stu1.課程);

      alert(stu2.課程);

      }

      混合的構造函數/原型方式是ECMAScript采用的主要方式,他具有其他方式的特性,卻沒有他們的副作用。

      五、 動態原型方法

      大多數的面向對象語言,定義類時,屬性和方法都打包在一起。而上面的混合構造函數/原型方式屬性和方法是分開的,有些人認為在構造函數內部找屬性,在外面找方法的做法不合邏輯,因此也就產生了動態原型方法。

      區別在于:賦予對象的方法的位置不同。動態原型方法是在構造函數的內部,而上面的第四種是在構造函數外部。

      示例:

      復制代碼 代碼如下:

      function BODynamicPrototype(name, age) {

      this.姓名 = name;

      this.年齡 = age;

      this.課程 = new Array("111", "222");

      //_initialized標識判斷是否已經初始化過,即是否已給原型賦予了任何方法,該方法只創建并賦值一次

      if (typeof BODynamicPrototype._initialized == "undefined") {

      BODynamicPrototype.prototype.ShowName = function() {

      alert(this.姓名);

      };

      BODynamicPrototype._initialized = true;

      }

      }

      //點擊按鈕調試

      function DynamicPrototype() {

      var stu1 = new BODynamicPrototype("aaa", 20); //new第一個BO

      var stu2 = new BODynamicPrototype("bbb", 22); //new第二個BO

      stu1.課程.push("333"); //給對象1 添加物理課程項

      alert(stu1.課程);

      alert(stu2.課程);

      }

      六、 混合工廠方式

      目的是創建假構造函數,只返回另一種對象的新實例。這種方式在對象方法內部管理方面與經典方式有著相同的問題。強烈建議:除非萬不得已避免使用!

    【javascript工廠方式的使用】相關文章:

    使用ajax操作JavaScript對象的方法09-28

    詳解JavaScript中的splice()使用方法08-20

    javascript中for/in循環以及常見的使用技巧06-24

    Javascript中arguments對象的詳解和使用方法08-20

    如何使用正確的發聲方式唱歌05-26

    關于javascript對象之內置和對象Math的使用方法10-08

    對javascript的理解08-08

    常用的JavaScript模式09-22

    Javascript的this用法簡述08-15

    JavaScript學習筆記08-24

    主站蜘蛛池模板: 久久亚洲国产精品一区二区| 久久e热在这里只有国产中文精品99| 伊人久久精品线影院| 免费人欧美日韩在线精品| 99精品视频在线观看| 亚洲精品成人区在线观看| 亚洲精品高清视频| 精品福利视频一区二区三区| 久久99精品免费一区二区| 国产精品福利在线播放| 一本久久a久久精品亚洲| 狠狠精品干练久久久无码中文字幕 | 国产亚洲精品精品国产亚洲综合| 97精品伊人久久大香线蕉app| 亚洲欧美一级久久精品 | 久久久久久国产精品免费无码 | 久久精品中文无码资源站| 免费短视频软件精品一区二区| 91精品国产品国语在线不卡| 69久久夜色精品国产69| 青青草原精品国产亚洲av| 亚洲国产精品一区二区第一页免| 国产微拍精品一区二区| 91精品国产自产在线观看| 华人在线精品免费观看| 99爱在线精品免费观看| 精品无码一区二区三区爱欲| 亚洲av永久无码精品漫画| 在线观看91精品国产网站| 亚洲精品高清一二区久久| 欧美日韩精品系列一区二区三区国产一区二区精品 | 精品无码国产污污污免费网站国产 | 成人国产一区二区三区精品| 久久成人精品视频| 国产精品视频网站你懂得| 国产福利在线观看精品| 国产精品无码专区| 99在线精品免费视频九九视| 国产精品1区2区3区在线播放| 91精品国产福利在线导航| 国产精品电影在线观看|