網頁設計微筆記: 7.10 自訂物件

　　除了使用上述 JavaScript 內建的物件，我們也可以建立自己的物件。要建立自訂物件，有以下三種方法，從中我們也可以發現 JavaScript 的原型基礎物件導向 (Prototype-based Object-orientation) 與 C++ 或 Java 有顯著的差異：

直接建立物件

var objCard = {
    name : "Tom",
    age : "17",
    phone : "58585888",
    email : "tom@gmail.com"
};

用 Object() 建構函式建立物件

var objCard = new Object();
objCard.name = "Tom";
objCard.age = "17";
objCard.phone = "58585888";
objCard.email = "tom@gmail.com";

自行撰寫建構函式建立物件，方便重複使用該結構

function nameCard(_name, _age, _phone, _email) {
    this.name = _name;
    this.age = _age;
    this.phone = _phone;
    this.email = _email;
}

var objCardA = new nameCard("Tom", "17",
    "58585888", "tom@gmail.com");

var objCardB = new nameCard();
objCardB.name = "Tom";
objCardB.age = "17";
objCardB.phone = "58585888";
objCardB.email = "tom@gmail.com";

　　剛剛我們都只有建立物件的屬性，當然，我們也可以建立物件的方法，只要設定該方法對應到的函式即可：

function nameCard(_name, _age, _phone, _email) {
    this.name = _name;
    this.age = _age;
    this.phone = _phone;
    this.email = _email;
    this.print = printCard;
}

function printCard() {
    document.write("姓名：" + this.name + "<br>");
    document.write("年齡：" + this.age + "<br>");
    document.write("電話：" + this.phone + "<br>");
    document.write("郵件：" + this.email + "<br>");
}

var objCard = new nameCard();
objCard.name = "Tom";
objCard.age = "17";
objCard.phone = "58585888";
objCard.email = "tom@gmail.com";
objCard.print();

　　學到這裡，相信您對 JavaScript 應該已經有一些認識了。接下來，如果您對網頁前端開發有興趣，建議您去學 jQuery，它是個開放源始碼 (Open-source)、功能強大的 JavaScript 函式庫 (Library)，可以讓您輕易地建立出豐富多樣的網頁。另外，還有一些很強大的開放源始碼網頁框架 (Framework)，例如 Bootstrap 或 Semantic UI，也非常值得學習。但是請記得，要靈活應用這些現成的框架，融入自己的設計風格，而不是濫用喔！

　　還有很多開放源始碼的 JavaScript 函式庫，例如在客戶端執行的 AngularJS、在伺服端執行的 Node.js ……，都非常實用。這就等您自行去發掘囉！