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= “[e-mail]”;

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物件導向

var Mary = new nameCard(“Mary Lin”,”08-8974582”,[e-mail],”屏東縣恆春鎮墾丁路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>”);

##子物件 子建構函數 子類別

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

定義phone 的建構子 ( 物件 )

//子類別

Function phoneList(homephone,cellphone){

This.homephone = homephone

This.cellphone = cellphone

}

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

但javascript 無法。

Var John = new nameCard(“John”,”0204”,”[e-mail]”,”高雄市”)

John.phoneList.cellphone =”08977777”

//動態實例擴充Instance

John.type = “經理” ;

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

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

也可以做動態方法

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

屬性 = 物件的特徵

方法 = 物件的技能

但不是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(); 要加括弧因為是方法不是屬性

很靈活 但架構鬆散 ?

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

##靜態方法/屬性擴充

nameCard.now = function () {

return new Date();

}

Document.write(NameCard.now())

NameCard.img =”abc.jpg”;

Document.write(NameCard.img)

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

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

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

類別與物件之間沒有太大區別

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

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

##如何繼承? Prototype Extension

//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);

}

//擴充方法

circle.prototype.showArea = getArea;

C1.display();

C1.showArea();

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

##內建物件也可以擴充…

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

//內建物件靜態擴充

string.prototype.reverse = reverse_string;

objMessage.reverse();

通常function 會額外一個 檔案

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

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

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

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

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一樣

Circle.prototype = new position();

//實作

var CI = new circle (2);

C1.color =”red”;

C1.x = 20;

C1.y = 123;

C1.info()

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

###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 = "[e-mail]";
        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", "[e-mail]", "屏東縣恆春鎮墾丁路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>

###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 = "[e-mail]";
        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", "[e-mail]", "屏東縣恆春鎮墾丁路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", "[e-mail]", "高雄市三民區墾丁路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>

###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 = "[e-mail]";
        Jack.name = "Jack Lee";
        Jack.addr = "高雄市前鎮區凱旋四路105號";
        Jack.print();
      
        ////////////////////////////////////////////////////////

        var Mary = new nameCard("Mary Lin", "08-8974582", "[e-mail]", "屏東縣恆春鎮墾丁路100號");
        Mary.phone.cellphone = "0980854698";
        Mary.print();
   

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

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

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

#拜訪?DOM

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

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

空質+動態資料

拜訪空動態資料

到時會銜接到api

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

<div id=”myDiv”>

<p>第一段

<p>第二段

<script>

function appendNode() {

var myDiv = document.getElementById("myDiv");

var p = document.createElement("p");

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

p.appendChild(text);

myDiv.appendChild(p);

}

</script>