You don’t know JS（Kyle Simpson）

# 章节1. 什么是JS

技术指导委员会 TC39

向后兼容&Babel&Polyfill

// 转译前
if (something) {
    let x = 3;
    console.log(x);
}
else {
    let x = 4;
    console.log(x);
}
// Babel转译后
// 只有当应用程序需要在支持 ES6 之前的 JS 环境中运行时，才需要转译
var x$0, x$1;
if (something) {
    x$0 = 3;
    console.log(x$0);
}
else {
    x$1 = 4;
    console.log(x$1);
}

// 不在原型链上，新增到原型链上
if (!Promise.prototype.finally) {
    Promise.prototype.finally = function f(fn){
        return this.then(
            function t(v){
                return Promise.resolve( fn() )
                    .then(function t(){
                        return v;
                    });
            },
            function c(e){
                return Promise.resolve( fn() )
                    .then(function t(){
                        throw e;
                    });
            }
        );
    };
}

关于解析、编译。

1. 解析（Parsing）： JavaScript代码首先被解析器（Parser）解析成抽象语法树（AST），解析器会将代码分析成语法单元，并构建出相应的AST。JavaScript在运行时会逐行解释和执行代码，这意味着JavaScript引擎会一边解析代码一边执行，而不是提前将代码转换为机器码。

2. 编译（Compilation）： 接下来，AST会被编译器（Compiler）编译成中间表示形式（IR）。这个IR通常是字节码或其他中间表示形式，它类似于机器码，但不是直接可执行的。这个过程可能会包括一些优化步骤，例如内联函数、常量折叠等。

3. 即时编译（Just-In-Time Compilation）： 在某些JavaScript引擎中，IR会被进一步编译成机器码，这个过程称为即时编译（JIT Compilation）。即时编译器（JIT Compiler）将IR转换为与特定硬件平台兼容的机器码，以便在运行时直接执行。这个过程通常是延迟的，只有在代码需要执行时才会进行。

4. 执行（Execution）： 最后，生成的机器码会被JavaScript引擎执行。执行过程中，引擎会根据需要调用相应的机器码，以执行相应的操作。这个阶段也可能包括一些优化和调整，以适应实际的执行情况。

关于Web Assembly

严格模式

# 章节2. Surveying JS

每个文件都是一个独立的程序

Value

Arrays And Objects

var me = {
	first: "Kyle"、
	last： "Simpson"、
	age：39,
  hobby： [ "JS", "Table Tennis" ].
};

值类型

typeof 42; // "number"
typeof "abc"；// "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"
typeof { "a"： 1 }; // "object"
typeof [1,2,3]; // "object"
typeof function hello(){}; // "function"

值类型的定义

var adult = true;

if (adult) {
    var myName = "Kyle";
    let age = 39;
    console.log("Shhh, this is a secret!");
}

console.log(myName);
// Kyle

console.log(age);
// Error!

函数

function awesomeFunction(coolThings) {
    // ..
    return amazingStuff;
}

// let awesomeFunction = ..
// const awesomeFunction = ..
var awesomeFunction = function(coolThings) {
    // ..
    return amazingStuff;
};

/**
* whatToSay 持有的对象中包含对三个函数（greeting()、question() 和 answer()）的引用
*/
var whatToSay = {
    greeting() {
        console.log("Hello!");
    },
    question() {
        console.log("What's your name?");
    },
    answer() {
        console.log("My name is Kyle.");
    }
};

whatToSay.greeting();
// Hello!

How We Organize in JS

class Page {
    constructor(text) {
        this.text = text;
    }

    print() {
        console.log(this.text);
    }
}

class Notebook {
    constructor() {
        this.pages = [];
    }

    addPage(text) {
        var page = new Page(text);
        this.pages.push(page);
    }

    print() {
        for (let page of this.pages) {
            page.print();
        }
    }
}

// instances of the Page class are created.
var mathNotes = new Notebook();
// Behavior (methods) can only be called on instances
mathNotes.addPage("Arithmetic: + - * / ...");
mathNotes.addPage("Trigonometry: sin cos tan ...");

mathNotes.print();

var YDKJS = new Book({
    title: "You Don't Know JS",
    author: "Kyle Simpson",
    publishedOn: "June 2014",
    publisher: "O'Reilly",
    ISBN: "123456-789"
});

YDKJS.print();
// Title: You Don't Know JS
// By: Kyle Simpson
// June 2014
// Publisher: O'Reilly
// ISBN: 123456-789

var forAgainstLet = new BlogPost(
    "For and against let",
    "Kyle Simpson",
    "October 27, 2014",
    "https://davidwalsh.name/for-and-against-let"
);

forAgainstLet.print();
// Title: For and against let
// By: Kyle Simpson
// October 27, 2014
// https://davidwalsh.name/for-and-against-let

// 1. 类的定义与使用
// 定义类
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 实例化类
const person = new Person('Alice');
person.greet();  // 输出: Hello, my name is Alice

// 2.经典模块工厂函数
function createPerson(name) {
  const privateName = name;
  return {
    greet() {
      console.log(`Hello, my name is ${privateName}`);
    }
  };
}

// 3. 创建模块实例
const person = createPerson('Alice');
person.greet();  // 输出: Hello, my name is Alice

// 定义模块 (person.js)
export function createPerson(name) {
  return {
    greet() {
      console.log(`Hello, my name is ${name}`);
    }
  };
}

// 使用模块
import { createPerson } from './person.js';
const person = createPerson('Alice');
person.greet();  // 输出: Hello, my name is Alice

章节三：挖掘 JS 的根源

迭代器

消费迭代器

// given an iterator of some data source:
var it = /* .. */;

// loop over its results one at a time
for (let val of it) {
    console.log(`Iterator value: ${ val }`);
}
// Iterator value: ..
// Iterator value: ..
// ..

// spread an iterator into an array,
// with each iterated value occupying
// an array element position.
var vals = [ ...it ];

// spread an iterator into a function,
// call with each iterated value
// occupying an argument position.
doSomethingUseful( ...it );

可迭代程序

var arrCopy = [ ...arr ];
var greeting = "Hello world!";
var chars = [ ...greeting ];

chars;
// [ "H", "e", "l", "l", "o", " ",
//   "w", "o", "r", "l", "d", "!" ]

var buttonNames = new Map();
buttonNames.set(btn1,"Button 1");
buttonNames.set(btn2,"Button 2");

for (let [btn,btnName] of buttonNames) {
    btn.addEventListener("click",function onClick(){
        console.log(`Clicked ${ btnName }`);
    });
}

Closure