發表文章

目前顯示的是有「物件」標籤的文章

JavaScript初學者的入門天地!(19)方法

圖片
JavaScript中的"方法(Method)"也是函式?它的語法又該如何使用? 方法 (Method) JavaScript 中的「方法 (Method)」也是函式(Function)的一種,但與之前介紹的「函式(Function)」的差別是,「方法 (Method)」是被當成物件屬性來存取的。 JavaScript 「方法 (Method)」的語法如下: method名稱 = function() { 此處為要執行的代碼 } 快來使用以下語法,試試看能否順利將「方法 (Method)」叫出來: 物件名稱.method名稱() 方法 (Method) 是一種函數,屬於一個物件。可以使用 this 關鍵字引用之。 this 關鍵字在此用來組為引用當前物件,這意味著 前端工程師 可以使用它來存取物件的屬性和方法。 定義方法 (Method) ,需在函式建構式內完成,範例如下: See the Pen Javascript19-method by Tedutw ( @Tedutw ) on CodePen . 在上述 JavaScript 範例,我們為新的 animal 物件定義了一個名為「babyName」的方法 (Method)。該方法 (Method)是一個函數,也取用參數名稱「name」,並將它分配給物件的「name」屬性。this.name 是指該物件的名稱屬性。而「babyName」方法將物件的「name」屬性更改為其參數。 除了上述方法, 前端工程師 還可以在 函式建構式 之外定義函式,並將該函式與其物件相連。範例如下: See the Pen Javascript19-method-2 by Tedutw ( @Tedutw ) on CodePen . 延伸閱讀文章: SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢! 44歲媽咪順利轉職網頁設計師, 家庭事業都得意 AI 甩尾技術勝 Ken Block!方程式冠軍車手嘆:要失業了 日推AI手機具「防拍裸照」功能!再拍人工智慧就跟你媽告狀 JavaScript初學者的入門天地!(18)創造物件 學了JavaScript,同時將許多功能攬...

JavaScript初學者的入門天地!(18)創造物件

圖片
看完JavaScript的物件介紹之後,接著就要知道如何創建它們啦! 物件建構式(object constructor) 在上一課中,我們使用物件(object)初始值(initializer)語法來創建了一些 JavaScript 物件。 See the Pen JavaScript 17-Objects-1 by Tedutw ( @Tedutw ) on CodePen . 以上的 JavaScript 例子只建立了單一的「person」。 有時 前端工程師 也需要設定「物件種類(object type)」來創建單一種類的多個物件。 此時的 前端工程師 ,就可以使用「 物件建構式(object constructor) 」創建「物件種類(object type)」。你參考以下範例就知道啦: See the Pen JavaScript 18-Objects-Constructor-1 by Tedutw ( @Tedutw ) on CodePen . 上述的函式「function person」就是一個物件建構式(object constructor):接受 name、nationality、team、BikeNo 這 4 個參數,並且再指派這 4 個參數為物件的屬性。 上述例子的關鍵字「 this 」,就是指當前的物件。 這裡要注意:this 僅僅是一個關鍵字,並不具有變數的屬性(因為其值不能改變)。   創造物件 一旦有了物件建構式(object constructor)之後,就可以使用關鍵字「 new 」來創建同一種類型(type)的新物件(new objects) See the Pen JavaScript 18-Objects-Constructor-2 by Tedutw ( @Tedutw ) on CodePen . 在上述的例子,變數 b1 與 b2 皆為「biker」類型的新物件。這些物件含有多個屬性,這些屬性被分配給對應的物件值。例如 b1 的 "Valention Rossi" 屬性被分配給物件值 "name"。 上述例子中,b1 的物件名稱與屬性名稱分別列表如下: 1. 物件:n...

JavaScript初學者的入門天地!(17)物件介紹

圖片
今天要介紹JavaScript的物件(Objects),還不會的可別錯過! JavaScript 的變數(variable)可被比喻成:用來盛裝「值(value)」的容器。 而本篇介紹的「物件(objects)」,其實就是變數(variable)的一種,而且它還可以承裝多個值(value)。 一個物件(objects)可以被比喻成一張列有多個值(value)的清單,清單上每個物件的格式為「 屬性:屬性值 」。所有的屬性、屬性值均以冒號為區隔,範例與說明(「//」開頭的橫行為說明文字) 如以下所示: See the Pen JavaScript 17-Objects-1 by Tedutw ( @Tedutw ) on CodePen . 結論: JavaScript 的物件 Objects 就像是容器,能裝多個「有名字」的值。   物件屬性(object property) 在 JavaScript 中,要存取物件的屬性(object property),有兩種寫法: 1. 物件名.屬性名 2. 物件名['屬性名'] 以上兩種的範例與說明(「//」開頭的橫行為說明文字)如以下所示: See the Pen JavaScript 17-Objects-2 by Tedutw ( @Tedutw ) on CodePen . 順便一提, JavaScript  還有內建「length」屬性唷!如此一來,就可以計算出屬性名稱的字數了! 承上例,「length」屬性如下所示: See the Pen JavaScript 17-Objects-3 by Tedutw ( @Tedutw ) on CodePen .   物件方法(object method) JavaScript 中的物件方法(object method)是一個含有「函式定義( function definition)」的屬性,存取物件方法(object method)的寫法如以下所示: 物件名.方法名 大家都知道, document.write() 會顯示資料的內容,這個 write() 函式就是物件「 document 」的方法。 「docume...