# 2019/0618/RWD在職班\_(Javascript\_object-oriented programming)

26JS\_OOP


&#x20;object-oriented programming

\#Object



Typescript 定義class的script



Javascript 不能自己定義 class



只有classless



利用function 去定義 class



### ##Javascript自定義物件&#xD;



把function 當成建構子看就可以



不寫class 直接寫建構子

```
Function nameCard(name,phone,email.addr){

This.name = name ;
//新增phone屬性為phoneList子類別
This.phone = new phoneList(phone,”N/A”);
This.email = email;
This.addr = addr;
This.print = printCard;

}
```

### //鑄造物件 實現化&#xD;



var Jack = new namCard();

Jack.phone.homephone= “07-8210171”;

Jack.email= “jack@wda.gov.tw”;

Jack.name= “Jack Lee”;

Jack.addr = “高雄市前鎮區凱旋四路105號”





document.write(“NAME”+Jack.name+”\</br>”);

document.write(“Phone”+Jack.phone.homephone+”\</br>”);

document.write(“Phone”+Jack.phone.cellphone+”\</br>”);

document.write(“Email”+Jack.email+”\</br>”);

document.write(“Addr”+Jack.addr+”\</hr>”);



### //classless物件導向&#xD;



var Mary = new nameCard(“Mary Lin”,”08-8974582”,Mary@wda.gov.tw,”屏東縣恆春鎮墾丁路100號”);



Mary.phoneList.cellphone =”08777777”



document.write(“NAME”+ Mary.name+”\</br>”);

document.write(“Phone”+ Mary.phone.homephone+”\</br>”);

document.write(“Phone”+ Mary.phone.cellphone+”\</br>”);

document.write(“Email”+ Mary.email+”\</br>”);

document.write(“Addr”+ Mary.addr+”\</hr>”);





### ##子物件 子建構函數 子類別&#xD;



可以定義成三個欄位或定義成一個phone物件



定義phone 的建構子 ( 物件 )



//子類別&#x20;

Function phoneList(homephone,cellphone){



This.homephone = homephone

This.cellphone = cellphone



}



一般來講在必須要繼承一個抽象類別，在自己的方法定義或overrider。

但javascript 無法。









Var John = new nameCard(“John”,”0204”,”John@www.tw”,”高雄市”)

John.phoneList.cellphone =”08977777”

### //動態實例擴充Instance&#xD;

John.type = “經理” ;





### ##新版的瀏覽器允許動態實例擴充classinstens跟pretype不一樣&#xD;

「實例擴充」(Instance Extension)、「類別擴充」(Class Extension)

也可以做動態方法





### ##沒有class 怎麼定義方法呢?&#xD;



屬性 = 物件的特徵

方法 = 物件的技能



但不是function裡面定義function



其實跟子類別很像 開頭都是 function 但是 邏輯上不同



Function printCard (){



document.write(“NAME”+ this.name+”\</br>”);

document.write(“Phone”+ this.phone.homephone+”\</br>”);

document.write(“Phone”+ this.phone.cellphone+”\</br>”);

document.write(“Email”+ this.email+”\</br>”);

document.write(“Addr”+ this.addr+”\</hr>”);



}



Jack.print(); 要加括弧因為是方法不是屬性



很靈活 但架構鬆散 ?



今天有個方法 但要用內鍵方法來當我的方法 ??

### ##靜態方法/屬性擴充&#xD;

nameCard.now = function () {



return new Date();



}

Document.write(NameCard.now())



NameCard.img =”abc.jpg”;



Document.write(NameCard.img)





較迂迴的方式實現物件導向技術











### #Prototype base 原型基礎 classbase 物件導向概念?&#xD;



類別 抽象化過後的 資料型態



類別與物件之間沒有太大區別&#x20;

