ECMAScript on 又LAG隨性筆記

你可能都不瞭解的JS變數祕密 - 一文了解無宣告、var、let、const變數細節

Wed, 15 Sep 2021 05:33:00 +0800

本文優先發表於ALPHAcamp

前言

這類問題我被問到不止一次。不得不說JS的變數蠻特別的。新手菜鳥會問，連老鳥也都常搞錯。

更甚者…近日更是聽到一個自稱有五年經驗的軟體工程師稱： var 宣告的變數是全域變數

我知道我身邊的朋友，也有不少可能不清楚，或是沒探究這麼深入，相關文章有但不多。於是乎…感覺我再想拖延，也應該把這篇文章寫出來。

這篇文章對於你寫更好的JS並沒有太多幫助，有許多部分平常根本不太會用到。但卻是非常基礎的概念。儘管不知道，通常按照當前常見規範，程式碼亦不會太糟糕。

這篇文章主要是從一份回覆修改而來。

變數的生存範圍

無關鍵字賦值、var宣告、let宣告最大的差別在於生存區域的不同。無關鍵字賦值 - 這意味著全域變數的宣告，當然你在全域範圍使用var/let宣告也是全域的。只是無關鍵字可能引發意外的情況，像是你預期變數應該是函數區域的：

function printG(){
g = 1
console.log(`printG: `, g)
}
printG() // => printG: 1
console.log(`Global G:`, g) // => Global G: 1

上例中全域情況也取得到在printG函數裏定義的全域變數。這相當於你顯式定義g於全域：

什麼是jQuery？前端框架盛行還需要JavaScript函式庫嗎？

Sun, 05 Apr 2020 09:05:17 +0800

本篇首發於ALPHACamp Blog(2020-03-25)

2020-04-05 更新

前端框架盛行還需要JavaScript函式庫嗎？
如果你想透過本篇文章，直截了當的知道該不該使用jQuery，可能要讓你失望了。
很難說到底應不應該使用jQuery，可能在某些情況下使用jQuery仍是最好的選擇。即使是現在的流行的三大前端框架，也是依照情況與需求使用。
了解jQuery到底是什麼、前端框架是什麼，會比要不要使用jQuery更有意義。

本篇帶你看看我了解的jQuery前世今生

瀏覽器發展歷史上出現過幾次大混戰。儘管後來有了W3C(全球資訊網協會/World Wide Web Consortium)進行標準的制定，各個瀏覽器廠商仍開發各自瀏覽器的「特異功能」吸引使用者與開發者。這些特異功能促使了瀏覽器標準的進步，也照成了開發上的困難。

為解決網路應用中不同平台、技術和開發者帶來的不相容問題，保障網路資訊的順利和完整流通，全球資訊網協會制定了一系列標準並督促網路應用開發者和內容提供者遵循這些標準。¹

2006年1月，jQuery推出了第一個版本，隨後變成為了最受歡迎的JavaScript函式庫之一²。附帶一題，我們現在熟悉的HTML5標準是在2014年正式定稿推出³，即使是現在，每年瀏覽器的標準也是快速地在變動。在後文我會在說明為何開頭我想提到這兩件事情。

什麼是jQuery? 從常見功能來看

jQuery之所以受歡迎，是因為他提供了一系列簡單方便，而且兼容的操作，省去開發人員的部份煩惱。這裡舉幾個簡單的例子：

選取器

現代瀏覽器標準分成三個部份：

HTML
CSS
ECMAScript / JavaScript

其中第三個就是常聽到的JS/Javascript。目前更正式的名稱是ECMAScript，也是今天主要jQuery主要的基礎。不同於瀏覽器腳本(Script)的標準，CSS2在以前就提供豐富易用的選擇器，讓設計人員撰寫樣式表(stylesheet)

7天搞懂JS進階議題(day07-1)-系列目錄

Sat, 29 Feb 2020 07:26:00 +0800

寫了這麼久的JS，你還在物件之前的時代嗎？只有資料、函式可以用，破破的抽象化，不會難以維護？儘管JS起初並不以物件導向設計，但透過原形鏈設計，其仍然可以具有好維護的物件導向特色。本系列從最基礎的this，深入ES6之後的class。

系列目錄

各章節簡介

(第1天) this & bind: 你不能不知道的

物件導向必不可少的，就是如何引用參考自己。

要是自己的錢包都拿不出來，你要怎買個冰棒？

(第2天) new & factory: 如何建立一個新物件

