ios 开发

JavaScript运行原理

2023-03-03  本文已影响0人  iOS小洁

浏览器的内核

不同的浏览器有不同的内核组成

我们经常说的浏览器内核指的是浏览器的排版引擎(layout engine),也称为浏览器引擎(browser engine)、页面渲染引擎(rendering engine) 或样版引擎

浏览器内核由两部分组成

JavaScript引擎

JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行

常见的JavaScript引擎有哪些呢?

V8引擎架构

v8引擎的原理:

[图片上传失败...(image-37e5c4-1677855716202)]

V8引擎的解析图:

[图片上传失败...(image-8ba930-1677855716203)]

JavaScript源码解析的过程

JavaScript的执行过程

初始化全局对象

js引擎会在执行代码之前,会在堆内存中创建一个全局对象:Global Object(GO)

执行上下文栈

js引擎内部有一个执行上下文栈(Execution Context Stack,简称ECS),它是用于执行代码的调用栈。

ECS 执行的是全局的代码块:

GEC被放入到ECS中里面包含两部分内容:

函数执行上下文

执行的过程中执行到一个函数时,就会根据函数体创建一个函数执行上下文(Functional Execution Context,简称FEC),并且压入到EC Stack中。

FEC中包含三部分内容:

  1. 在解析函数成为AST树结构时,会创建一个Activation Object(AO)
    1. AO中包含形参、arguments、函数定义和指向函数对象、定义的变量;
  2. 作用域链:由VO(在函数中就是AO对象)和父级VO组成,查找时会一层层查找;
  3. this绑定的值

作用域提升练习

let n = 100
function foo() {
    n = 300
}
foo()
console.log(n);


// 输出 undefined,200
function foo() {
    console.log(n);
    var n = 200
    console.log(n);
}
var n = 100
foo()


// 输出 undefined
var a = 100
function foo() {
    console.log(a);
    return
    var a = 100
}
foo()


// 输出 报错,找不到a
function foo() {
    var a = b = 100
}
foo()
// console.log(a);
console.log(b);


var n = 100
function foo1() {
    console.log(n);
}
function foo2() {
    var n = 200
    console.log(n);
    foo1()
}
foo2()
console.log(n);
上一篇 下一篇

猜你喜欢

热点阅读