Cookie、Session Storage、Local Storage差別

Cookie ─ 識別用戶

An HTTP cookie (web cookie, browser cookie) is a small piece of data that a server sends to the user’s web browser. The browser may store it and send it back with the next request to the same server.

Cookie 是伺服器傳送到使用者瀏覽器的一個”小”資料空間，瀏覽器可以透過 Cookie 儲存，在下次請求時回傳。

[MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies

Promise

promise 主要是用來解決非同步的行為，在未確認的時候會在一個 未確認狀態(pending) 的狀態，等到非同步的事件處理完成後才會進入 已確認的狀態(settled)。

已確認狀態分為：

• 已實現狀態(fulfilled)

已實現狀態會透過 resolve 這個參數來回傳一個結果，可以用 then 來做接收。

• 已否決狀態(rejected)

已否決狀態會透過 reject 這個參數來回傳一個結果，可以用 catch 來做接收。

箭頭函式

1
2
3
4

let callName = function (someone) {
    return '我是 ' + someone
};
console.log(callName('小明')); // 我是 小明

轉成 箭頭函式語法 ↓ ↓ ↓

1
2

let callName = (someone) => '我是 ' + someone;
console.log(callName('小明')); // 我是 小明

當箭頭函式的程式碼為表達式時，不加 {} 的時候會自動加上 return，且只有一行時可以不加 {} 。

let 與 const 暫時性死區(TDZ)

1. let 一樣會有創造階段
2. 但是從創造到執行階段會出現暫時性死區(TDZ)，這個區域無法呼叫該變數
3. 有創造到執行的概念，但是它不會預先出現 undefined 而是會跳出 Error

文件不會表明這與 var 的 hoisting 相同

Getter 與 Setter，賦值運算不使用函式

setter - 存值的方法

1
2
3
4
5
6
7
8
9
10

var wallet = {
	total: 100,
	set save (price){
        this['total'] = this['total'] + price/2;
	}
};

wallet['save'] = 300;

console.log(wallet['total']);  // 250

wallet['save'] = 300; 這邊右邊的 300 會傳入 price 這個參數內。

這裡並不是用函式的方式來執行setter，而是用賦值的方式。

屬性列舉與原型關係

1
2
3
4
5
6
7
8
9
10
11

function Person(e) {};
Person['prototype']['name'] = '人類';

var casper = new Person();
casper['a'] = undefined;

console.log(casper);

console.log(casper.hasOwnProperty('a'));
console.log(casper.hasOwnProperty('b'));
console.log(casper.hasOwnProperty('name'));

就算我們把屬性的值設定為undefined，屬性依舊是存在的，只是它的值是undefined。

hasOwnProperty 是對當前的物件去找屬性，不會去找原型的屬性，所以hasOwnProperty('name')這裡會顯示false。

物件擴充的修改與調整

這個章節一共會教三個物件方法：

• preventExtensions - 防止擴充
• seal - 封裝
• Freeze - 凍結

屬性特徵是什麼？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Object.defineProperty
// 屬性，調整屬性特徵
// 1. 值、 2. 可否寫入、 3. 可否被刪除、 (物件, '屬性', '參數');
4. 可否被列舉
// Object.defineProperty
var person = {
    a: 1,
    b: 2,
    c: 3
};

console.log(person);  // {a: 1, b: 2, c: 3}

Object.defineProperty(person, 'a', {
    // 1. 值
    value: 4,
    // 2. 可否寫入
    writable: true, //預設為 true
    // 3. 可否被刪除
    configurable: true, //預設為 true
    // 4. 可否被列舉
    enumerable: true //預設為 true
});

console.log(person);  // {a: 4, b: 2, c: 3}

這邊可以看到 person['a'] 的值已經被改寫了。

原型鍊、建構函式整體結構概念

原型鍊是實體可以繼承原型，而原型又可以繼承在它之上的原型，直到最頂層級(null)為止，而null也是原型鍊的最後一個鏈結。

就像下面這張圖 ↓

使用 Object.create 建立多層繼承

這邊我們先看到基本的層級 ↓

1
2
3
4
5
6
7
8
9
10
11
12

var a = [];
// Object > Array > a(實體)

function Dog(name, color, size) {
	this['name'] = name;
	this['color'] = color;
	this['size'] = size;
};

var Bibi = new Dog('比比', '棕色', '小');
console.log(Bibi);
// Object > Dog > Bibi(實體)

如果我們想要在Dog前面新增一個層級Object > Animal > Dog要怎麼做呢？