一题

CSS/README.md

@@ -61,6 +61,16 @@ BFC布局规则：
 5. 计算BFC的高度，浮动元素也参与计算
 
 
+### BFC、IFC、GFC 和 FFC
+ - BFC（Block formatting contexts）：块级格式上下文
+
+ - IFC（Inline formatting contexts）：内联格式上下文
+
+ - GFC（GrideLayout formatting contexts）：网格布局格式化上下文
+
+ - FFC（Flex formatting contexts）:自适应格式上下文
+
+
 
 ### 非布局样式
  - 字体、字重、颜色、大小、行高
@@ -223,16 +233,29 @@ display: -webkit-box;
 
 
 ### display: none; 与 visibility: hidden; 的区别
-
-相同： 它们都能让元素不可见
-
-区别：
-
-- display:none;会让元素完全**从渲染树中消失**，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见
-- display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了 hidden，通过设置 **visibility: visible;可以让子孙节点显式**
-- 修改常规流中元素的 display 通常会造成文档**重排**。修改 visibility 属性只会造成本元素的重绘
-- 读屏器不会读取 display: none;元素内容；会读取 visibility: hidden 元素内容
-- 无论是 display:none; 还是 visibility: hidden; 他们都依然可以被 JS 所获取到
+结构：
+ - display:none
+   - 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
+ - visibility: hidden
+   - 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击 
+ - opacity: 0
+   - 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
+
+继承
+ - display: none和opacity: 0
+   - 非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
+ - visibility: hidden
+   - 继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
+
+性能
+   - display:none
+     - 修改元素会造成文档回流。读屏器不会读取display: none元素内容，性能消耗较大
+   - visibility:hidden
+     - 修改元素只会造成本元素的重绘,性能消耗较少。读屏器读取visibility: hidden元素内容
+   - opacity: 0
+     - 修改元素会造成重绘，性能消耗较少
+
+相同点： 它们都能让元素不可见、他们都依然可以被 JS 所获取到
 
 
 ### 外边距折叠(collapsing margins)

JS基础/ES6.md

@@ -108,9 +108,12 @@ console.log(sum)
 
 ### Es6中箭头函数与普通函数的区别？
  - 普通function的声明在变量提升中是最高的，箭头函数没有函数提升
- - 箭头函数没有属于自己的this，arguments
+ - 箭头函数没有属于自己的`this`，`arguments`
  - 箭头函数不能作为构造函数，不能被new，没有property
- - call和apply方法只有参数，没有作用域
+ - 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数
+ - 不可以使用 new 命令，因为：
+   - 没有自己的 this，无法调用 call，apply
+   - 没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 `__proto__`
 
 
 
@@ -210,6 +213,48 @@ console.log('1', a)
 上述解释中提到了 await 内部实现了 generator，其实 **await 就是 generator 加上 Promise 的语法糖，且内部实现了自动执行 generator**。
 
 
+### 代码分析题
+```js
+function wait() {
+  return new Promise(resolve =>
+  	setTimeout(resolve,  1000)
+  )
+}
+
+async function main() {
+  console.time();
+  const x = wait();
+  const y = wait();
+  const z = wait();
+  await x;
+  await y;
+  await z;
+  console.timeEnd();
+}
+main();
+```
+答案： 输出耗时： 1秒多一点点。
+原因： 3个wait函数在赋值的时候就已经开始执行了。
+
+稍微改造一下就可以得到3 * 1000 ms以上的结果
+```js
+function wait () {
+  return new Promise(
+    resolve => setTimeout(resolve,  1000)
+  )
+}
+
+async function main () {
+  console.time()
+  const x = await wait()
+  const y = await wait()
+  const z = await wait()
+  console.timeEnd()
+}
+
+main()
+```
+
 
 ### Generator 生成器
 

JS基础/README.md

@@ -32,23 +32,6 @@ eval 的功能是把对应的字符串解析成 JS 代码并运行
 
 
 
