9-1 Object 類型的特點，OOP 物件導向

Original: https://course.andys.pro/Javascript-Intro/09-1-features-of-object-type-oop-object-oriented/

講義

1. 什麼是物件 (Object)？

物件是 JavaScript 中非常重要的資料結構。不同於基本變數只能存一個值，物件可以將許多相關的資訊（屬性）和行為（方法）打包在一起。

• 屬性 (Properties)：物件擁有的東西（描述特徵）。例如：姓名、身高、體重。
• 方法 (Methods)：物件會做的事情（功能行為）。例如：聽、說、讀、寫。

2. 物件的建立語法

使用大括號 { } 並搭配「鍵值對」(Key-Value pairs) 來定義：

var person = {
    name: "黃曉明", // 屬性
    age: 27,
    speak: function() { // 方法
        alert("嗨，你好");
    }
};

• 存取方式：使用點符號 . 或是中括號 []。
  • person.name ➝ 取得姓名。
  • person.speak() ➝ 執行說話的方法。

3. 語法注意事項

• 屬性與值之間使用 冒號 : 連接。
• 不同屬性之間使用 豆號 , 隔開。
• 早期規範：最後一個屬性後面建議不要加豆號（在舊版 IE 可能報錯），但現代瀏覽器多半已支援。

4. 物件導向 (OOP) 簡介

• 概念：將程式邏輯抽象化為一個個物件。
• 特性：
  • 彈性高、易維護：像樂高積木一樣，可以將功能模組化。
  • 原型基礎 (Prototype-based)：JavaScript 的物件導向是建立在「原型」上的。
• 擴充工具：console.table() 可以將物件以表格形式美觀地呈現。

影片逐字稿 (AI 生成)

