一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

JavaScript的模块机制

> 写在最前面，为什么已经入行一年半才写这样一篇文章呢？其实并不是自己平时开发没有使用，但是很多时候自己的代码会有些“四不像”，各种风格糅杂在一起，因此写这么一篇文章，从编程范式的角度规范自己的代码。

### 面向对象的特性

面向对象就要提到以下的“名词”，那么JavaScript应该如何实现这些呢？

- 类与对象
- 封装性
- 继承
- 多态
- 抽象性

### 类与对象

> 基于原型的编程不是面向对象编程中体现的风格，且行为重用（在基于类的语言中也称为继承）是通过装饰它作为原型的现有对象的过程实现的。这种模式也被称为弱类化，原型化，或基于实例的编程。

而在JavaScript中，实现的方式就是通过函数内置的Prototype属性完成这种 __原型继承__ 。

#### 对象

JavaScript内的对象，其实就是Object，那么Object有两种方法可以用来创建：

```javascript
var Person = {}; // 字面量
var Person = new Object(); // 使用new运算符
```

那么他们有什么区别呢？首先要说的就是new，new做了哪些呢？这里引用MDN的解释：

> 1. 创建一个空的简单JavaScript对象（即{}）；
> 2. 链接该对象（即设置该对象的构造函数）到另一个对象 ；
> 3. 将步骤1新创建的对象作为this的上下文 ；
> 4. 如果该函数没有返回对象，则返回this。

不难发现，new的第一步其实和字面量方式完全一致，所以，new运算符的链接与设定this其实是最核心的不同点。

我们一般不常用`new Object()`，而直接用字面量方式的原因，其实是因为他们的prototype都指向了null。

正是因为这样，我们在日常的使用中，如果希望通过OOP实现逻辑，应该通过new的方式来进行，因为他可以继承我们期望的对象。

##### 代码风格

JavaScript有很多的引用类型数据，因此在面向对象时，要注意分离自有的部分与暴露的方法。

```javascript
function Person (name){
	this.name = name;
}
Person.prototype.sayIntro = function() {
	return 'Hello, my name is ' + name + '.'
}
var person1 = new Person('peter'); // Person是一个构造器。
person1.sayIntro(); // 为什么可以调用prototype上的方法呢？参见“原型链”
```

##### `Object.create()`

> Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

Object.create()是ES2015规范内的新方法，同时在ES5.1进行了加强，它可以polyfill使得我们可以在生产中尽可能使用来让我们的代码更为清晰。

其内部核心的实现其实在JS高程有对应的代码：

```javascript
// 在自己的实现里要注意当前环境是否支持create，以及目标是否可以作为create的对象。
Object.create = function (proto, propertiesObject) {
  function F() {}
  F.prototype = proto;
  return new F();
};
```

那么如果使用`Object.create`应该如何实现继承呢？下面是MDN的一个例子：

```javascript
// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype); // create的目标是父类的prototype，注意，JS的继承是原型继承。
Rectangle.prototype.constructor = Rectangle; // 修复constructor指向
```

上面是一个单继承的例子，如果我们希望做多继承，其实只需要修改Rectangle.prototype，让其的赋值为其多继承的对象的prototype的合并(Object.assign)。需要注意需要在子类内部显式绑定this。

#### 类

ES6最大的变化就是对Class的支持，虽然JS只能通过原型继承，但是Class的出现使得JS的OOP“看起来更像那么回事了”。

为什么说看起来呢？目前还没有实现私有与公有特性，它只是原来构造模式的一个语法糖，但是，它也有它的不同之处。

- Class内部只是原型的实现，在实际使用时还是需要通过new运算符执行构造函数；
- 类声明不能被提升；
- 类声明中的代码自动运行在严格模式下；
- __类中的所有方法都是不可枚举的__ ；
- 每个类都有一个`[[construct]]`的方法，constructor方法默认返回实例对象（即this）；

##### 派生类

```javascript
class HelloWorld extends React.Component {}
```

上面这种写法在React的开发中非常常见，extends是一个派生类， __在派生类中，如果使用了构造方法，就必须使用super()__ ，在构造函数中访问this之前要调用super()， __负责初始化this__ 。

```javascript
class Shape {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class Rectangle extends Shape {
  constructor() {
    super();  // 这里的super可以作为函数，也可以作为特殊的对象（无法直接输出，但是可以设置属性）。
  }
}
```

