关于javascript:图解-Google-V8设计思想篇学习笔记一

最新在学《图解 Google V8》

这个专栏的长处是：写的通俗易懂，没有波及 V8 源码局部，对于前端还是比拟敌对的，学完之后可能晓得写下一段 js 代码后，V8 背地都做了哪些事件

这个专栏的不足之处是：没有对技术进行深刻解说，只讲了这个技术是用来解决什么问题的，以及它是怎么工作的

所以这个专栏比拟时候对 V8 还不理解的同学去学习，减少本人的知识面

上面是我本人学习每一章的总结，次要记录我在这章中学到内容，并不是对这章残缺的总结

我会分为三篇来写，这是第一篇：设计思维篇

如何学习谷歌高性能 JavaScript 引擎 V8？

V8 次要波及三个技术：编译流水线、事件循环系统、垃圾回收机制

1. V8 执行 JavaScript 残缺流程称为：编译流水线

   编译流水线波及到的技术有：

   • JIT

     • V8 混合编译执行和解释执行

   • 惰性解析

     • 放慢代码启动速度

   • 暗藏类(Hide Class)

     • 将动静类型转为动态类型，打消动静类型执行速度慢的问题
   • 内联缓存

2. 事件循环系统

   • JavaScript 中的难点：异步编程
   • 调度排队工作，让 JavaScript 有序的执行

3. 垃圾回收机制

   • 内存调配
   • 内存回收

01 | V8 是如何执行一段 JavaScript 代码的？

1. 筹备根底环境：

   • 全局执行上下文：全局作用、全局变量、内置函数
   • 初始化内存中的堆和栈构造
   • 初始化音讯循环系统：音讯驱动器和音讯队列

2. 结构化 JavaScript 源代码

   • 生成形象语法树（AST）
   • 生成相干作用域

3. 生成字节码：字节码是介于 AST 和机器码的中间代码

   • 解释器能够间接执行
   • 编译器须要将其编译为二进制的机器码再执行

4. 解释器和监控机器人

   • 解释器：依照程序执行字节码，并输入执行后果
   • 监控机器人：如果发现某段代码被反复屡次执行，将其标记为热点代码

5. 优化热点代码

   • 优化编译器将热点代码编译为机器码
   • 对编译后的机器码进行优化
   • 再次执行到这段代码时，将优先执行优化后的代码

6. 反优化

   • JavaScript 对象在运行时可能会被扭转，这段优化后的热点代码就生效了
   • 进行反优化操作，给到解释器解释执行

02 | 函数即对象：一篇文章彻底搞懂 JavaScript 的函数特点

V8 外部为函数对象增加了两个暗藏属性：name，code：

• name 为函数名

  • 如果是匿名函数，name 为 anonymous
• code 为函数代码，以字符串的模式存储在内存中

当执行到一个函数调用语句时，V8 从函数对象中取出 code 属性值，而后解释执行这段函数代码

什么是闭包：将内部变量和函数绑定起来的技术

参考资料：

1. The story of a V8 performance cliff in React

03 | 快属性和慢属性：V8 是怎么晋升对象属性访问速度的？

V8 在实现对象存储时，没有齐全采纳字典的存储形式，因为字典是非线性的数据结构，查问效率会低于线性的数据结构

惯例属性和索引属性

• 索引属性（elements）：数字属性依照索引值的大小升序排列
• 惯例属性（properties）：字符串依据创立时的程序升序排列

它们都是线性数据结构，别离为 elements 对象和 properties 对象

执行一次查问：先从 elements 对象中依照程序读出所有元素，而后再从 properties 对象中读取所有的元素

快属性和慢属性

在拜访一个属性时，比方：foo.a，V8 先查找出 properties，而后在从 properties 中查找出 a 属性

V8 为了简化这一步操作，把局部 properties 存储到对象自身，默认是 10 个，这个被称为 对象内属性

线性数据结构通常被称为快属性

线性数据结构进行大量数据的增加和删除，执行效率是非常低的，所以 V8 会采纳慢属性策略

慢属性的对象外部有独立的非线性数据结构（字典）

参考资料：

1. V8 是怎么跑起来的 —— V8 中的对象示意
2. Fast properties in V8

