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物件導向
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>”);
##子物件 子建構函數 子類別
可以定義成三個欄位或定義成一個phone物件
定義phone 的建構子 ( 物件 )
//子類別
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
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 = "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>
###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>
###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
<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>