### 继承

见上面对“类与对象”内继承的实现，核心在于prototype __原型继承模式__ 。

### 抽象

> 抽象是允许模拟工作问题中通用部分的一种机制。这可以通过继承（具体化）或组合来实现。
> JavaScript通过继承实现具体化，通过让类的实例是其他对象的属性值来实现组合。

> JavaScript Function 类继承自Object类（这是典型的具体化） 。Function.prototype的属性是一个Object实例（这是典型的组合）。

### 多态

其实多态并没有太多好说的，核心在于“原型链”：如果你在子类声明了同名的属性和方法，那么就不会在原型链上向上查找。

JavaScript面向对象编程(ES6版本)

前端的笔试题，离不开妙用数组解决存储和顺序，本文复习一下数组的方法，加深印象，补充一些妙用。

## 方法概览

1. 转换
	- toLocalString()
    - toString()
    - valueOf()
    
2. 栈方法
	- pop() `array.pop() // 返回pop的元素`
    - push() `array.push(item1, item2, ..., itemX) // 返回数组新长度`
    
3. 队列方法
	- push() `array.push(item1, item2, ..., itemX) // 返回数组新长度`
    - shift() `array.shift() // 返回移除的元素`
    
4. 重排序
	- sort() `array.sort(sortFunction) // 返回数组的引用，不产生新的副本`
    - reverse() `array.reverse() // 返回数组的引用，不产生新的副本`
    
5. 操作方法
	- concat() `array1.concat(array2,array3,...,arrayX) // 返回新数组`
    - slice() `array.slice(start, end) // 返回新的数组`
    
      > array.slice()返回数组的复制。
        
    - splice() `array.splice(index,howmany,item1,.....,itemX) // 如果从 array 中删除了元素，则返回的是含有被删除的元素的数组。`

6. 位置方法
	- indexOf() `array.indexOf(item,start) // 返回第一个出现的位置，如果未找到返回 -1`
    - lastIndexOf() ` // 返回最后一个出现的位置，如果未找到返回 -1`
    
7. 迭代方法
	- every() `array.every(function(currentValue,index,arr), context) // context为this的值，下同。返回布尔值，如果所有元素都通过检测返回 true，否则返回 false。`
    - filter() `array.filter(function(currentValue,index,arr), context) // 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。`
    - some() `array.some(function(currentValue,index,arr) ,context) // 返回布尔值。如果数组中有元素满足条件返回 true，否则返回 false。`
    - forEach() `array.forEach(function(currentValue, index, arr), context) // 返回undefined！`
    - map() `array.map(function(currentValue,index,arr), context) // 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。`
    
8. 归并方法
	- reduce() `array.reduce(function(total, currentValue, currentIndex, arr), initialValue) // 返回计算结果，例如求和。`
    - reduceRight() `array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue) // 返回计算结果。`
    
9. 新方法
	- keys() `array.keys() // [object Array Iterator]`
    - includes() `arr.includes(searchElement, fromIndex?) // 返回布尔值。如果找到指定值返回 true，否则返回 false。`
    - from() `array.from(object, mapFunction, context) // 返回数组对象。用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。`
    - findIndex() `array.findIndex(function(currentValue, index, arr), context) // 返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。` 
    - entires() `array.entries() // 返回数组迭代对象。`

做前端笔试题前，需要复习的数组方法

_本篇开始将一部分浏览器与Node.js环境相关的知识点补充进来_

### 超时与间歇调用

> JavaScript是单线程语言（后期加入额外线程Worker）

需要注意的是，使用定时器对于队列而言，不是在指定时间立即执行，而是 __在指定时间被加入到队列中__ ，如果队列内没有其他任务，则表现为“立即执行”

如果在浏览器端，需要效果比较好的定时执行，可以通过rAF实现。

### DocumentFragment

使用DocumentFragment优化DOM操作。

### 浏览器的重绘与重排