-### ['1', '2', '3'].map(parseInt) 答案是多少？
-
-答案 [1, NaN, NaN]
-
-map会给函数传递3个参数： (elem, index, arry)
-
-parseInt接收两个参数(sting, radix)，其中radix代表进制。省略 radix 或 radix = 0，则数字将以十进制解析
-
-因此，map 遍历 ["1", "2", "3"]，相应 parseInt 接收参数如下
-
-```js
-parseInt('1', 0);  // 1
-parseInt('2', 1);  // NaN
-parseInt('3', 2);  // NaN
-```
-
-
 ### [严格模式的限制](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode)
 
  - 变量必须声明后再使用
@@ -68,30 +51,6 @@ parseInt('3', 2);  // NaN
  - 增加了保留字（比如 protected、static 和 interface）
 
 
-### Ajax
-Asynchronous Javascript And XML 异步传输+js+xml
-
- - 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
- - 建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息
- - 设置响应 HTTP 请求状态变化的函数
- - 发送 HTTP 请求
- - 获取异步调用返回的数据
-
-```js
-function ajax(url, handler){
-  var xhr;
-  xhr = new XMLHttpRequest();
-
-  xhr.onreadystatechange = function() {
-    if(xhr.readyState == 4 && xhr.status == 200) {
-      handler(xhr.responseXML);
-    }
-  }
-  xhr.open('GET', url, true);
-  xhr.send();
-}
-```
-
 
 ### Javascript 垃圾回收方法
 

JS基础/作用域.md

@@ -0,0 +1,97 @@
+# 作用域相关问题
+
+### 下面的代码打印什么内容，为什么？
+```js
+// 情况 1 
+
+//  情况 2
+var b = 10;
+var c = function b() {
+  b = 20;
+  console.log(b)
+}
+c()
+
+// 上面两种都打印：
+ƒ b() {
+  b = 20;
+  console.log(b)
+}
+```
+b函数（函数表达式定义函数）是一个相当于用const定义的常量，内部无法进行重新赋值，如果在严格模式下，会报错"Uncaught TypeError: Assignment to constant variable."
+
+### 简单改造下面的代码，使之分别打印 10 和 20
+```js
+var b = 10;
+(function b() {
+  b = 20;
+  console.log(b)
+})()
+```
+
+打印10：
+```js
+var b = 10;
+(function b(b) {
+  window.b = 20;
+  console.log(b)
+})(b)
+```
+```js
+var b = 10;
+(function b() {
+  b.b = 20;
+  console.log(b)
+})()
+```
+
+打印20：
+```js
+var b = 10;
+(function b(b) {
+  b = 20;
+  console.log(b)
+})()
+```
+```js
+var b = 10;
+(function b() {
+  var b = 20;
+  console.log(b)
+})()
+```
+
+### 下面代码输出什么
+```js
+var a = 10;
+(function () {
+    console.log(a)
+    a = 5
+    console.log(window.a)
+    var a = 20;
+    console.log(a)
+})()
+```
+依次输出：undefined -> 10 -> 20
+
+解析：
+
+在立即执行函数中，var a = 20; 语句定义了一个局部变量 a，**由于js的变量声明提升机制**，局部变量a的声明会被提升至立即执行函数的函数体最上方，且由于这样的提升并不包括赋值，因此第一条打印语句会打印undefined，最后一条语句会打印20。
+
+由于全局的var 会挂载到window对象下，并且立即执行函数里面有变量提示。
+‘a = 5;’这条语句执行时，局部的变量a已经声明，因此它产生的效果是对局部的变量a赋值，此时window.a 依旧是最开始赋值的10
+
+
+### var变量定义提升
+```js
+var name = 'Tom';
+(function() {
+if (typeof name == 'undefined') {
+  var name = 'Jack';
+  console.log('Goodbye ' + name);
+} else {
+  console.log('Hello ' + name);
+}
+})();
+```
+输出： 'Goodbye Jack'

JS基础/函数.md

@@ -1,10 +1,5 @@
 # 函数
 
-### 箭头函数 => 中this
-
-箭头函数不会创建自己的this,**它只会从自己的作用域链的上一层继承this**
-
-
 ### JS运行分三步：
 语法分析（通篇扫描是否有语法错误），预编译（发生在函数执行的前一刻），解释执行（一行行执行）。
 
