iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 10
1
Modern Web

好 Js 不學嗎 !? JavaScript 入門中的入門。系列 第 10

[Day10] JavaScript - 物件、方法與屬性 (下)

大綱

  • JavaScript 三大物件
  • 原型鏈 (prototrpe chain) 與擴充 (extends)

JavaScript 三大物件:JavaScript 的物件
JavaScript 的物件大致可分為 3 種:原生物件 (Native)、宿主物件 (Host)、使用者自訂物件。

原生物件 (Native):原生物件是指 ECMAScript 規範定義的內建物件,像是函式 (function)、陣列 (Array)、日期 (Date)、數學 (Math) 與正規運算 (RegExp) 等等。

宿主物件 (Host):JavaScript 引擎支援的宿主物件,例如瀏覽器與 Node.js,各自有專屬的物件,透過 JS 就可以來操作這些物件。

瀏覽器有 HTML DOM 物件,JavaScript 引擎就可以透過 API 來使用操作這些物件,改變 DOM 結構。

Node.js 提供操作磁碟 I/O 或建立 Web Server 的物件,JS 引擎就可以透過它們來架設 Server 開發後端應用程式,因為它沒有 HTML DOM 物件所以不能使用操作 DOM 物件的語法。

使用者自訂物件:如果某項程式功能經常會用到,而且可以在不同地方使用,就可以考慮將它寫成物件,物件私有屬性與方法可以讓程式碼使用在不同的地方,不會互相污染干擾,達到共用程式碼的目的。

JavaScript 三大物件:使用者自訂物件
物件實際上是一群名稱與值的組合 (name-value pair),物件的外貌、特徵可以利用屬性 (attribute) 來描述,利用方法 (method) 能讓物件具有特地的動作。

舉例來說,我們想要製作一個名稱為貓 (cat) 的物件,並且給兩個屬性名稱:Name、Age,以及一個 run 的方法:

var cat = function(catName, catAge) {
  this.Name = catName;    //屬性 (Attribute)
  this.Age = catName;       //屬性 (Attribute)

  this.run = function() {      //方法 (Method)
    console.log(this.name, '跑走了')      //方法 (Method)
  }
}

上述的 function 稱之為建構子函式 (constructor functions),cat 是這個物件的名稱,它就好像一個容器一樣,屬性與方法都被封裝在這一個容器裡面,this 關鍵字在這裡代表目前這個物件,就是這樣的意思,物件就建立完成了,相當於建好了物件類別 (class)。

建立完成之後,只要用 new 關鍵字就能夠產生物件實體。例如實作一隻名為 vita 的 5 歲貓,就可以如下表示:
var vita = new cat('vita', 5);

補充說明:
『new』與『this』是物件很重要的兩個關鍵字,『new』的作用是產生一個新的物件,當 JS 引擎遇到 new 時,會建立一個空物件 {},接著呼叫 new 後面的函式,建構起函式的執行環境,this 關繫字才會去指向剛被 new 出來的物件,如此一來函式就不需要管是誰呼叫它,對於程式撰寫的方便性或是可讀性來說都相當方便。

vita 物件實作完成了,我們就可以使用點 (.) 來呼叫物件的屬性 (attribute) 與方法 (method),由於方法 (method) 是函式,所以要加上括號來呼叫,如下所示:
console.log(vita.Name + '是一隻' + vita.Age + '歲的貓'); // 呼叫屬性
vita.run(); //呼叫方法

上述只是 JavaScript 建立物件的方法之一,是先建立起建構子函式 (constructor functions),然後使用這個函式以及 new 關鍵字來實作物件。

JavaScript 三大物件:『this』關鍵字
『this』關鍵字是一個指向變數,this 到底指向誰,必須視執行時的上下文環境 (Context) 而定。

如果使用建構子函式 new 一個新物件,此時的 this 會指向物件實體所建構的環境。

當在函式內使用 this,這個 this 會指向全域物件 (global Object),宿主環境是瀏覽器就會指向 window 物件,如果是 Node.js 就會指向 global。

舉一個例子:

var a = 15;
function myFunc(a) {
  var x = a;
  var y = this.a;
  console.log(x, y)
}

myFunc(100)

上面的值 x 是 100,y 是 15。這是因為函式裡的 this 指向 window 物件,因此 this.a 會是全域裡的變數 a。

原型鏈 (prototrpe chain) 與擴充 (extends):原型鏈
以下待寫....加班很忙...


上一篇
[Day09] JavaScript - 物件、方法與屬性 (上)
下一篇
[Day11] JavaScript - RegExp 物件
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30

尚未有邦友留言

立即登入留言