首頁 > web前端 > js教程 > JavaScript 有多靈活?

JavaScript 有多靈活?

伊谢尔伦
發布: 2016-11-24 09:44:00
原創
1020 人瀏覽過

 JavaScript 是一種靈活的語言,表達力極強,我來舉一個例子,保證讓很多人大吃一驚。

  本文受到了 Kyle Simpson 的文章《Iterating ES6 Numbers》的啟發。

  首先,在 Number.prototype 物件上,部署一個 add 方法。

Number.prototype.add = function (x) {
  return this + x;
};
登入後複製

  上面程式碼為 Number 的實例定義了一個 add 方法。 (如果你對這種寫法不熟悉,建議先閱讀我寫的《JavaScript 物件導向程式設計》。)

  由於Number 的實例就是數值,在數值上呼叫某個方法,數值會自動轉為實例對象,所以就得到了下面的結果。

8['add'](2)
// 10
登入後複製

  上面程式碼中,呼叫方法之所以寫成8['add'],而不是8.add,是因為數值後面的點,會被解釋為小數點,而不是點運算子。

  將數值放在圓括號中,就可以使用點運算子呼叫方法了。

(8).add(2)
// 10
登入後複製

  其實,還有另一種寫法。

8..add(2)
// 10
登入後複製

  上面程式碼的第一個點解釋為小數點,第二個點解釋為點運算子。為了語意清晰起見,以下我統一採用圓括號的寫法。

  由於add方法回傳的還是數值,所以可以鍊式運算。

Number.prototype.subtract = function (x) {
  return this - x;
};
(8).add(2).subtract(4)
// 6
登入後複製

  上面程式碼在Number物件的實例上部署了subtract方法,它可以與add方法鍊式呼叫。

  如果使用方括號呼叫屬性,寫法會很古怪。

8["add"](2)["subtract"](4)
// 6
登入後複製

  我們還可以部署更複雜的方法。

Number.prototype.iterate = function () {
  var result = [];
  for (var i = 0; i <= this; i++) {
    result.push(i);
  }
  return result;
};
(8).iterate()
// [0, 1, 2, 3, 4, 5, 6, 7, 8]
登入後複製

  上面程式碼在 Number 物件的原型上部署了 iterate 方法,可以將一個數值自動擴展為一個陣列。

  總之,現在我們可以在數值上直接呼叫方法了,但是後面一對圓括號看著有點礙眼,有沒有可能去掉圓括號呢?也就是說,能不能將下面的表達式

(8).double().square()
登入後複製

  寫成另一種樣子?

(8).double.suqare
登入後複製

  這是可以做到的。

  ES5規定,每個物件的屬性都有一個取值方法get,用來自訂該屬性的讀取操作。

Number.prototype = Object.defineProperty(
  Number.prototype, "double", {
    get: function (){return (this + this)} 
  }
);
Number.prototype =  Object.defineProperty(
  Number.prototype, "square", {
    get: function (){return (this * this)} 
  }
);
登入後複製

  上面程式碼在 Number.prototype 上定義了兩個屬性 double 和 square ,以及它們的值方法 get 。

  因此,在任一數值上,讀取這兩個屬性,就可以寫成下面的樣子。

(8).double.square
// 256
登入後複製

  也可以改用方括號運算子。

8["double"]["square"]
// 256
登入後複製


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板