详见另一篇[文章](https://blog.sparking.app/post?id=fe%252F%25E6%25B5%258F%25E8%25A7%2588%25E5%2599%25A8%25E7%259A%2584%25E9%2587%258D%25E7%25BB%2598-repaint-%25E4%25B8%258E%25E9%2587%258D%25E6%258E%2592-reflow-%25E6%259C%25BA%25E5%2588%25B6 "重绘与重排")

### 事件

现在使用MVVM框架多了，减少了直接操作事件，但是还是有必要列出复习的。

#### 1. 事件流

三个阶段：

* 事件捕获
* 处于目标
* 事件冒泡

#### 2. DOM2级事件处理程序

* `addEventListener(eventName, fn, needCapture?)`
* `removeEventListener`

remove操作需要注意，fn不能是一个匿名函数，这时remove才有效。

#### 3. 事件对象

event对象通常包括以下：

* bubbles
* cancelable
* currentTarget
* defaultPrevented(DOM Level-3)
* detail
* eventPhase(处于流的阶段，1-捕获，2-处于目标，3-冒泡)
* preventDefault() (取消默认行为，注意区分)
* stopImmediatePropagation() (DOM Level-3)
* stopPropagation() (取消事件的进一步捕获或冒泡)
* target
* trusted
* type
* view

#### 4. 事件委托

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

面试题：

Q：用原生JS实现jQuery的on和off效果？

A:

#### 5. 事件模拟

可以用 `document.createEvent` 模拟一些鼠标或者键盘事件，但是需要实机测试，例如Chrome对模拟的点击事件就有比较严格的限制。

#### 6. 拖放事件

HTML5 新增的事件，可以用来作为一些特殊的交互，比如拖放上传等。

#### 7. JSON

注意，以下都是 **合法的** JSON：

* **简单值**
* 对象
* 数组

> `JSON.stringify(value[, replacer [, space]])` 可以通过传入第二个参数进行JSON过滤，第二个参数支持数组或者函数。第三个参数不常用，一般用于控制缩进。

### XHR(XMLHttpRequest)

状态值：

* 0，未初始化；
* 1，启动（已经调用open但是未send）；
* 2，发送；
* 3，接收；
* 4，完成。

#### 1. FormData

表单提交，可以上传文件。

#### 2. Progress事件

用于监测进度，可以用HTML5实现上传进度。

#### 3. 跨域CORS

> 跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器  让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。

> 出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。

1. 不会引发CORS的简单请求：

   ![MDN-CORS](https://cdn.arc-light.fun/TV9IYt/CORS_simple-request.png)
2. 需要进行预检（Preflight）的请求：

   ![MDN-CORS](https://cdn.arc-light.fun/T9Q56f/CORS_preflight-request.png)
3. 携带身份凭证（Cookie）：

   ![MDN-CORS](https://cdn.arc-light.fun/WDX1n8/CORS_with-credit.png)
   
### 高级技巧：节流与防抖

节流：节约流量——无论触发多少次，指定间隔内只能触发一次；
防抖：防止抖动——中间触发N次都以最后一次开始计算时间，待指定间隔后触发。

### 数据存储

#### 1. Cookie

Cookie数量限制不一，在20-50之间，尺寸一般在4096B

#### 2. Storage

localStorage一般会设置每个来源5MB，部分浏览器只有2.5MB；

SessionStorage同样一般为5MB，部分浏览器为2.5MB；

#### 3. IndexedDB & WebSQL

浏览器支持情况不定，需要根据具体需求使用。

"Speaking JavaScript"阅读笔记（附加篇）

_本章开始写函数与对象，内容相对较多单起一章专门记录_

### 10. 函数

JavaScript中的函数一共有三种形式：

* 非方法的函数（“普通函数”）；
* 构造器；
* 方法；

因此我们创建函数一共有三种：

* 通过函数表达式；
* 通过函数声明；
* 通过Function()构造器（不推荐）；

所有的函数都是对象、Function构造器的实例。

具名函数表达式只能在函数表达式的内部被访问。

在函数的内部，有两个特殊的对象，arguments和this。

> this引用的值是函数数据以执行的环境对象——或者也可以说是this值。由于在调用函数之前，this的值并不确定，因此this可能会在代码执行过程中引用不同的对象。

> ECMAScript中的所有参数传递的都是值，不可能通过引用传递参数。

#### 10.1. 控制函数调用，`call()`, `apply()`和`bind()`

_bind()方法非原生，本节末尾会给出使用apply实现bind。_

使用：

```javascript
func.apply(thisValue, argArray)
func.call(thisValue, arg1, ..., argN)
func.bind(thisValue, arg1, ..., argN) // 创建一个新函数，会调用func，再绑定this到新的thisValue
```

一个非常有趣的陷阱：

```javascript
['1', '2', '3'].map(parseInt) // [1, NaN, NaN]
```

这是因为parseInt只接受一个参数，map的期望函数签名`function(element, index, array)`，而parseInt的签名则是`parseInt(string, radix?)`, 这会导致radix也被传入。

#### 10.1.1 实现bind

_本节的实现来自JS高程_

1. apply

```javascript
function bind(fn, context) {
  return function () {
    return fn.apply(context, arguments);
  }
}
```

1. apply的柯里化版本

```javascript
function bind(fn, context) {
  var args = Array.prototype.slice.call(arguments, 2);
  return function () {
    var innerArgs = Array.prototype.slice.call(arguments);
    var finalArgs = args.concat(innerArgs);
    return fn.apply(context, finalArgs);
  }
}
```

### 11. 变量：作用域、环境和闭包

> 全局执行环境是最外围的一个执行环境，每个函数都有自己的执行环境，eval也会创建一个独立的执行环境。

#### 11.1. 作用域

JavaScript的变量是函数级作用域的，**只有函数可以产生新的作用域**。

JavaScript会提前所有的变量声明，它会把所有的声明移到直接作用域的最前面。

#### 11.2. IIFE

* 它是立即执行的；
* 它必须是一个表达式；
* 连续的两个IIFE之间需要分号，不然会导致解析错误。

IIFE也可以前缀运算符，比如!, void都是可以的，避免了分号的问题。

```javascript
var File = function () { // open IIFE
	// do something...
}(); // close IIFE
```

#### 11.3. 全局对象

全局对象是有原型的。

#### 11.4. 环境

无论一个函数被调用多少次，它总要访问它自己（最新）的本地变量和外部作用域的变量。当多次调用自己的时候，每次调用都会创建一个新的环境。

通过闭包可以使得函数可以维持其创建时所在的作用域。但如果创建时受到了当前作用域变量的影响，会存在环境公用的影响。

#### 11.5. 垃圾收集

两种垃圾收集机制，__标记清除__，__引用计数__，两种都有使用，标记清除更为常用，引用计数一般用于COM对象。

#### 11.6. 闭包

> __闭包__ 是指有权访问另一个函数作用域中的变量的函数。

创建闭包的常见方式，就是在一个函数内部创建另一个函数。

闭包只能取得包含函数中任何变量的最后一个值。

#### 11.7. 闭包中的this

在闭包中使用this对象会导致一些问题，因为this对象是在运行时基于函数的执行环境绑定的。

> 如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素将无法被销毁。

### 12. 对象与继承

JavaScript中的面向对象编程（OOP）分为以下几层：

* 第一层，单一对象的面向对象；
* 第二层，对象间的原型链；
* 第三层，作为实例工厂的构造函数，类似于其他语言的类；
* 第四层，子类，通过继承已有的构造函数，创建新的构造函数。

#### 12.1. 第一层，单一对象的面向对象

##### 12.1.1 属性

属性分为三种：

1. 属性
2. 访问器
3. 内置属性（规范将内置属性的键置于方括号中，例如`[[Prototype]]`）

delete只影响一个对象的直接“自有”的，非继承的属性，delete成功则返回true，如果是自有属性但不能删除则返回false。

##### 12.1.2 对象字面量

```javascript
var jane = {
  name: 'jane',
  describe: function () {
    return 'Person named ' + this.name;
  }
}
```

#### 12.2. 第二层，对象间的关系——原型链

```javascript
var proto = {
  describe: function () {
    return 'name: ' + this.name;
  }
};
var obj = {
  [[Prototype]]: proto, // 实际不可访问
  name: 'obj'
}
```

对象obj从proto继承了describe属性。

当通过obj访问属性时，JS首先从本对象中查找，接着是它的原型，以及它原型的原型。

在ES5后，我们可以通过`Object.create(proto, propDescObj?)`完成使用给定prototype创建新对象。

检测时，可以使用：

```javascript
Object.prototype.isPrototypeOf(obj); // 会检索整个链上
```

#### 12.2.1 特殊属性__proto__

某些JavaScript引擎有特殊属性可以获取和设置对象的原型：`__proto__`。这样可以直接访问`[[Prototype]]`。其在ES6内将会作为标准。

方法区分：

* `Object.getOwnPropertyNames(obj)` 返回obj的所有 **自有** 的属性键。
* `Object.keys(obj)` 返回obj的所有 **可枚举** 的属性键。

#### 12.3 访问器

```javascript
var obj = {
  get foo() { // 取值调用，getter
    return 'getter';
  },
  set foo(value) { // 赋值调用，setter
    console.log('setter: '+value);
  }
}
```

#### 12.4 属性特性和属性描述符

* Value
* Writable
* Get
* Set
* Enumerable
* Configurable

#### 12.5 复制对象

复制要保证：

1. 拷贝必须具有与原对象相同的原型；
2. 拷贝必须具有与原对象相同的属性和特性；

```javascript
function copyObject(orig) {
  // copy prototype
  var copy = Object.create(Object.getPrototypeOf(orig));
  // copy all properties
  copyOwnPropertiesFrom(copy, orig);
  return copy;
}

function copyOwnPropertiesFrom(target, source) {
  Object.getOwnPropertyNames(source).forEach(function (propKey) {
    var desc = Object.getOwnProperyDescriptor(source, propKey);
    Object.defineProperty(target, propKey, desc);  // 使用获取的属性描述符创建target的自有属性
  });
  return target;
}
```

#### 12.6 第三层，作为实例工厂的构造函数，类似于其他语言的类

Speaking JavaScript内推荐的构造函数写法：

> ```javascript
> function Person(name) {
>   this.name = name;
> }
> Person.prototype.describe = function () {
>   return 'Person named ' + this.name;
> };
> ```

经典面试内容：
Q：new操作符都做了什么？
A：

1. 创建一个新对象；
2. 将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
3. 执行构造函数中的代码（为这个新对象添加属性）；
4. 返回新对象。

> 引用类型与基本包装类型（“装箱”）的主要区别就是对象的生存期，使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。

Speaking JavaScript内对这个过程的描述：

> 首先设置行为：创建一个新对象，其原型为Person.prototype;
> 然后设置数据：Person接受对象作为隐式参数this，并添加实例属性。

代码模拟如下:

```javascript
function newOperator(Constr,args) {
  var thisValue = Object.create(Constr.prototype);
  var result = Constr.apply(thisValue, args);
  if(typeof result === 'object' && result !== null) {
  	return result;
  }
  return thisValue;
}
```

每个函数包含一个实例原型对象，它的constructor属性指回函数。

### 12.7 泛型方法：借用原型方法

```javascript
Wine.prototyte.incAge.call(john, 3) // 类似于这样的模式
```

对于泛型方法，最常用的是处理一些“Array like”的元素，借用数组方法进行处理。

通过 `Array.isArray` 也可以作为数组的判断，能够区分Array-like。

"Speaking JavaScript"阅读笔记（三）

### 2. JavaScript相关的一些事

#### 2.1. JavaScript的性质

- 它是动态的；
- 它是动态类型； _（即便引入TypeScript协助开发也只能协助推导类型。）_
- 它是函数式和面向对象的；

### 3. JavaScript语言深入

#### 3.1 语句

凡是在JavaScript期望语句的地方都可以写表达式，不能在需要表达式的地方使用语句。

如果使用二义表达式（语法类型是二义的），为了避免二义性，在解析过程中，JavaScript不能使用对象字面和函数表达式作为语句，即不能以下面的内容开头：
- '{}'；
- function关键词； _(所以IIFE模式需要将匿名函数放在一个括号内，如果不使用这个括号， JS会认为这是一个函数声明，而函数声明是不可以匿名的，而函数定义又不能立即执行。)_

#### 3.2 数字

刷题曾经遇到过一个这样的问题：

```javascript
// 以下那种写法能够正确输出？
1.toString()  // 唯一一种不能正常输出的。
1..toString()
1 .toString()
(1).toString()
1.0.toString()
```

之所以存在这种问题，是因为JS内所有数字都是以浮点数存储的，这里紧跟的'.'会被认为是小数点。

### 4. 值

> 在编程语言的语义和类型体系环境中，静态一般是指“编译时”或者“非运行时”，动态是指“运行时”。

#### 4.1 强制转换

JavaScript内置的转换机制只支持布尔值、数字、字符串和对象。

怪异的两个转换：

- `Number(null) === 0`
- `Number(undefined); // NaN`

两个约定的转换方式：

- 乘法运算符会强制转换为数字；
- 加法运算中如果一个是字符串，运算符会将另一个运算数转换为字符串。

引擎内自带一个转换算法，ToPrimitive()，根据情景的不同偏好，先后完成：

- 如果输入的是原始值，返回；
- 如果输入是对象，偏好为数值，调用valueOf（偏好为字符串时优先调用toString)；
- 否则，调用toString（valueOf）；
- 否则，抛出一个TypeError。

#### 4.2 null

null表示 __没有对象__ 。

null是原型链最顶端的元素。

```javascript
Object.getPrototypeOf(Object.prototype) // null
```

#### 4.3 原始值的包装对象（装箱）

布尔值，数字和字符串这三种原始值都有响应的构造函数。它们的实例包含原始值。原始值可以从包装器借调方法。

### 5. 运算符

JavaScript中无法重载或自定义运算符，包括等号。

NaN与本身不相等（宽松 & 严格）。

#### 5.1 比较

在比较包装实例和原始值的时候，原始值和包装的原始值是宽松相等的，（但两个相同的原始值它们的包装实例不相等）

### 6. 数字

Number()在转换时一般优于parseFloat(), 原因：

- 对非字符串使用parseFloat效率较低，因为在解析之前它会将参数强制转换为字符串；
- parseFloat()会将空字符串解析成NaN；
- parseFloat()会一直解析到最后一个合法的字符，这意味着最后可能得到的不是想要的结果，比如`parseFloat(123.45#)`

### 7. 字符

字符串是由JavaScript字符组成的不可变序列，其中每个字符是一个16位的UTF-16编码单元。（一个Unicode字符相当于一个或两个JavaScript字符）

优化：新版本JavaScript引擎通过加号+优化字符串拼接并在内部使用相似的方法（array.push()）。

### 8. 数组

不要用for-in来遍历数组，因为for-in只会遍历索引，而不是数组元素，其次还会遍历所有的（非索引）属性值。

注意，for-in遍历对象所有的可枚举属性，其中包括了继承来的属性，因此需要判断是否为自身的：

```javascript
for(var key in person) {
	if(Object.prototype.hasOwnProperty.call(person, key) { // 为了避免person自身有hasOwnProperty方法
    	console.log(key)   
    }
}
```

### 9. 错误处理

对于异常捕获有两个原则：如果一处出错的含义不能被描述，那么就抛错；找到一个可以捕获错误的位置，捕获异常。

Error是通用的异常构造器，所有其他的异常构造器都是它的子构造器，因此我们可以自定义错误构造器。

"Speaking JavaScript"阅读笔记（二）

### 写在前面

由于疫情的原因，这次离职比以往多了许多准备和复习的时间，也能沉下心好好复习一下基础知识点，本篇是我自己在阅读“Speaking JavaScript”时做出的摘录与笔记，在整理的过程中会加入一些自己想到的代码示例，并综合《JavaScript高级程序设计（第3版）》整理，如果有一些错误欢迎在下方的Disqus评论区指正，感谢！

~~为什么没有用最新的第四版高程呢？因为2019.10.16才正式有英文版，而且作者和第三版不是同一位……等到出了正式中文版再做一次补充吧~~

![Speaking JavaScript](https://cdn.arc-light.fun/N4DgB-/orm_front_cover.jpg "中文名：深入理解JavaScript")

## 0. JavaScript背景知识

### 0.1. JavaScript与ECMAScript的关系

ECMAScript是JavaScript的官方命名，因为Java已经是一个商标。JavaScript指编程语言，ECMAScript是语言规范的名字。

### 0.2. ECMAScript历程

* 1th Edition (1997-01)
* 2th Edition (1998-08)
* 3th Edition (1999-12, 4th Edition has been abandoned at 2008-07)
* 5th Edition (2009-12)
* 6th Edition - ECMAScript 2015
* 7th Edition - ECMAScript 2016
* 8th Edition - ECMAScript 2017
* 9th Edition - ECMAScript 2018
* 10th Edition - ECMAScript 2019
* ES.Next

## 1. JavaScript的一些特性

### 1.1 语法类别：语句和表达式

```javascript
var foo; // 语句, do something
3 * 7 // 表达式, 产生“值”
```

常见的一种情形是：三目表达式 与 `if-else`块。

### 1.2 分号：建议使用

分号用于结束语句，缺少的分号会通过分号自动插入机制(ASI)完成，什么是ASI呢？

> ASI的目标是使分号对于行结束来说是可选的，也有说法是帮助解析器来确定语句的结束。

__但是，在以下的情况下也会认定为语句结束: __

* 行结束符后（如换行符）跟着一个非法token；
* 遇到一个结束的花括号；
* 文件已达结尾；

```javascript
if(a<0) a = 0
console.log(a) // 0后跟console属于非法token
```

```javascript
function foo(a, b) {
	return // return意味着会自动插入一个分号，下文不再执行
  	{
    	a + b
    }
}
```

### 1.3 变量名

一个合法的变量名规则：第一个字符可以是任意的Unicode字符、美元符号($)、或者下划线( _ )，后面还可以是任意的Unicode数字。

> ECMAScript中的一切都区分大小写。

但是保留字不能作为变量名，除保留字外以下变量也不建议：

* `Infinity`
* `NaN`
* `undefined`

### 1.4 值

原始值：

* true、false
* 数字（均为浮点）
* 字符串
* “空值”: undefined, null

除以上外，其他的值都是对象，特殊的，通过“装箱”我们可以得到非原始值的“字符串”、“布尔”、“数字”。

> 当复制引用类型的值的时候，会复制一份值的副本到新变量分配的空间中，然而，**这个值的副本实际上是一个指针，指向存储在堆中的一个对象**。

#### 1.4.1 如何对值分类

1. typeof

typeof主要用于原始值，除`typeof null === 'object'`外，其他都有正确的输出。

> typeof null是一个不能修正的bug，因为这会破坏现有的代码。~~直到目前的标准也不能修改~~

1. instanceof

instanceof主要用于对象，用来判断 **value是否是一个通过Constr构造器创建的对象。**

### 1.5 布尔值

#### 1.5.1 假值

以下值会被解释为假值：

* undefined, null
* false
* ~~-0~~ , NaN (经过测试，目前浏览器对+0，-0均判断为false)
* ''

#### 1.5.2 二元操作符

JavaScript的二元逻辑运算符是 **短路** 的，也就是说我们可以利用这个特点优化代码，尽量将大概率发生的优先判断。

'&&'，'||'符号返回的是第一个运算数的 **假（真）值** 或者第二个运算数，也就是说其实际返回的是执行后的值。

### 1.6 数字

JavaScript中的所有的数字都是浮点数。

### 1.7 字符串

### 1.8 语句

* 多条件情况下，switch的运行效率要高于if-else；
* break可以跳离循环，continue会开始一个新的循环迭代，可以用来优化循环内的执行过程；

### 1.9 函数

#### 1.9.1 函数声明的提升特性

注意与变量声明之间的区别，函数声明 **的实体会被移动到所在作用域的开始处** 。

> 而变量声明会变成如下的代码：
>
> ```javascript
>     var a; // undefined
>     console.log(a); // undefined
>     a = 3; // 3
> ```

但是要注意函数声明与函数表达式不同，后者只符合变量声明的提升规则。

```javascript
console.log(a); // undefined
console.log(b); // Uncaught ReferenceError: b is not defined. stopped.
var a = function b() {
    return 3;
} 
console.log(a);
console.log(b);
```

#### 1.9.2 特殊变量arguments

所有参数变量——`arguments`看起来像一个数组，但是却不具备数组的方法。(Array-like)

如果想将arguments转换为数组，代码如下：

```javascript
Array.prototype.slice.call(arrayLikeObject);
```

### 1.10 变量作用域

一个变量的作用域总是完整的函数。

#### 1.10.1 提升

所有变量声明都会被提升，**声明** 会被移动到函数的开始处，而赋值仍然会在原来的位置。通常来说，优先提升`var a;`，然后再提升`function a`，然后再赋值。

#### 1.10.2 闭包

> 闭包是指有权访问另一个函数作用域中的变量的函数。 —— JS高程(第3版),后文简称高程

一般外层函数内部存在一些变量，然后以返回一个函数的形式完成闭包，最常见的模式即“IIFE”

#### 1.10.3 IIFE

```javascript
// 关于为什么这种写法可以完成IIFE，后续会补充在此。
(function () {
	var foo = 'test'
}());
```

这里要注意闭包有时会存在并 **保持** 与外界变量的联系，如下：

```javascript
for(var i=0;i<5;i++) {
	result.push(function () { return i; }) // result[1]()执行后仍然是i = 5赋值的时候
}
```

_与对象等有关的点单独总结一章详细说明_

"Speaking JavaScript"阅读笔记（一）

### RIA是什么？

Wiki百科对RIA的定义是：

> 丰富互联网应用程序（英语：Rich Internet applications，简称RIA），又译为丰富性网络应用服务，是一种具有近似于传统桌面应用软件系统功能和特性的网络应用系统。RIA系统最大的特点是将大部分处理任务都从用户界面端移植到客户端，仅保留一些必要数据与服务器端进行信息交互。

其中比较重要的特性有两个，第一点它依赖于浏览器环境，第二点是运行在独立的沙箱内部。

### RIA有哪些应用？

我在Vista系统的年代，下载过“三国杀”的客户端，原来是在浏览器环境内的一个Flash，后来有了Flash AIR的客户端，可以“脱离”浏览器环境运行独立的三国杀游戏。

~~之所以说是“脱离”，其实只是不在浏览器内，本质还是需要调用Flash组件与功能。~~

当然，依托于客户端能力，避免了频繁的页面请求，能够对运行和本地化起到比较关键的作用，也能够复用在页面使用的Flash等技术，更有效的利用客户端能力。

### RIA在2020年的新面貌

前一阵看到了一所国外大学的测试平台仍在使用Flash作为录音插件，众所周知，2020年Flash已经正式被各大浏览器所废弃，用户在使用这种旧方式的时候就需要通过设置临时开启Flash功能来正常完成测试。

但是不是说Flash被废弃后，RIA就没有了存在的意义呢？

我想并不是的，RIA更多的是一种思想，能够将前端技术扩展到更多的端，能够利用更多的客户端能力，是Flash等旧一代技术“退役”后不变的方向。

现在我们可以用Electron打包Web App，完成从浏览器端到客户端的过程；我们还可以借助部分浏览器支持的PWA特性，直接安装网页程序，或是通过Service Worker，增强本身的客户端能力。

除此之外，UWP以及Chrome插件环境也是前端技术在客户端的第二春，他们在实现上与浏览器非常类似，都能够实现更强的本地化需求。

对于前端熟悉又陌生的RIA

# 更新日志

### v0.2.0

* 从Now.sh 迁移到 Cloudflare Worker Sites，从Next.js迁移到Hexo（为了更丰富的插件环境）；
* 个人所有域名从sparking.app迁移到sparkling.land，公开服务则配置在sparkling.fun；
* 正在二次开发Icarus主题……
* 使用Amazon S3存储博客图片，体验一个月感受费用

### v0.1.0

* 使用Serverless架构重构博客，技术栈目前为(Next.js + Now.sh + Tailwind CSS)
* 重新配置Disqus评论模块
* 重新设计整体样式，使用React组件重构整体

### v0.0.1

* 通过Netlify + Foresty.io + Hexo完成自动部署，脱离纯git提交模式；
* 添加GA统计；
* 添加Disqus评论；

### 测试功能

上传一张图片

我的博客更新日志

```javascript
let EatMan = function () {
  this.task = [] // 声明一个task数组，模拟事件循环队列；
  this.taskNum = []
  let fn = () => {
    this.next();
  }
  this.task.push(fn);
  setTimeout(() => {
    this.next();
  }, 0)
  return this;
}

EatMan.prototype.eat = function (str) { // 为了task任务队列一致性，将eat也转换为setTimeout异步
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log(str)
      _this.next()
    }, 0)
  }
  this.task.push(fn)
  this.taskNum.push(str)
  return this // 返回this使得可以链式操作
}
EatMan.prototype.sleep = function (ms) { // setTimeout的任务，需要在完成时再调用next继续执行
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log('this is normal sleep.')
      _this.next()
    }, ms * 1000)
  }
  this.task.push(fn)
  this.taskNum.push('sleep')
  return this
}
EatMan.prototype.firstSleep = function (ms) { // 与sleep类似，注意需要在队首加入
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log('this is first sleep.')
      _this.next()
    }, ms * 1000)
  }
  this.task.unshift(fn)
  this.taskNum.unshift('firstSleep')
  return this
}
EatMan.prototype.next = function () { // 通过next指针完成出队列操作，使之拥有顺序
  let fn = this.task.shift()
  fn && fn()
}

let eatMan = new EatMan()
eatMan.eat('apple').eat('orange').sleep(3).eat('banana').firstSleep(3)
console.log(eatMan.taskNum)
```

Spark1e

Category: frontend