好 各位同學們早我們現在開始第九章然後我們要來看Object類型那九之一的部分我們會開始看到Object類型的特點然後我們在九之二看到它是怎麼樣來表達的在九之三我們會學會用for-in的回圈來處理Object然後讓物件裡面的一個東西可以印出來來使用好 首先在九之一我們會學到的是什麼是物件Object然後我們要怎麼樣來建立一個物件Object然後還有什麼是Object Oriented什麼是物件導向OOP好 什麼是物件呢那它跟我們剛剛前面的變數不太一樣它現在存的東西其實是一個我們叫做物件那在物件裡面可以有很多的指向目比如說像一個人他可能有名字 身高 體重和血型然後他可能會做一些事情比如說像聽說讀寫那在這段扣裡面呢在這個表格裡面我們可以先把我們要做的物件先把它列下來當我們把它列下來以後呢我們可以把它寫起來首先呢 我們可以用 var 或 let 建立一個建立一個變數 叫人那 object的表示方式是用大括號把它刮起來在裡面呢 我們有個key 叫做姓名key就是key然後他每個這個key裡面有一個value叫做是自串的黃曉明然後這是數字 這樣身高 體重 類型那聽說讀寫這些功能我們叫做它 叫它是methods就是 然後它是一個一個的function然後裡面就可以來執行我們JS的程式那到最後呢 我們在這邊用 console table 把它印出來那我們跑一下好 那它跑出來的類型其實跟我們前面那個表格其實長得不太一樣的那這邊只是要表示給大家看說因為它那個表格是要讓你知道說喔 這些東西是它可以做的事情的方法和這邊是它裡面的propertiesOK那就是簡單把call列下來然後那些call我都放在paper上面那它可以做的韓式的方法我們叫做methods那它擁有的東西叫做properties屬性好的那在計算機科學裡面object它是一個記憶體位置裡面的值是一個指標符號去指到一串資料那物件裡面可以物件裡面可以是變數 資料結構或是函式函式就是function好 然後它可以表示命名空間namespace那我們剛才提到它包含的屬性和方法那這邊提到有一點抽象就是object oriented就是物件導向程式裡面物件是一個class就是一個類別裡面的實例那這個這段call我們在902會提到那會是講義的補充那你要找到這些的內容你可以去我們的這個paper上面然後我們看到902這邊物件導向的介紹然後把它打開我們可以看到這裡面有一個地方這是比較仔細的裡面的內容那我們可以看到等一下在這個地方我們會看到其實在這個地方我們在建一個class然後我們是用function來建這個class就是剛剛講到的class那為什麼我會說它是一個實例呢一個instance原因是因為我們在這邊new把這個classnew了一個把這個物件叫出來變一個personone那我們就可以看到其實就是它這段話想要表達的意思就是你要建一個instance從一個class建一個instance的object出來是用new的方法好這大家可以晚一點再看我們等一下先學會怎麼用object那這個是oop就是物件導向的部分好的首先我們要來建立我們的第一個object那首先呢我們要建第一個object的時候我們通常都是先建一個變數那這個變數希望它是一個物件那一個物件我們是用大括號來做表示然後這是一個空的好那我跑一次給大家看記得這個是在9-2-2那這份code其實是在我們剛剛的講義裡面的這邊OKOK好那我們跑起來好這邊我們看到第一個console log這是一個空的物件所以它就是一個大括號裡面是沒有東西的好在下面這個例子我們可以看到name是黃曉明age27speakfunction是一個function然後這個function會alert那大家可能還也還沒有看過alert是什麼沒有關係那我們我們把我們這段code先把它修正首先要修正的地方是那個雙引號的地方要把它從講義裡面的中文的雙引號換成英文的雙引號好然後我們就可以把這個person物件建起來它有裡面有一個property之 name有一個property有age然後它的name的value是黃曉明它的年紀是27然後它這邊有一個method是speak然後它這是一個這是一個 function然後這個 function裡面有一個alert然後在這邊console log我們可以去看到這個物件長得怎麼樣那你看到這邊speakspeak它這邊它就會跟你講說這是一個 function然後它沒辦法印出來因為它是一個 method好那我們把這一段code先复制起來我們把它在我們的瀏覽器裡面執行看看好像我也是開一個google來跑好好我把person建立了以後呢我是不是可以直接person然後它就會告訴我它是一個物件裡面有這些東西然後當它是一個 function的時候它這個 function會寫成像這樣OK那我們怎麼樣就是來就是來就是來用這個person裡面的property怎麼去讀它呢我們person點name我們就可以拿到它的裡面的名字點age就可以拿到它的property同時我們在這邊我們可以叫它speak可是當我們speak的時候呢我們要記得因為它是一個當我們speak下去以後它會看到它是一個韓式那我要執行這個韓式的時候我要把它小刮鬍這樣可以去執行它大家有沒有發現欸 大家有沒有發現這邊跑出一個彈跳視窗叫嗨 你好那我們這邊就可以知道說alert其實就是一個警告的意思那這個警告會在你的瀏覽器裡面跳一個這樣警示視窗跑出來然後它上面會寫說嗨 你好好 那這個alert是其實是JavaScript裡面在browser裡面常用的一個警示的方法那在這份講義裡面沒有提到不過就是會常常用到就是像alert這種東西就是有時候你要測試call的時候可以會用到alert好的那在這邊呢這邊有提到就是說豆號在每一個每一個property或是method後面都要用一個豆號把它隔開那這邊中間是用冒號那這個豆號隔開的情況下以前的JavaScript是你好幾個東西之間你是用豆號隔開可是最後一個是不能加豆號的因為加上豆號了以後它就會出現錯誤那在課本的第五十頁那在課本的第五十頁那第五十頁下面有提到就是比較新的就是以前早期internet explorer最後面有豆號會出現錯誤可是呢像比較新的call就算你有豆號也是可以跑的那這邊跟有一些我自己是喜歡就是都是一樣可是有些call的就是還是保守一點就是最後面有時候如果可以不要加就不要加因為不知道它編譯器會不會是比較早期的在跑然後它是比較早期的在跑可能就會出現錯誤那這是可能一些小地方要注意的好的再來我們來講物件導向那以前的像C語言的話是沒有物件導向的所以後面才有C++和C-shark來慢慢修正到最後在JavaScriptJava Python這種比較新的語言都已經把物件納入就是原生開始來做那JavaScript本身就是一個物件導向的程式設計那這邊有提到一個名詞叫做PrototypePrototype就是為基礎的一個物件導向的設計那其實我們在這邊呃在剛剛的這一個補充的這個部分呢我們也可以看到PrototypePrototypeOK這邊也會開始跟你介紹的Prototype是什麼好的那我們繼續講那OOP有幾個優點就是它是比較彈性的易維護的因為它其實是蠻容易理解的就是說我們可以用一個物件然後物件裡面還可以再放物件然後來操作東西那這些呃功能就比較像是有點像是以前是無細胞動物像現在是有細胞動物然後裡面可能有各式各樣的功能那以前你可能原本的做法你可能只能裡面去存自傳啊數值啊那這個時候那現在呢你可以去放一個東西裡面有好多個呃Property然後它有幾種方法methods可以來做好的那Lab01呢其實大家就可以參考我在呃Paper上面的code然後來寫一下就是Lab1的一個物件好這邊是9-1