@@ -203,8 +198,8 @@ console.log(p2) // -> {name: "yyy", age: 30}
 
 ```js
 function _new(func, ...args) {
-   let obj = Object.create(func.prototype)
-   let res = func.apply(obj, args);
-   return (res instanceof Object) ? res : obj;
+   let obj = Object.create(func.prototype)      // 原型
+   let res = func.apply(obj, args);             // 初始化对象属性
+   return (res instanceof Object) ? res : obj;  // 返回值
 }
 ```

JS基础/变量类型和类型转换.md

@@ -291,4 +291,27 @@ toString.call('abc')        //[object String]
 ### obj.toString() 和Object.prototype.toString.call(obj)
 同样是检测对象obj调用toString方法，obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样，这是为什么？
 
-这是因为toString为Object的原型方法，而Array ，function等类型作为Object的实例，都重写了toString方法。不同的对象类型调用toString方法时，根据原型链的知识，调用的是对应的重写之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串.....），而不会去调用Object上原型toString方法（返回对象的具体类型），所以采用obj.toString()不能得到其对象类型，只能将obj转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用Object上原型toString方法。
+这是因为toString为Object的原型方法，而Array ，function等类型作为Object的实例，都重写了toString方法。不同的对象类型调用toString方法时，根据原型链的知识，调用的是对应的重写之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串.....），而不会去调用Object上原型toString方法（返回对象的具体类型），所以采用obj.toString()不能得到其对象类型，只能将obj转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用Object上原型toString方法。
+
+
+### 输出以下代码运行结果
+```JS
+1 + "1"
+
+2 * "2"
+
+[1, 2] + [2, 1]
+
+"a" + + "b"
+```
+ - 1 + "1"
+   - 加性操作符：如果只有一个操作数是字符串，则将另一个操作数转换为字符串，然后再将两个字符串拼接起来
+   - 所以值为：“11”
+ - 2 * "2"
+   - 乘性操作符：如果有一个操作数不是数值，则在后台调用 Number()将其转换为数值
+ - [1, 2] + [2, 1]
+   - Javascript中所有对象基本都是先调用valueOf方法，如果不是数值，再调用toString方法。
+   - 所以两个数组对象的toString方法相加，值为："1,22,1"
+ - "a" + + "b"
+   - 后边的“+”将作为一元操作符，如果操作数是字符串，将调用Number方法将该操作数转为数值，如果操作数无法转为数值，则为NaN。
+   - 所以值为："aNaN"

前端资源汇总.md

@@ -0,0 +1,4 @@
+ - [GitHub最全前端资源汇总](http://fenghub.top/front-end-index/index.html)
+ - [前端进阶之道](https://yuchengkai.cn/)
+ - [有关React，你需要知道的一切](https://github.com/hateonion/react-bits-CN)
+ - [木易杨-壹题](https://muyiy.cn/question/)

操作系统/README.md

@@ -0,0 +1,17 @@
+# 操作系统
+
+参考资源：https://frank-lam.github.io/fullstack-tutorial/#/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F
+
+
+### CPU组成
+CPU是由运算器和控制器这两个部分组成的。
+
+1、运算器由算术逻辑单元（ALU）、累加器、状态寄存器、通用寄存器组等组成。算术逻辑运算单元（ALU）的基本功能为加、减、乘、除四则运算，与、或、非、异或等逻辑操作，以及移位、求补等操作。
+
+计算机运行时，运算器的操作和操作种类由控制器决定。运算器处理的数据来自存储器；处理后的结果数据通常送回存储器，或暂时寄存在运算器中。与Control Unit共同组成了CPU的核心部分。
+
+2、控制器分组合逻辑控制器和微程序控制器，两种控制器各有长处和短处。组合逻辑控制器设计麻烦，结构复杂，一旦设计完成，就不能再修改或扩充，但它的速度快。
+
+微程序控制器设计方便，结构简单，修改或扩充都方便，修改一条机器指令的功能，只需重编所对应的微程序；
+
+要增加一条机器指令，只需在控制存储器中增加一段微程序，但是，它是通过执行一段微程。具体对比如下：组合逻辑控制器又称硬布线控制器，由逻辑电路构成，完全靠硬件来实现指令的功能。