目录
- babel 原理
- 原型链判断
- instanceof
一、babel 原理
Babel 是一个 JavaScript 编译器。他把最新版的 javascript 编译成当下可以执行的版本，简言之，利用 babel 就可以让我们在当前的项目中随意的使用这些新最新的 es6，甚至 es7 的语法。
Babel 的三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。
- 解析 将代码解析成抽象语法树（AST），每个js 引擎（比如 Chrome 浏览器中的 V8 引擎）都有自己的 AST 解析器，而 Babel 是通过 Babylon 实现的。在解析过程中有两个阶段：词法分析和语法分析，词法分析阶段把字符串形式的代码转换为令牌（tokens）流，令牌类似于 AST 中节点；而语法分析阶段则会把一个令牌流转换成 AST 的形式，同时这个阶段会把令牌中的信息转换成 AST 的表述结构。
- 转换 在这个阶段，Babel 接受得到 AST 并通过 babel-traverse 对其进行深度优先遍历，在此过程中对节点进行添加、更新及移除操作。这部分也是 Babel 插件介入工作的部分。
- 生成 将经过转换的 AST 通过 babel-generator 再转换成 js 代码，过程就是深度优先遍历整个 AST，然后构建可以表示转换后代码的字符串。
还想深入了解的可以看 [实践系列]Babel 原理
二、 原型链判断
Object.prototype.__proto__; //null
Function.prototype.__proto__; //Object.prototype
Object.__proto__; //Function.prototype
Object instanceof Function; //true
Function instanceof Object; //true
Function.prototype === Function.__proto__; //true
"a".__proto__.__proto__.__proto__===null//true
'a'.__proto__ === String.prototype //true
new Number(1).__proto__.__proto__.__proto__===null //true
// new 中做的原型有关的事
newObj.__proto__=constructor.prototype;
__proto__永远指向prototype
prototype下的__proto__永远指向prototype。除了null
-
__proto__和prototype都是对象。\
-
只有函数有prototype。函数同时也有两个__proto__.一个在函数本身上，一个在他的原型对象上。
-
只有对象有__proto__。回想new的实现中 obj.proto=courstranctor.prototype.
-
__proto__永远指向prototype
-
**prototype下的__proto__永远指向prototype。除了null
** -
**JS中万物皆是对象，对象上都会有__proto__属性。
** -
只有函数有prototype。(1),“ab”,[],{}等实例是没有prototype.因为他们是数据对象（实例对象），不是函数。
-
函数也有__proto__,而且有两个
- 原型链详细内容请看：juejin.cn/post/684490…
三、instanceof
检测一个对象A是不是另一个对象B的实例
function instans_of(obj,func){
var obj = obj.__proto__;//取对象obj的隐式原型
var func = func.prototype;//取构造函数的显示原型
while(true){
if(obj===null){return false};
if(obj===func){return true};//这里重点：当 obj 严格等于 func时，返回true
obj=obj.__proto__;//
}
}
参考
- 原型链详细内容请看：juejin.cn/post/684490…
总结
- Babel 接受得到 AST 并通过 babel-traverse 对其进行深度优先遍历
- 原型链难点还是在 Function的原型上。
// 构造函数的原型
Function.__proto__ === Function.prototype; // true
Function.prototype.__proto__ === Object.prototype // true
Object.__proto__ ===Function.prototype // true
Number.__proto__ ===Function.prototype