既然是要來物件導向，當然要先來學怎麼建立物件。本節帶你看看如何建立一個新的物件。

(第3天) Function & Object: 關於Prototype Chain繼承

在class之前，必須了解的prototype chain。

JavaScript 是個沒有實做 class 關鍵字的動態語言，所以會對那些基於類別（class-based）語言（如 Java 或 C++）背景出身的開發者來說會有點困惑。（在 ES2015 有提供 class 關鍵字，但那只是個語法糖，JavaScript 仍然是基於原型（prototype-based）的語言）。

(第4天) Class & constructor: 吃語法糖別噎到

7天搞懂JS進階議題(day08) Closure & Private:番外短篇隱私成員

Sat, 29 Feb 2020 06:26:00 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

這篇是臨時起意補的一篇短篇，用於示例如何模擬私有屬性。儘管這可能不是JS主流設計思想方法，但知道相信對你沒壞事。

在第5天-getter & setter: 屬性描述器，曾經看過這樣的例子：

var 神崎家 = class {
constructor(name){
this.__name = `神崎・${name}`;
}
static born(name){
return new 神崎家(name)
}
set name(new_name){
this.__name = `神崎・${new_name}`;
}
get name(){
let first_name = this.__name.substr(0,2),
last_name = this.__name.substr(3, this.__name.length + 1);
return `${first_name}・H・${last_name}`
}
introduce(){
console.log(`Hi~ My name is ${this.name}`)
}
rename(new_name){
this.name = new_name;
return this.name;
}
}

可能會有人問…為什麼__name不直接這樣寫就好:

7天搞懂JS進階議題(day07)-Symbol & Proxy: 以前沒有的

Sat, 29 Feb 2020 05:52:23 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

最後一天，來看兩個特別的類別–Symbol和Proxy。

以前的物件(object)

key只能是字串

在以前，物件的key一定要是基礎字串，不過因為JS語法糖的關係可以不用加引號：

var obj = {
"name": "World",
}
// 等價於

var obj = {
name: "World",
}

如果不是呢？

7天搞懂JS進階議題(day06)-yield & yield*: 生成器

Fri, 28 Feb 2020 09:03:28 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

今天會往物件導向外頭邁出一步。是的，到昨天已經差不多把JS物件導向介紹的差不多了。那今天的主題是什麼呢？生成器(generator)。這個類型的建立與使用，和普通的JS類別有些不同，來看看吧！

生成器(generator)

什麼是生成器(generator)？簡單說就是一個 序列工廠 ，你跟他要東西他就給你東西，直到原料不足無法生產。

7天搞懂JS進階議題(day05)-getter & setter: 屬性描述器

Thu, 27 Feb 2020 09:28:16 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

有了物件然後呢？
今天來說說關於成員(field/attribute/member)背後的屬性。

getter & setter

有一個家族– 神崎家 ，生了一個小孩叫 アリア ，但生下後被りこ偽裝，被發現後重新命名為 アリア。

如有雷同存屬巧合

7天搞懂JS進階議題(day04)-Class & Constructor: 吃語法糖別噎到

Wed, 26 Feb 2020 07:08:31 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

現在你應該已經有發車前的基礎準備了。繫緊安全帶，撈思跡要踩油門加速了！

關於class這個關鍵字，JS將其作為保留字好一段時間，直至ES6標準的制定，再經過瀏覽器漫長的實做，至今才有class的語法糖可以使用。

7天搞懂JS進階議題(day03)-Function & Object: 關於Prototype Chain繼承

Tue, 25 Feb 2020 10:05:11 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

Prototype

有人說：「在寫JVM語言前，你必須先是Java程式開發人員」。
在寫TypeScript前，你還是得先會JavaScript。
[在進階一點(誤)] 在寫任何程式語言前，比必須先會組合語言

在class之前，必須了解的prototype chain。

好拉，上面引言最後一個是來亂的，但是在正式開始寫JS的之前，你還是比需要有 prototype chain 的概念。

JavaScript 是個沒有實做 class 關鍵字的動態語言，所以會對那些基於類別（class-based）語言（如 Java 或 C++）背景出身的開發者來說會有點困惑。（在 ES2015 有提供 class 關鍵字，但那只是個語法糖，JavaScript 仍然是基於原型（prototype-based）的語言）。¹

