iT邦幫忙

第 11 屆 iThome 鐵人賽

1
自我挑戰組

一步一腳印,探索網頁前端設計之美系列 第 33

第三十三步 -神秘的箱子 (Javascript 物件部分)

大家早安,又到了周末,我是喵橘,今天我要報告的是 Javascript 物件部分。

何謂物件?

Javascript 是一個物件導向的程式語言設計,但跟其他物件導向的程式有不相同的地方,例如:Javascript 沒有類別的概念,對它來講程式內的所有東西都是物件,Javascript 的物件導向是以原型(英文:Prototype-based)作為基礎。

物件簡單說就是屬性和方法的組合。我用遊戲的方法來解釋,每一個遊戲物件是不是都有自己的特徵以及功能,可以產生不同的效果,假如轉換成程式的專業邏輯 - 就是 "屬性""方法"

建立方法

物件的建立方法分為很多種,我就一個一個去做解釋吧,首先先簡單寫一段程式慢慢解釋吧。

var Person = new Object();
Person.name = "James";
Person.age = "28";
Person.height = "170";
Person.weight = "95";

其實這一種寫法幾乎已經看不到了,除非練習的時候還會看到。

var Person = {};
Person.name = "James";
Person.age = "28";
Person.height = "170";
Person.weight = "95";

感覺這樣看起來比較方便,但還有更直覺的寫法。

var Person = {Person.name = "James", Person.age = "28", Person.height = "170", Person.weight = "95"};

只不過這種寫法,假如建物物件很頻繁,就會顯得很不方便,我們應該調整一下程式內容。

function Person () {
    Person.name = "James";
    Person.age = "28";
    Person.height = "170";
    Person.weight = "95";
    Person.inter_name = function() {
        return "大家好,我叫" + name;
    }
  };
 document.write(person_1.inter_name());

寫進函式是不是越來越有物件導向的感覺,但感覺還能設計得更方便些。而且,假如建物物件很頻繁,就會顯得很不方便也還未解決。

function Person(name, age, height, weight) {
    this.name = name;
    this.age = age;
    this.height = height;
    this.weight = weight;
    this.inter_name = function() {
        return "大家好,我叫" + name;
    }
  };

person_1 = new Person("James", 28, 170, 95);
document.write(person_1.inter_name()+"<br />");
person_2 = new Person("Amy", 36, 175, 70);
document.write(person_2.inter_name());

可以建立兩種以上的方法,就是建立物件函式最常見的方法喔!

範例圖示:

https://ithelp.ithome.com.tw/upload/images/20191004/20117282D2cwnFj20c.png

this 是什麼?

有沒有發現 this 這個程式碼的關鍵字,它的功能是表示建構子所建立之實體,也就是 this 指的是物件自己。其實,再許多網頁上都有解釋 this 各種狀況的功能,看了許多文章會讓初學者感到退縮與害怕,其實,不用害怕,就先記著這一句話," this 一脫離物件,就可以不用太在意它了。 "

this 在函式的不同呼叫方式,會有不同的功能與意義,這一方面在之後再好好詳細說明。

下星期預告


今天是講解 Javascript物件部分,下星期說明陣列部分,最近我在公司犯了金流相關的問題,情緒低落中,最近寫文章的內容並沒有很充實,之後會再增加與補充,謝謝各位的閱讀。


上一篇
第三十二步 - 創造自己的風格(Javascript 函式部分)
系列文
一步一腳印,探索網頁前端設計之美33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言