iT邦幫忙

11

設計師的 JavaScript 繪卷:與眾不同的 JS 物件

身為網頁設計師的妳,是否對 JavaScript 感到一頭霧水呢?讓我們一起來看看常常被程式設計師們掛在嘴邊的 JavaScript 物件究竟長什麼樣子吧。 ^_^












0
ccutmis
iT邦研究生 5 級 ‧ 2012-05-11 08:54:01

物件.屬性(Property)跟資料(Data)是不同的東西耶,總之謝謝樓主分享~ =_=|||

0
etblue
iT邦新手 5 級 ‧ 2012-05-11 13:35:24

可以詳細指點一下嗎,菜鳥剛起步中.. =_=b

之前看別的程式語言書腦袋裡留下一個「物件=資料+方法」的印象,Definite Guide 那本書寫說屬性是 Function 的時候那個屬性就叫做方法,所我就自然而然的把剩下的東西對應到之前看到的其他語言裡的物件的資料... 不然腦袋很混亂囧

看更多先前的回應...收起先前的回應...
bizpro iT邦大師 1 級‧ 2012-05-14 11:39:57 檢舉

欲練神功, 必先自宮. 把非物件導向的東西丟掉, 不要做名詞比較, 不要對應.

Javascript不是原生物件導向的語言, 只是具有物件導向語言的某些特質, 是一種擬態. 如ccutmis大所說的, 資料和屬性是不同的, 意義是:
假設我們有一個使用者物件類別(class), 有一個屬性叫年齡age, 但是這個使用者物件類別中, 如果指定了年紀, 例如age=20, 那是資料, 這是不對的, 因此, Javascript並不適合用來說明物件導向, Javascript壓根就不是物件導向的語言, 只是用function去擬態class罷了. 真實的物件是要把物件類別經過初始化, 建構一個真實的物件, 例如某某使用者, 有名有姓之後, 才能擁有資料.

為甚麼物件導向語言要這麼做? 物件導向的核心價值是低耦合, 不相干的, 牽扯糾葛的都要丟掉, 沒有低耦合, 會形成假物件. 假物件造成高開發與更高的維護成本.

ccutmis iT邦研究生 5 級‧ 2012-05-14 15:08:20 檢舉

