iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0

前言

初學JavaScript 的時後,意外看到這個東西,也就是建構子,雖然之前從來沒聽過,
但而我們在寫程式的時候,常常會不知道到底要建立幾個物件,這時候建構子就可以幫得上忙啦

範例

用一般函式定義一個人的名子

function createNewPerson(name) {
  var abc = {};
  abc.name = name;
  abc.greeting = function () {
    alert('Hi! I\'m ' + this.name + '.');
  }
  return abc;
}

每當要建立物件的話,又要建立新的空白物件再回傳,是如此的麻煩

使用建構子

function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

不論何時建立了這裡的任一物件實例,物件的「name」屬性均同等於「傳送至建構子呼叫的名稱值」;
且 greeting() 函式也會使用相同「傳送至建構子呼叫的名稱值」。

注意: 建構子函式名稱往往以大寫字母起頭,如此可方便你在程式碼中找出建構子函式。

建立完整的建構子

一、完整程式碼

function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
  this.bio = function() {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  };
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name.first + '.');
  };
};

二、再複製貼上下列程式碼,就可以順利的建立物件實例

var person1 = new Person('Mark', 'Smith', 25, 'male', ['music', 'skiing']);

這樣我們簡單的建構子範例就完成啦,明天再來看看還有哪些東西可以學
我們鐵人賽Day26見囉!!


上一篇
鐵人賽 Day24 -- JavaScript 初體驗(二) -- 點擊後換圖片
下一篇
鐵人賽 Day26 -- 一定要知道的JQuery (二) -- 錨點動畫
系列文
30天後能否自己做出一個簡單便利的訂便當系統(HTML、CSS、BootStrap、PHP、SQL、JavaScrip、JQuery)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言