9 Proxy 物件
用於定義基本操作的自定義行為（如屬性查詢、賦值、列舉、函式呼叫等）。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

let view = new Proxy({ selected: null }, {
set: function (obj, prop, newval) {
let oldval = obj[prop];
console.log(obj);
console.log(prop);
console.log(newval);
console.log(oldval);
 
if (prop === 'selected') {
if (oldval) {
oldval.setAttribute('aria-selected', 'false');
}
if (newval) {
newval[0].setAttribute('aria-selected', 'true');
}
}

// 預設行為是儲存被傳入 setter 函式的屬性值
obj[prop] = newval;

// 表示操作成功
return true;
}
});


let i1 = view.selected = document.getElementById('item-1');
console.log(i1.getAttribute(
 
'aria-selected')); // 'true'

let i2 = view.selected = document.getElementById('item-2');
console.log(i1.getAttribute('aria-selected')); // 'false'
console.log(i2.getAttribute('aria-selected')); // 'true'

 

10. 類 Class

class Rectangle {
height = 0;
width= 0;
constructor() {
console.log("constructor2");
this
 
.height = 100;
this.width = 100;
}
}

10.1 constructor 建構函式

constructor方法是一個特殊的方法，這種方法用於建立和初始化一個由class建立的物件。
一個類只能擁有一個名為 “constructor”的特殊方法。
如果類包含多個constructor的方法(引數數量無關，名稱一樣就是多個)，則將丟擲 一個SyntaxError 。

10.2 注意事項

函式宣告和類宣告之間的一個重要區別是函式宣告會提升，類宣告不會。你首先需要宣告你的類，然後訪問它，否則像下面的代
碼會丟擲一個ReferenceError：

let p = new Rectangle(); // ReferenceError
class Rectangle {}

10.3 extends

class Rectangle {
height = 0;
width = 0;
constructor() {
console.log("constructor1");
this.height = 100;
this.width = 100;
}
}
let data = new Rectangle();
console.log(data.height);
console.log(data.width);
console.log(); console.log(); console.log();


class Rectangle2 extends Rectangle {

constructor() {
console.log("constructor2");
super();
super.height = -1;
super.width = -1;
}


}

let data2 = new Rectangle2();
console.log(data2.height);
console.log(data2.width);
console.log(); console.log(); console.log();

11. let, conts 資料型別

11.1 let:

那到底let和var有什麼不同呢？

let宣告的變數擁有塊級作用域。也就是說用let宣告的變數的作用域只是外層塊，而不是整個外層函式。

let宣告仍然保留了提升的特性，但不會盲目提升。在runTowerExperiment這個示例中，通過將var替換為let可以快速修復問題
，如果你處處使用let進行宣告，就不會遇到類似的bug。

let宣告的全域性變數不是全域性物件的屬性。這就意味著，你不可 以通過window.變數名的方式訪問這些變數。它們只存在於一個不
可見的塊的作用域中，這個塊理論上是Web頁面中執行的所有JS程式碼的外層塊。

形如for (let x...)的迴圈在每次迭代時都為x建立新的繫結。

這是一個非常微妙的區別，拿我們的會說話的貓的例子來說，如果一個for (let...)迴圈執行多次並且迴圈保持了一個閉包，那
麼每個閉包將捕捉一個迴圈變數的不同值作為副本，而不是所有閉包都捕捉迴圈變數的同一個值。

所以在會說話的貓示例中，也可以通過將var替換為let修復bug。

這種情況適用於現有的三種迴圈方式：for-of、for-in、以及傳統的用分號分隔的類C迴圈。

let宣告的變數直到控制流到達該變數被定義的程式碼行時才會被裝載，所以在到達之前使用該變數會觸發錯誤。舉個例子：

function update() {
console.log("當前時間:", t); // 引用錯誤（ReferenceError）
...
let t = readTachymeter();
}

11.2 conts :

ES6引入的第三個宣告類關鍵詞與let類似：const。

const宣告的變數與let宣告的變數類似，它們的不同之處在於，const宣告的變數只可以在宣告時賦值，不可隨意修改，否則會導
致SyntaxError（語法錯誤）。

const MAX_CAT_SIZE_KG = 3000; // 正確

MAX_CAT_SIZE_KG = 5000; // 語法錯誤（SyntaxError）
MAX_CAT_SIZE_KG++; // 雖然換了一種方式，但仍然會導致語法錯誤