• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. 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.課程);

          }

          六、 混合工廠方式

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

        《&.doc》
        将本文的Word文档下载到电脑,方便收藏和打印
        推荐度:
        点击下载文档

        【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

        在线咨询
        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 亚洲中文色资源 | 亚洲中文字幕乱码资源 | 在线观看片a免费不卡看片 麻豆91青青国产在线观看 | 亚洲福利在线观看 | 亚洲日本熟女视频 | 日韩一级香蕉片在线观看 |

            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.課程);

              }

              六、 混合工廠方式

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