http://m955.com/wp/archives/118
上網找了一下有幾篇寫的蠻簡潔的(物件導向無痛入門(1)~(4),您參考看看。

bizpro iT邦大師 1 級‧ 2012-05-14 15:58:36 檢舉

剛看了ccutmis大提供的文章, 寫的觀念似是而非, 基本上是錯誤的物件導向觀念!

bizpro iT邦大師 1 級‧ 2012-05-14 16:16:01 檢舉

純物件導向的語言: Eiffel, SmallTalk, 和Ruby
混和式物件導向式語言: Java, C++, C#, Object C
其他程序式語言試圖模擬物件導向: Visual Basic, Perl, Python, Javascript....

混合式物件導向語言的types不是物件, 可能含有非物件的演算, 但是其它的都實施SmallTalk的物件導向語法. 所以稱混合式. 其他的語言, 都只是擬態, 因此導致錯誤的物件觀念.

ccutmis iT邦研究生 5 級‧ 2012-05-14 17:02:27 檢舉

先聲明一下,我本身並不是專業的OOP高手~汗
bizpro大回覆的太專業了,跟我專科的C++程設老師差不多,專有名詞太多,但不好理解。物件導向技術本身太被神化了,所以好像不把它弄得很複雜就不夠專業一樣。

總之小的看法是這樣:
1.[物件]的媽媽就是[類別] (例如: Class People ):
類別定義了所謂的[屬性]Property (例如,"姓名","性別","身高","體重")
跟[方法]Method (例如:"運球","灌籃","射籃","抄截")。

2.有了類別就可以用它把物件實體化,例如:
var man1 = new People();
man1.姓名="流川楓";
man1.性別="男";
man1.身高=183;
man1.體重=75;
man1.灌籃();

PS:以上列的參考網頁裡面寫的"簡單的說,物件就是一個把變數,函式包在一起的一種技術。...",我認為那對一個新手來說倒是比較容易理解的,至少不會把"屬性"理解成"資料" =_=|||

ccutmis iT邦研究生 5 級‧ 2012-05-14 17:37:22 檢舉

不專業的範例,僅供參考... 。_。

<pre class="c" name="code">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>流川PK魚住</title>
<script type="text/javascript">
/* 類別People宣告 */
function People(fullname,sex,weight,height){
	this.fullname=fullname;
	this.sex=sex;
	this.weight=weight;
	this.height=height;
}
People.prototype.dunk=function(){
	document.write (this.fullname+'(H:'+this.height+'cm W:'+this.weight+'kg) 飛身灌籃了!<br />');
	//dunk action
};
People.prototype.blockShot=function(){
	document.write (this.fullname+'(H:'+this.height+'cm W:'+this.weight+'kg) 準備蓋火鍋了!!!<br />');
	//block shot action
};
</script>


<script type="text/javascript">
/* 將People物件實體化man1 */
var man1=new People();
man1.fullname="流川楓";
man1.sex="男";
man1.height=183;
man1.weight=75;
man1.dunk();

/* 將People物件實體化man2 */
var man2=new People("魚住純","男",95,200);
man2.blockShot();
</script>
fillano iT邦超人 1 級‧ 2012-05-14 18:57:47 檢舉

來混淆視聽一下(超過字數,放gist啦):
https://gist.github.com/2693260

另類的繼承方法:

  1. 建立一個物件模版
  2. 要使用物件實體的時候,先去clone這個模版
  3. 利用trait來管理某個類型的方法,要apply這個方法前,會先檢查target物件是否有應有的屬性
  4. target物件用trait.applyto(target)就可以加入方法
  5. 呼叫物件的方法

用這個方式,資料(屬性)跟方法不需要直接綁在一起。另外,透過clone與trait,可以組合多個物件。

ccutmis iT邦研究生 5 級‧ 2012-05-14 21:01:51 檢舉

讚讚讚~謝謝費大指導~開心

etblue iT邦新手 5 級‧ 2012-05-15 03:53:56 檢舉

好強大的討論串 /OoO/ 先感謝各位大大,菜鳥我... 我要花點時間消化一下 >o<

bizpro iT邦大師 1 級‧ 2012-05-16 10:59:40 檢舉

用這個方式,資料(屬性)跟方法不需要直接綁在一起。另外,透過clone與trait,可以組合多個物件。

這種看起來是把原來應該在compile time處理的方法(clone&trait)拿到design time來.

bizpro iT邦大師 1 級‧ 2012-05-16 11:04:02 檢舉

ccutmis提到:
物件導向技術本身太被神化了,所以好像不把它弄得很複雜就不夠專業一樣。

相反的, 物件導向把一切變得更簡單.
物件導向的學習曲線也許高, 但是不經一番寒徹骨, 哪得梅花撲鼻香? 之後的思考, 設計都會非常容易.

fillano iT邦超人 1 級‧ 2012-05-16 14:39:53 檢舉

http://www.ithome.com.tw/itadm/article.php?c=73566剛剛看到良葛格的文章(看到他在FB回文時引用的)

bizpro iT邦大師 1 級‧ 2012-05-16 15:20:08 檢舉

費大的參考資料真不錯.

原型基礎去掉了類別的約束,目的在換取物件學習能力上的彈性,然而對某些經驗不足的開發者而言,過大的彈性反而是一種危險,因而需要某些機制來約束。

原型基礎偏重物件個體性,可以輕易賦予物件不同的特性,有利於快速堆砌功能,但容易造成維護上的混亂,

大部分的程式設計師都難以抗拒這種"彈性", 誤以為這是快速開發的利器, 但是, 失控的彈性卻是造成高耦合風險的主因, 當初物件導向發展不正是為了約束這種失控的彈性嗎? 這是回頭路嗎?

fillano iT邦超人 1 級‧ 2012-05-16 17:12:10 檢舉

良葛格分析的很好。我是覺得,輕快要看場合...而且如果OOP的經驗不足,又只碰過輕快的東西,那...

我寫的簡單的code只是demo一下對於繼承的不同想法(例如:http://fitzgeraldnick.com/weblog/39/),背後還是需要對於物件協作做好設計,才能發揮。(在Javascript部分,我覺得YUI3, EXTJS等是設計比較好的例子)

其實Alan Kay那篇有個背景,系統的伺服器端主要是用classical的方式,view端才用prototypal的,我想關鍵還是在於使用情境與需求。

bizpro iT邦大師 1 級‧ 2012-05-18 14:28:24 檢舉

剛回應了一段, 結果被誤刪了, 因事忙, 無法久留.

總之, 費大提供了一篇有趣的文章
, 對於任何要設計物件的人, 要以messaging來設計, 別把有的沒有的都放進來. 至於typing, 文章描述的很生動....

系統的伺服器端主要是用classical的方式,view端才用prototypal的,我想關鍵還是在於使用情境與需求

這或許是一種勞力分工(division of labor)吧, server端要處理複雜的問題, 而view端就是終端使用者了, 情境簡單, 殺雞焉用牛刀.
相反的, Node.js試圖以Javascript來處理server端的問題, 由於天生的缺陷, 導致效能不彰, 不正是用殺雞刀來屠牛嗎?

0
fillano
iT邦超人 1 級 ‧ 2012-05-14 16:45:45

雖然怕讓樓主混淆,不過有些東西還是需要解釋一下。

其實物件導向自始就有兩個paradigm,classical跟prototypal,Javascript是使用prototype來實現繼承,這跟很多語言不同,不過不影響他可以稱作「物件導向」的程式語言的一份子。另外,function作為單純的function跟constructor,作用並不一樣。

Javascript有非常大的彈性,這讓他可以用不同的方法實現物件導向的各種特性。所以在使用Javascript的時候,最好也超越classical的觀念來適應這些特性。例如在許多Javascript程式庫中,繼承這個動作只要把一個物件的member拷貝給另一個物件就可以了,並不一定需要使用到prototype。使用到prototype的狀況,通常是在要有一個明確的多階層的親子關係時才需要的。

一般來說,用classcial程式語言的範例來說明物件導向,對於學習Javascript來說,並不適合。比較建議的學習方式是:多找一些資料,看看用Javascript怎麼實作物件導向的各種「原則」,例如資料抽象、封裝、繼承、多型等。更進一步的話,可以看看用Javascript可以怎樣做到「單一職責」、「封閉/開放」、「依賴反轉」、「李斯多夫代換」、「介面分離」等原則,以及各種design pattern。如bizpro大前述,這些原則的目的是在建立一個低耦合,可重複使用的系統。

很多事情用Javascript來做,可能方法都不只一種,長得跟classical的實作方式也不盡相同,只是效果一樣而已。從這個方面來說,用Javascript來下手物件導向,的確可能會會更混淆XD

fillano iT邦超人 1 級‧ 2012-05-14 17:16:24 檢舉

補充:
http://lists.squeakfoundation.org/pipermail/squeak-dev/1998-October/017019.html ...看到好多人引用Alan Kay這個mail...還是貼一下,雖然是十幾年前的東西...

etblue iT邦新手 5 級‧ 2012-06-03 20:11:20 檢舉

原來如此,我只知道 classical 是用模子印出紅豆餅,然後 prototypal 是本尊產生影分身... 所以學影分身的話,得暫時把紅豆餅師傅說的話先忘光光。(遠目)

0
bizpro
iT邦大師 1 級 ‧ 2012-05-16 10:52:20

感謝費大的mail reference, 僭越翻譯提供網友參考:

The big idea is "messaging" -- that is what the kernal of Smalltalk/Squeak is all about .

重要的是"訊息化"--也是Smalltalk/Squeak核心(kernel)所在.

The key in making great and growable systems is much more to design how its modules communicate rather than what their internal properties and behaviors should be.

設計出龐大而可成長的系統的重點是更多注重模組間如何通訊的設計而不是這些模組內的屬性與行為是怎樣.

達成物件導向的核心價值-低耦合-的根本之道: (asynchronous) messaging.

我要留言

立即登入留言