( 雖然有 new的動作 沒有類別 就是建構子 一個方法而已



物件是類別鑄造出來的實例



### ##如何繼承? Prototype Extension&#xD;



//Prototype物件



Function circle(r,color){



This.r = r ;

This.color = color ;

This.display = showCircle;

//動詞當作名稱通常就是方法。一定會有個mether叫showCircle

}



Function showCircle(){



Document.write(this.r);

Document.write(this.color);

//類別裡面根本就沒有PI，直接把PI這個屬性用Prototype方式擺進去。

Document.write(this.PI);



}





Var C1 = new circle (2,”red”);

Var C2 = new circle (3,”green”);

// Prototype Extension ( prototype是個物件

circle.prototype.PI = 3.1415926;

// 在circle裡面新增PI且給值



利用prototype 做出來的屬性 就是直接給予這個類別的，類似繼承。





因為是寫進 circle 所以 c1 、 c2 都能呼叫



C1.display(); C2.display();





今天有個計算圓面積的方法



Function getArea() {



Var result = this.PI\*this.r\*this.r;

Document.write(result);



}

### //擴充方法&#xD;

circle.prototype.showArea = getArea;



C1.display();

C1.showArea();



舉凡用這個類別鑄造出來的物件，就能呼叫的到。



### ##內建物件也可以擴充…&#xD;



Function reverse\_string(){



document.write(“倒牌字串”

For(i=(this.length-1);i>=0;i--){



document.write(this.charAt(i));



}

}



var objMessage = new String(“高屏澎東分屬KPPTR”);

document.write(“原始字串”+objMessage);



### //內建物件靜態擴充&#xD;

string.prototype.reverse = reverse\_string;



objMessage.reverse();











通常function 會額外一個 檔案

然後主檔就把function當作class使用

如果是臨時要加則用動態擴充。











### #真的Prototype 的繼承 ( 會更趨近 class 繼承 class ( base類別&#xD;





Function position(x,y,color){



This.x = x;

This.y = y ;

This.color = color ;

}



Function circle(r,color){



This.r = r;

This.info = showCircleInfo;

}



### //必須要繼承position&#xD;

Function showCircleInfo(){



Var result = 3.1415926 \*this.r\*this.r

Document.write(this.r);

Document.write(this.x);

Document.write(this.y);

Document.write(this.color);

Document.write(this.result);



}



### //Prototype物件繼承 ( 實際的繼承 ( 邏輯上跟classbase一樣&#xD;

Circle.prototype = new position();



//實作

var CI = new circle (2);

C1.color =”red”;

C1.x = 20;

C1.y = 123;

C1.info()



#### ###以上為javascript物件導向作法。&#xD;

#### &#xD;###26JS\_OOP.html

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>
    
    <script>
        //Object 建構子定義
        function nameCard(name,phone,email,addr) {
            this.name = name;
            this.phone = phone;
            this.email = email;
            this.addr = addr;

        }

        var Jack = new nameCard();
        Jack.phone = "07-8210171";
        Jack.email = "jack@wda.gov.tw";
        Jack.name = "Jack Lee";
        Jack.addr = "高雄市前鎮區凱旋四路105號";

        document.write("Name:"+Jack.name+"<br />");
        document.write("Phone:" + Jack.phone + "<br />");
        document.write("Email:" + Jack.email + "<br />");
        document.write("Addr:" + Jack.addr + "<hr>");
        ////////////////////////////////////////////////////////

        var Mary = new nameCard("Mary Lin", "08-8974582", "Mary@wda.gov.tw", "屏東縣恆春鎮墾丁路100號");
        Mary.phone = "08-7854698";

        document.write("Name:" + Mary.name + "<br />");
        document.write("Phone:" + Mary.phone + "<br />");
        document.write("Email:" + Mary.email + "<br />");
        document.write("Addr:" + Mary.addr + "<hr>");
    </script>
</body>
</html>
```

#### &#xD;###26JS\_OOP2.html

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>
    
    <script>
        //Object 建構子定義
        function nameCard(name,phone,email,addr) {
            this.name = name;
            //新增phone屬性為phoneList子類別
            this.phone = new phoneList(phone, "N/A");
            this.email = email;
            this.addr = addr;

        }
        //子類別
        function phoneList(homephone,cellphone) {
            this.homephone = homephone;
            this.cellphone = cellphone;
        }

        var Jack = new nameCard();
        Jack.phone.homephone = "07-8210171";
        Jack.email = "jack@wda.gov.tw";
        Jack.name = "Jack Lee";
        Jack.addr = "高雄市前鎮區凱旋四路105號";

        document.write("Name:" + Jack.name + "<br />");
        document.write("HomePhone:" + Jack.phone.homephone + "<br />");
        document.write("CellPhone:" + Jack.phone.cellphone + "<br />");
        document.write("Email:" + Jack.email + "<br />");
        document.write("Addr:" + Jack.addr + "<hr>");
        ////////////////////////////////////////////////////////

        var Mary = new nameCard("Mary Lin", "08-8974582", "Mary@wda.gov.tw", "屏東縣恆春鎮墾丁路100號");
        Mary.phone.cellphone = "0980854698";

        document.write("Name:" + Mary.name + "<br />");
        document.write("HomePhone:" + Mary.phone.homephone + "<br />");
        document.write("CellPhone:" + Mary.phone.cellphone + "<br />");
        document.write("Email:" + Mary.email + "<br />");
        document.write("Addr:" + Mary.addr + "<hr>");


         ////////////////////////////////////////////////////////

        var John = new nameCard("John Chen", "07-7856984", "John@wda.gov.tw", "高雄市三民區墾丁路100號");
        John.phone.cellphone = "0933789456";
        //動態實例擴充(Instance Extension)
        John.type = "經理";
        document.write("Name:" + John.name + "<br />");
        document.write("HomePhone:" + John.phone.homephone + "<br />");
        document.write("CellPhone:" + John.phone.cellphone + "<br />");
        document.write("Email:" + John.email + "<br />");
        document.write("Email:" + John.type + "<br />");
        document.write("Addr:" + John.addr + "<hr>");

    </script>
</body>
</html>
```

#### &#xD;###26JS\_OOP3.html

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    
</head>
<body>
    
    <script>
        //Object 建構子定義
        function nameCard(name,phone,email,addr) {
            this.name = name;
            //新增phone屬性為phoneList子類別
            this.phone = new phoneList(phone, "N/A");
            this.email = email;
            this.addr = addr;
            this.print = printCard;

        }
        //子類別
        function phoneList(homephone,cellphone) {
            this.homephone = homephone;
            this.cellphone = cellphone;
        }

        function printCard() {
            document.write("Name:" + this.name + "<br />");
            document.write("HomePhone:" + this.phone.homephone + "<br />");
            document.write("CellPhone:" + this.phone.cellphone + "<br />");
            document.write("Email:" + this.email + "<br />");
            document.write("Addr:" + this.addr + "<hr>");

        }

        //靜態擴充方法
        nameCard.now = function () {
            return new Date();
        }
        document.write(nameCard.now() + "<hr>");
        //靜態擴充屬性
        nameCard.img = "abc.jpg";
        document.write(nameCard.img+"<hr>");
        /////////////////////////////////////
        var Jack = new nameCard();
        Jack.phone.homephone = "07-8210171";
        Jack.email = "jack@wda.gov.tw";
        Jack.name = "Jack Lee";
        Jack.addr = "高雄市前鎮區凱旋四路105號";
        Jack.print();
      
        ////////////////////////////////////////////////////////

        var Mary = new nameCard("Mary Lin", "08-8974582", "Mary@wda.gov.tw", "屏東縣恆春鎮墾丁路100號");
        Mary.phone.cellphone = "0980854698";
        Mary.print();
   

         ////////////////////////////////////////////////////////

        var John = new nameCard("John Chen", "07-7856984", "John@wda.gov.tw", "高雄市三民區墾丁路100號");
        John.phone.cellphone = "0933789456";
        //動態實例擴充(Instance Extension)
        John.type = "經理";
        John.print();

    </script>
</body>
</html>
```

\#拜訪?DOM




拜訪的目的是節點樹，取到節點的質。



JQ也可以 選擇器的表示法去找到節點



空質+動態資料



拜訪空動態資料



到時會銜接到api



### ##父節點必須要取id 定調為根 container&#xD;





\<div id=”myDiv”>

\<p>第一段

\<p>第二段







\<script>

&#x20;       function appendNode() {

&#x20;           var myDiv = document.getElementById("myDiv");

&#x20;           var p = document.createElement("p");

&#x20;           var text = document.createTextNode("第四段");

&#x20;           p.appendChild(text);

&#x20;           myDiv.appendChild(p);



&#x20;       }

&#x20;   \</script>



