是 Ray 不是 Array

Welcome.Web.World
歡迎來到網路世界

發表於 分類於

這章節主要講解 ES6(JavaScript EcmaScript 2015 或 EcmaScript 6) 的部分，而這章節將講解 ES6 另一種建立物件與設定原型的方法。 class 在其他程式語言是非常受歡迎的，可以用來定義物件的方法、屬性等該做什麼，但前面有講過 JavaScript 本身並沒有類別 (class)。

閱讀全文 »

發表於 分類於

前面我們已經瞭解使用函數建構子建立物件的方式，我們也看過函數建構子的出現原因是為了模仿其他不能實作原型繼承的程式語言，所以這邊會有點尷尬，在其他的程式語言是使用 `class` 來定義物件該做什麼，然後再用 `new` 來建立物件，而這也就是函數建構子想模仿的事情。

閱讀全文 »

發表於 分類於

今天面試的時候面試官講到一個東西，但發現自己並不是很熟悉，所以這邊查一下資料試著理解成自己的東西並做一下筆記，方便自己回顧。

閱讀全文 »

發表於 分類於

前言

我們對於函數建構子已經有一個基本瞭解了，所以這邊就可以來討論一下內建的函數建構子。

內建的函數建構子

這邊將會開始講一下已經存在於 JavaScript 的內建函數建構子，所以我們可以看看內建的函數建構子有什麼，或許我們已經用了許多次，但不一定瞭解它。

來試著撰寫程式碼瞭解吧。

1
var a = new Number(3);

首先這是一個函數，一個函數建構子，用了首字母大寫的傳統。

圖片

我們可以看到輸出的是一個物件，為什麼?函數建構子會建立什麼?物件。

所以我們可以試試看我們所瞭解的內建建構子。

1
2
3
var a = new Number(3);
var b = new String('Hellow');
var c = new Object({firstname: 'jack'});

圖片

那函數建構子本身有原型，所以我們可以查看原型，而它內建一些方法。

1
2
var a = new Number(3);
Number.prototype

圖片

所以我們可以這樣使用

1
2
var a = new Number(3);
a.toFixed(2)

圖片

另外小提一下 b，並不是字串，也不是純值。

1
var b = new String('Hellow');

圖片

它是一個物件，所以我們才能夠這樣子使用 indexOf()

1
2
var b = new String('Hellow');
b.indexOf('e');

圖片

所以這些內建的函數建構子看起來很像是幫我們建議字串，但其實是物件，且包含了字串。

那其實下面這個做法

1
"Hello".length;

等於這個樣子

1
new String("Hello");

所以說下次若我們看到 new，例如 new Date

1
var a = new Date('2019/05/23');

圖片

我們其實是取得了一個物件，然後使用了 JavaScript 內建提供的方法。

圖片

而這些方法實際是存在於 Date。

圖片

那如果今天我們要自己加入另一個原型呢?

1
2
3
4
5
String.prototype.isLengthGreaterThan = function (limit) {
  return this.length > limit;
}

console.log('jack'.isLengthGreaterThan(3));

圖片

那這時候所有字串就都可以使用 isLengthGreaterThan 這個方法，而這就是原型繼承的強大，許多框架都會這樣做，但是撰寫時要注意不要複寫到原本提供的建構子。

字串可以這樣做，那數字呢?

1
2
3
4
5
6
7
8
9
10
String.prototype.isLengthGreaterThan = function (limit) {
  return this.length > limit;
}

console.log('jack'.isLengthGreaterThan(3));

Number.prototype.isPositive = function () {
  return this.length > 0;
}
console.log(10.isPositive());

圖片

得到了一個錯誤，為什麼?

雖然 JavaScript 會將字串轉換為物件，但數字並不會。

但是可以這樣寫

1
2
3
4
5
Number.prototype.isPositive = function () {
  return this.length > 0;
}
var a = new Number(3);
console.log(a.isPositive());

圖片

所以我們可以替這些原型增加功能，進而方便我們。

圖源

JavaScript 全攻略:克服 JS 奇怪的部分

0%