影片逐字稿largev2

各位同學早,我們現在開始第九章然後我們要來看object類型那九之一的部分我們會開始看到object類型的特點然後我們在九之二看到它是怎麼樣來表達的在九之三我們會學會用for in的回圈來處理object然後讓物件裡面的一個東西可以印出來來使用好首先在九之一我們會學到的是什麼是物件object然後我們要怎麼樣來建立一個物件object然後還有什麼是object-oriented什麼是物件導向OOP什麼是物件呢那它跟我們剛剛前面的變數不太一樣它現在存的東西其實是一個我們叫做物件那在物件裡面呢可以有很多的指向物比如說像一個人他可能有名字、身高、體重和血型然後他可能會做一些事情比如說像聽說、讀寫那在這段Code裡面呢在這個表格裡面我們可以先把我們要做的物件先把它列下來當我們把它列下來以後呢我們可以把它寫起來首先呢我們可以用var或let建立一個呃建立一個變數叫人那object的表示方式是用大括號把它括起來在裡面呢我們有個key叫做姓名key就是KEY然後它每個key裡面有一個value叫做是自串的黃曉明然後這是數字這樣身高、體重、類型那聽說、讀寫這些功能我們叫它是Methods就是然後它是一個一個的function然後裡面就可以來執行我們JS的程式那到最後呢我們在這邊用console table把它印出來讓我們跑一下好那它跑出來的類型其實跟我們前面那個表格其實長得不太一樣的那這邊只是要表示給大家看說因為它那個表格是要讓你知道說喔這些東西是它可以做的事情的方法看這邊是它裡面的propertiesOK那這是簡單把code列下來然後那些code我現在都有放在paper上面那它可以做的函式的方法我們叫做methods那它擁有的東西叫做properties屬性好的那在呃計算機科學裡面object它是一個記憶體位置裡面的值是一個指標符號去指到一串資料那物件裡面可以物件裡面可以是變數、資料結構或是函式函式就是function好然後它有可以表示命名空間namespace那我們剛才提到它包含了屬性和方法那這邊提到就有點抽象就是object-oriented就是物件導向程式裡面物件是一個class就是一個類別裡面的實例那這個這一段code我們在九之二會提到那會是講義的補充那你要在你要找到這一些的內容你可以去我們的這個paper上面那我們看到九之二這邊物件導向的介紹然後把它打開我們可以看到這裡面有一個地方這是比較仔細的裡面的內容那我們可以看到等一下在這個地方我們會看到其實在這個地方我們在建一個class然後我們是用function來建這個class就是剛剛講到的class那為什麼會說它是一個實例呢一個instance原因是因為我們在這邊new把這個classnew了一個把這個物件叫出來變一個personone那我們就可以看到其實就是它這段話想要表達的意思就是你要建一個instance從一個class建一個instance的object出來是用new的方法這大家可以晚一點再看我們等一下先學會怎麼用object那這個是OOP就是物件導向的部分首先我們要來建立我們的第一個object那首先呢我們要建第一個object的時候我們通常都是先建一個變數那這個變數希望它是一個物件那一個物件我們是用大括號來做表示然後這是一個空的那我跑一次給大家看記得這個是在9-2-2那這份code其實在我們剛剛的講義裡面的這邊ok好那我們跑起來好這邊我們看到第一個console log這是一個空的物件所以它就是一個大括號裡面是沒有東西的好在下面這個例子我們可以看到name是黃曉明age是27speak然後這個function會alert那大家可能也還沒有看過alert是什麼沒有關係那我們把我們這段code先把它修正首先要修正的地方是那個雙引號的地方要把它從講義裡面的中文的雙引號換成英文的雙引號好然後我們就可以把這個person物件建起來它有裡面有一個property是name有一個property有agename的value是黃曉明它的年紀是27然後它這邊有一個method是speak然後這是一個這是一個function然後這個function裡面有一個alert嗨你好ok然後在這邊console log我們可以去看到這個物件長得怎麼樣那你看到這邊speakspeak它這邊它就會跟你講說這是一個function然後它沒辦法印出來因為它是一個method好那我們把這一段code先複製起來我們把它在我們的瀏覽器裡面執行看看我看我是開google來跑好ok我把person建立了以後呢我是不是可以直接person然後它就會告訴我它是一個物件裡面有這些東西然後當它是一個function的時候它這個function會寫成像這樣ok那我們怎麼樣來就是來用這個person裡面的property怎麼去讀它呢我們person.name我們就可以拿到它的裡面的名字.age就可以拿到它的property同時我們在這邊我們可以叫它speak可是當我們speak的時候呢我們要記得因為它是一個當我speak下去以後它會看到它是一個函式那我要執行這個函式的時候我要把它小刮鬍這樣可以去執行它大家有沒有發現這邊跑出一個彈跳視窗叫嗨你好那我們這邊就可以知道說alert其實就是一個警就是警告的意思那這個警告會在你的瀏覽器裡面跳一個這樣警示視窗跑出來然後它上面會寫說嗨你好那這個alert是其實是javascript裡面在browser裡面常用的一個警示的方法那在這份講義裡面沒有提到不過就是會常常用到就是像alert這種東西就是有時候你要測試code的時候會用到alert好的那在這邊呢這邊有提到就是說逗號在每一個每一個property或是method後面都要用一個逗號把它隔開那這邊中間是用冒號那這個逗號隔開的情況下以前的javascript是你好幾個東西之間你是用逗號隔開可是最後一個是不能加逗號的因為加上逗號了以後它就會變成一個它就會出現錯誤那在課本的第50頁第50頁下面有提到就是比較新的就是以前早期internet explorer最後面有逗號會出現錯誤可是呢像比較新的code就算你有逗號也是可以跑的那這邊有一些我自己是喜歡都是一樣可是有些code還是保守一點就最後面有時候如果可以不要加就不要加因為不知道它變異器會不會是比較早期的在跑然後如果它是比較早期的在跑可能就會出現錯誤那這是可能一些小地方要注意的好的再來我們來講物件導向OOP那以前的像C語言的話是沒有物件導向的所以後面才有C++和Csharp來慢慢修正到最後在Javascript、Java、Python這種比較新的語言都已經把物件納入就是原生就是開始來做那Javascript本身就是一個物件導向的程式設計那這邊有提到一個名詞叫做PrototypePrototype就是為基礎的一個物件導向的設計那其實我們在這邊在剛剛的這一個補充的這個部分呢我們也可以看到Prototype這邊也會開始跟你介紹Prototype是什麼好的那我們繼續講那OOP有幾個優點就是它是比較彈性的易維護的因為它其實是蠻容易理解的就是說我們可以用一個物件然後物件裡面還可以再放物件然後來操作東西那這些功能就比較像是有點像是以前是無細胞動物像現在是有細胞動物然後裡面可能有各式各樣的功能那以前你可能原本的做法你可能只能裡面去存字串啊數值啊那現在你可以去放一個東西裡面有好多個Property然後它有幾種方法可以來做好的那Lab01呢其實大家就可以參考我在paper上面的code然後來寫一下就是Lab1的一個物件這邊是9-1