本節不會立馬就進到原形鏈，在那之前，會先來看看Python、Ruby這類OOP裡同樣有的東西。如果你不是從那來的，可以直接到原形鏈去看。但建議多少還是看一點，有些在JS還蠻常用的。

7天搞懂JS進階議題(day02)-new & factory: 如何建立一個新物件

Mon, 24 Feb 2020 06:08:11 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

既然是要來物件導向，當然要先來學怎麼建立物件。本節帶你看看如何建立一個新的物件。

直接建立

obj0 = {
name: "World",
hello(){console.log(`Hello, ${this.name}`)},
}
obj0.hello();

工廠模式

可以直接建立物件，也可以透過工廠模式建立並初始化物件。

7天搞懂JS進階議題(day01)-This & Bind: 你不能不知道的

Sun, 23 Feb 2020 14:32:37 +0800

本系列文章討論JS 物件導向設計相關的特性。 不含CSS，不含HTML！
建議先有些JS基礎再繼續閱讀。
你也可以看看從零開始遲來的Web開發筆記
雖然是「7天寫作松」挑戰，但同樣可以視為系列後續文章

No CSS! No HTML! No Browser!
Just need programming language

this

物件導向必不可少的，就是如何引用參考自己。

要是自己的錢包都拿不出來，你要怎買個冰棒？

寫過C++、Java對於this這個關鍵字應該不陌生，雖然JS的this有著很大的不同，但再說明之前，為了來自其他地方的同鞋，容我再多提幾個相對應的例子。

來自Python、Ruby、Rust的朋友
你們可能習慣看到的是self。

※ Note: Python可以不使用self；Rust必須顯示宣告self或&self；Ruby則比較像是JS是[隱含宣告](#隱含宣告 vs 明確宣告)self

來自VB和VB.NET的朋友

你們會看到的是Me、My。

7天搞懂JS進階議題(day00)-Oh...開始了......

Sat, 22 Feb 2020 14:28:50 +0800

這系列文章內容會是什麼？

本篇整理了7項ES6之後的相關進階特性(this可能除外)，包含：

this & bind
Prototype chain
class & object
getter, setter
attr
Symbol & Proxy
yield

概述

寫了這麼久的JS，你還在物件之前的時代嗎？只有資料、函式可以用，破破的抽象化，不會難以維護？

儘管JS起初並不以物件導向設計，但透過原形鏈設計，其仍然可以具有好維護的物件導向特色。

目前已經被證實的是，物件導向程式設計推廣了程式的靈活性和可維護性，並且在大型專案設計中廣為應用。 — from Wikipedia

本系列從最基礎的this，深入ES6之後的class。包含：

this
物件導向必不可少。關於隱式宣告與顯示宣告、特殊變數。

prototype 在class之前，必須了解的prototype chain

class class和new。從constructor開始。

getter, setter 有了物件然後呢？關於成員(field/attribute/member)。

ECMAScript on 又LAG隨性筆記

你可能都不瞭解的JS變數祕密 - 一文了解無宣告、var、let、const變數細節

前言

變數的生存範圍

什麼是jQuery？前端框架盛行還需要JavaScript函式庫嗎？

什麼是jQuery? 從常見功能來看

選取器

7天搞懂JS進階議題(day07-1)-系列目錄

系列目錄

各章節簡介

(第1天) this & bind: 你不能不知道的

(第2天) new & factory: 如何建立一個新物件

(第3天) Function & Object: 關於Prototype Chain繼承

(第4天) Class & constructor: 吃語法糖別噎到

7天搞懂JS進階議題(day08) Closure & Private:番外短篇 隱私成員

7天搞懂JS進階議題(day07)-Symbol & Proxy: 以前沒有的

以前的物件(object)

key只能是字串

如果不是呢？

7天搞懂JS進階議題(day06)-yield & yield*: 生成器

生成器(generator)

7天搞懂JS進階議題(day05)-getter & setter: 屬性描述器

getter & setter

7天搞懂JS進階議題(day04)-Class & Constructor: 吃語法糖別噎到

7天搞懂JS進階議題(day03)-Function & Object: 關於Prototype Chain繼承

Prototype

7天搞懂JS進階議題(day02)-new & factory: 如何建立一個新物件

直接建立

工廠模式

7天搞懂JS進階議題(day01)-This & Bind: 你不能不知道的

this

7天搞懂JS進階議題(day00)-Oh...開始了......

這系列文章內容會是什麼？

概述

7天搞懂JS進階議題(day08) Closure & Private:番外短篇隱私成員