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),例如 BootstrapSemantic UI,也非常值得學習。但是請記得,要靈活應用這些現成的框架,融入自己的設計風格,而不是濫用喔!
  還有很多開放源始碼的 JavaScript 函式庫,例如在客戶端執行的 AngularJS、在伺服端執行的 Node.js ……,都非常實用。這就等您自行去發掘囉!