你所不知道的 JS 筆記&心得(之一)

這幾天閱讀了 You Don’t Know JS 系列,覺得如獲至寶,作者以淺顯易懂的方式,介紹了很多 JS 的核心知識與常常我們會誤解的概念,非常推薦給想深入探討 JavaScript 這門程式語言的朋友(尤其是第二本書之後)。

以下摘要一些本書中提到我覺得 JS 重要或是需要注意的概念:

1. You Don’t Know JS: Up & Going

Chapter 1: Into Programming (用 JS 簡介程式語言)

  • 從 programming 層級開始介紹,解釋 compiler,介紹 statement、expression …概念。
  • “The best way to learn how to write code is to write code.”

Chapter 2: Into JavaScript (介紹 JS 語言)

  • 概略介紹 values, types, function closures, this, and prototypes。
  • Typeof null 是 Object。
a = null;
typeof a; // "object" -- weird, bug
  • 在 JS 中 Array 其實是 specialized versions of the object type。
  • polyfill 一詞是由 Remy Sharp 提出,表示在不支援的版本中,使用用一段 code 提供新版本已有的一些功能。
if (!Number.isNaN) {
Number.isNaN = function isNaN(x) {
return x !== x;
};
}
  • Transpiling 一詞表示,將新版本的 JS 轉成舊版本的一種方式,例如:Babel。

Chapter 3: Into YDKJS

  • JS 其實不完全直譯,因為 JS 引擎其實在執行程式碼前早(或是過程)就會先編譯。
  • We don’t know JavaScript, yet. But we will!

2. You Don’t Know JS: Scope & Closures

Chapter 1: What is Scope?

  • Compile 負責宣告變數,當JS 引擎遇到變數的時候查詢變數是否在 Scope 中。
  • RHS look-up
  • LHS look-up
  • Engine/Scope Conversation
function foo(a) {
console.log( a ); // 2
}
foo( 2 );
Engine: Hey Scope, I have an RHS reference for foo. Ever heard of it?
Scope: Why yes, I have. Compiler declared it just a second ago. He’s a function. Here you go.
Engine: Great, thanks! OK, I’m executing foo.
Engine: Hey, Scope, I’ve got an LHS reference for a, ever heard of it?
Scope: Why yes, I have. Compiler declared it as a formal parameter to foo just recently. Here you go.

Chapter 2: Lexical Scope:

  • Lexical Scope 相對於 Dynamic Scope,Lexial Scope 是在 Complier 執行 lexing 就會決定。
  • JS 是 Lexical Scope。
Javascript 是以 Function 為 Scope (ES5 之前)

Chapter 3: Function vs. Block Scope

  • JS 是以 Functional 區分 Scope。
  • Scope 幫助封裝設計,隱藏資料變數。
  • 使用匿名函數(Anonymous functions)缺點 1. 不能在 Stack trace 中顯示,不好 debug 2. 不能參照 3. 可辨識性不佳。
  • Javascript ES5 之前唯一的 Block Scope:try — Catch,With Statement。
  • Block Scope 好處:Garbage Collection。

Chapter 4: Hoisting

  • JS Complier 階段會做變數提升,自動將宣告往前移動。
  • 舉例來說,以下在 JS ES5 以前是合法的,會自動把 var a 移動到最前面。
a = 2;

var a;

console.log( a );
  • 除了變數之外,function 宣告也是一種,且相同名稱時, function 宣告優先度大於變數。

Chapter 5: Scope Closure

closure is all around you in JavaScript, you just have to recognize and embrace it
Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.

舉列:

function foo() {
var a = 2;

function bar() {
console.log( a );
}

return bar;
}

var baz = foo();

baz(); // 2 -- Whoa, closure was just observed, man.
Like what you read? Give Chi-Hsuan Huang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.