> For the complete documentation index, see [llms.txt](https://johch3n611u.gitbook.io/c50108/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201906/20190618rwd-zai-zhi-ban-javascriptobjectoriented-programming.md).

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

26JS\_OOP

 object-oriented programming

\#Object

Typescript 定義class的script

Javascript 不能自己定義 class

只有classless

利用function 去定義 class

### ##Javascript自定義物件

把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;

}
```

### //鑄造物件 實現化

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>