浏览器内核

  1. JS解释编译简要过程

    源代码通过解析器生成AST(Abstract syntax tree),然后生成字节码(介于高级语言与机器语言之间的中间代码),再通过解释器逐行解释并执行,借助JIT(Just in time)技术监测代码执行过程,根据代码执行频率从高到低将代码标记为不同等级,低等级的通过基线编译器编译,高等级的通过优化编译器编译,之后将执行编译后的代码,而一旦优化后代码不再满足优化条件,则将其降级到基线编译器或解释器中去处理,这就是去优化;

  2. 对JS单线程非阻塞的理解

阅读全文

JS手撕代码

typeof

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// from MDN
function type(value) {
if (value === null) {
return "null";
}
const baseType = typeof value;
// 基本类型
if (!["object", "function"].includes(baseType)) {
return baseType;
}

// Symbol.toStringTag 通常指定对象类的“display name”
// 它在 Object.prototype.toString() 中使用。
const tag = value[Symbol.toStringTag];
if (typeof tag === "string") {
return tag;
}

// 如果它是一个函数,其源代码以 "class" 关键字开头
if (
baseType === "function" &&
Function.prototype.toString.call(value).startsWith("class")
) {
return "class";
}

// 构造函数的名称;例如 `Array`、`GeneratorFunction`、`Number`、`String`、`Boolean` 或 `MyCustomClass`
const className = value.constructor.name;
if (typeof className === "string" && className !== "") {
return className;
}

// 在这一点上,没有合适的方法来获取值的类型,因此我们使用基本实现。
return baseType;
}

instanceof

1
2
3
4
5
6
7
8
9
10
11
12
13
function instanceOf(instance, constructor) {
let target = constructor.prototype;
let proto = instance.__proto__;

while (proto !== null) {
if (target === proto) {
return true;
}
proto = proto.__proto__;
}

return false;
}

new

1
2
3
4
5
6
7
8
9
10
11
12
function __new(constructor, ...args: any[]) {
const obj = {};
const result = constructor.apply(obj, args);
// function或非空object将被直接返回
if (
typeof result === "function" ||
(typeof result === "object" && result !== null)
) {
return result;
}
return obj;
}

阅读全文

Javascript常见内置对象

Object

  • assign(target, ...sources),复制sources的自有可枚举属性到target,并返回target,复制过程用的是sources的[[Get]]与target的[[Set]];
  • create(proto, propertiesObject),使用指定的原型对象和自有可枚举属性创建一个对象;
  • defineProperty(target, propName, descriptor),给target添加或修改名为propName的属性,并指定属性描述符;
  • entries(target)返回target的自有可枚举属性的键值对数组,形如[ ['propA', '1'], ['propB', 2] ]
阅读全文

面向对象编程

概述

OOP(Object Orient Programming)面向对象编程;

三大特征:

  1. 封装,将功能封装进相对独立的模块;
  2. 多态,同一接口、类型,却可以做不同的事,代表不同的涵义;
  3. 继承,属性、方法可被继承或扩展;

注1:JS是一种多范式语言,支持面向对象的编程思想,其原型模型中,多态体现在:实例本身的属性或方法的优先级高于其原型对象上的同名属性或方法;

注2:根据Wikipedia的词条定义,多态并非OOP独有,分为

  1. 特设多态:函数重载、运算符重载;
  2. 参数多态:泛型编程;
  3. 子类型多态:父类型可替代子类型;

阅读全文

Javascript进阶

什么是原型链?

定义的函数、类或对象会自动创建原型对象,并通过prototypeconstructor互相指向对方,原型之间通过__proto__构成原型链,实例调用某个方法时,会沿原型链寻找该方法,直到找到指定方法,或遍历完整个原型链后抛出异常;

借助单链表理解:针对实例调用某方法的角度来讲,原型链可以看作一个链表,每个节点都是原型对象,以__proto__属性指向下一节点,头节点是实例本身,尾节点是Object.prototype

不同情况下的__proto__如下:

  • function 函数,箭头函数,其__proto__一定是Function.prototype,包括Function
阅读全文