伊莉討論區

標題: 請問各位前輩，何謂 Javascript 中的 物件表示式?方法?屬性?，請指點 [打印本頁]
作者: chialewang    時間: 2019-9-29 11:01 AM     標題: 請問各位前輩，何謂 Javascript 中的 物件表示式?方法?屬性?，請指點

提示: 作者被禁止或刪除 內容自動屏蔽
作者: chialewang    時間: 2019-9-30 02:00 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: ddttdtxb    時間: 2019-10-2 12:51 AM

首先要先說… 以下是我個人的認知，不代表全然符合嚴謹的定義。
其實包含自己所接觸到工程師，也不是每個名詞的定義都完全了解。
大方向不會偏太多，不會影響到工作開發程式為主。畢竟不是學校，講究很明確的定義。

帶入主題前，先扯一下自己的學習程式的過程中，
也有過如樓主這段過程，看了一堆舉例，但還是搞不懂的狀況。
其中一個特徵，就是解釋的人，會用生活、其它語言作為意思。
有些時候真的能夠幫助理解，但有時候生活太空泛，其它語言不夠了解，反而越聽越不懂。
所以… 我打算接下來，全部使用 javascript 來作說明。

首先來看「物件」「表示法」…
就是使用語法的方式來表示一個物件，底下這種就是…
  1. let car = { color: 'red', type: 'is200t', name: 'Lexus' };
複製代碼
通常會用在設定參數，或是定義一個不太大的變數(通常能在 10 行定義完)，
好處是不會讓程式不好看懂，也能少打許多東西…
一個有點極端的例子… 如下所示… 看起來就沒有前面那麼簡捷。
  1. let car = new Object();
  2. car.color = 'red';
  3. car.name = 'Lexus';
  4. car.type = 'is200t';
複製代碼
有些覺得不夠「整齊」的人，會作這樣子的排版…
  1. let car = {
  2.     color: 'red',
  3.     type:  'is200t',
  4.     name:  'Lexus',
  5. };
複製代碼
用刻意加入的空白字元，讓程式整齊，
以及利用 javascript 允許的狀況，在最後一個項目上加上逗號，
這樣未來要在後面增加項目，或改變項目的順序，都比較不怕因項目中少逗號出錯。
(利用編輯工具的整行上下移動功能，很方便)
作為參數的部分… 我最後再提…

屬性 = 放在物件/類別裡的變數，取得/設定的時候，後面不帶 "()"。
方法 = 放在物件/類別裡的函數，使用的時候後面帶 "()" 。 (不然你會得到函數本身)

大體這樣理解就好，一直談下去，中間有些模糊地帶…
因為變數是可以用來儲存函數的，所以一個方法，不用來執行的時候，
要把它視作「類型為函數(function)的屬性」也不是不可以…

總之，屬性是用來存取資料的，方法是用來執行的。
還是很模糊吧！ 來看實例…
前面有提到全都用 javascript 來說明吧！ 所以我拿兩個常用的類別來說明…

首先是時間/日期類別…
  1. d = new Date('2019-10-02 12:30:00');
  2. d.getYear(); // 119
  3. d.getFullYear(); // 2019
  4. d.toISOString(); // "2019-10-02T04:30:00.000Z"
複製代碼
它包含了許多資訊，像是預設以執行電腦時區，為準，這裡用的是 UTC+8 。
有許多「方法」可以得到它不同面向的資訊。
像是年份資料(由 1900 開始算的年份)，或全年分。
或是標準的時間表示(以 UTC+0 為準)。

當然，那一個個都可以視為「函數」，不過把它們稱作 Date 的方法，語句上比較順。

再來是字串… 直接初始化，省略物件形式(結果一樣)
  1. let carName = "Lexus";
  2. carName.length; // 5
  3. carName.split('x'); // ["Le", "us"]
複製代碼
想知這個字串長度，我們使用「 length 這個字串的屬性 」，
比起說「 length 這個字串的變數」感覺順得多。

「使用字串的 split 方法分割內容」也比「使用字串的 split 函數來分割內容」來得順。

未來樓主學熟 prototype 之後，可能會發現我這樣說法有點爭議，
不過這裡是為了幫助理解一概念，部分定義，實作的細節先不要去深究。

最後，把物件表示式的參數部分講完…
來看看下面這個函數…
  1. function makeCarString(car) {
  2.   return 'Name: ' + car.name + ', Type: ' + car.type + 'Price: ' + car.price;
  3. }
複製代碼
所收到的 car 物件，多需要一個叫作 price 屬性，一開始定義物件沒有的。
我們比較下面兩種寫法…
  1. // 前面我們已經有定義好 car 變數了…
  2. let price = '1M';

  4. // 方式1
  5. let newCar = {};
  6. newCar.name = car.name;
  7. newCar.type = car.type;
  8. newCar.price = price;
  9. makeCarString(newCar);

  11. // 方式 2
  12. makeCarString({
  13.   name: car.name,
  14.   type: car.type,
  15.   price: price,
  16. });
複製代碼
方法 2 很顯然簡捷，又不會讓人看不懂吧！

如果對 ES6 語法夠熟，有轉譯器的幫忙，甚至可以寫成…
  1. makeCarString({...car, price});
複製代碼
把 car 的屬性都取出來… 再加上 price (屬性和變數同名，省略只寫一次就好)
這段看不太懂先跳過沒差… 反正未來如果實際開發程式，
別人的程式碼很常能看到，看多就習慣了。
作者: chialewang    時間: 2019-10-2 08:53 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: chialewang    時間: 2019-10-3 10:21 AM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: fuoff123    時間: 2019-10-9 11:24 PM

說明物件之前，建議先認識一下，一個名詞 Class

在現實生活中DNA這東西，決定了我們髮色、膚色、性別等等
而有了DNA就創造了 我、你 ....
而我和你 都有走路和跑步的動作

這句話用程式語言理解，可以被表達下面：

Class，決定了物件的屬性有什麼，膚色、髮色、性別
而有了Class，我就可以創造出 物件A、物件B ...
而這個物件具有 走路和跑步的方法

所以可以知道物件是由Class所產生，那麼Class怎麼寫
你可以參考下面Google關鍵字，搜尋他第一個就是教學網站了，我是覺得說明很清楚
而Class要定義什麼東西，你自己的爬文結果就很清楚了，屬性有什麼、方法有什麼

關鍵字：[教學] 深入淺出 JavaScript Class 類別
作者: xiaofu95    時間: 2019-12-2 04:03 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: fllynn    時間: 2020-4-18 06:54 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: xxskydownxx    時間: 2020-6-27 06:12 PM

我的認知范圍解釋，拿數學來做個比喻。
？= 2
1.物件表示式?
？=【加的功能】
2.方法?
【加的功能】=(1+1)
3.屬性?
1 = 數字
(在javascript 如果1表示文字 答案就會“11”)



歡迎光臨 伊莉討論區 (http://a402.file-static.com/) Powered by Discuz!