04 | 函数表达式：波及大量概念，函数表达式到底该怎么学？

变量晋升

在 js 中有函数申明的形式有两种：

• 函数申明

  function foo() {console.log("foo");
  }

• 函数表达式

  var foo = function () {console.log("foo");
  };

在编译阶段 V8 解析到函数申明和函数表达式（变量申明）时：

• 函数申明，将其转换为内存中的 函数对象，并放到作用域中
• 变量申明，将其值设置为 undefined，并当道作用域中

因为在编译阶段，是不会执行表达式的，只会剖析变量的定义、函数的申明

所以如果在申明前调用 foo 函数：

• 应用函数申明不会报错
• 应用函数表达式会报错

在编译阶段将所有的变量晋升到作用域的过程称为 变量晋升

立刻执行函数

js 的圆括号 () 能够在两头放一个表达式

两头如果是一个函数申明，V8 就会把 (function(){}) 看成是函数表达式，执行它会返回一个 函数对象

如果在函数表达式前面加上 ()，就被称为 立刻调用函数表达式

因为函数立刻表达式也是表达式，所以不会创立函数对象，就不会污染环境

05 |原型链：V8 是如何实现对象继承的？

• 作用域链是沿着函数的作用域一级一级来查找变量的
• 原型链是沿着对象的原型一级一级来查找属性的

js 中实现继承，是将 __proto__ 指向对象，然而不举荐应用，次要起因是：

• 这是暗藏属性，不是规范定义的
• 应用该属性会造成重大的性能问题

继承

1. 用构造函数实现继承：

   function DogFactory(color) {this.color = color;}
   DogFactory.prototype.type = "dog";
   const dog = new DogFactory("Black");
   dog.hasOwnProperty("type"); // false

2. ES6 之后能够通过 Object.create 实现继承

   const animalType = {type: "dog"};
   const dog = Object.create(animalType);
   dog.hasOwnProperty("type"); // false

new 背地做了这些事件

1. 帮你在外部创立一个长期对象
2. 将长期对象的 __proto__ 设置为构造函数的原型，构造函数的原型对立叫做 prototype
3. return 长期对象

function NEW(fn) {return function () {var o = { __proto__: fn.prototype};
    fn.apply(o, arguments);
    return o;
  };
}

__proto__、prototype、constructor 区别

prototype 是函数的独有的；__proto__ 和 constructor 是对象独有的

因为函数也是对象，所以函数也有 __proto__ 和 constructor

constructor 是函数；prototype 和 __proto__ 是对象

typeof Object.__proto__; // "object"
typeof Object.prototype; // "object"
typeof Object.constructor; // "function"

let obj = new Object();
obj.__proto__ === Object.prototype;
obj.constructor === Object;

obj 是 Object 的实例，所以 obj.constructor === Object

obj 的是对象，Object 是函数，所以 obj.__proto__ === Object.prototype

参考资料：

1. 用本人的形式（图）了解 constructor、prototype、__proto__ 和原型链
2. 面试官问：JS 的继承

06 |作用域链：V8 是如何查找变量的？

全局作用域是在 V8 启动过程中就创立了，且始终保留在内存中不会被销毁的，直至 V8 退出

而函数作用域是在执行该函数时创立的，当函数执行完结之后，函数作用域就随之被销毁掉了

因为 JavaScript 是基于词法作用域的，词法作用域就是指，查找作用域的程序是依照函数定义时的地位来决定的。

词法作用域是动态作用域，依据函数在代码中的地位来确定的，作用域是在申明函数时就确定好了

动静作用域链是基于调用栈的，不是基于函数定义的地位的，能够认为 this 是用来补救 JavaScript 没有动静作用域个性的

07 |类型转换：V8 是怎么实现 1+“2”的？

V8 会提供了一个 ToPrimitive 办法，其作用是将 a 和 b 转换为原生数据类型

1. 先检测该对象中是否存在 valueOf 办法，如果有并返回了原始类型，那么就应用该值进行强制类型转换
2. 如果 valueOf 没有返回原始类型，那么就应用 toString 办法的返回值
3. 如果 valueOf 和 toString 两个办法都不返回根本类型值，便会触发一个 TypeError 的谬误。