重学前端-JavaScript高级
更新日期:11-23
第一次更新:11-23
第二次更新:11-24
第三次更新:11-25
第四次更新:11-26
第五次更新:11-27
第六次更新:11-28
1、浏览器原理
1、浏览器工作原理
输入服务器➡️index.html➡️遇到link标签下载css文件,遇到JavaScript标签下载JavaScript文件
2、浏览器内核
- pGecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用;
- Trident:微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink;
- Webkit:苹果基于KHTML开发、开源的,用于Safari,Google Chrome之前也在使用;
- Blink:是Webkit的一个分支,Google开发,目前应用于Google Chrome、Edge、Opera等
浏览器内核指的是浏览器的排版引擎
排版引擎(layout engine),也称为浏览器引擎(browser engine)、页面渲染引擎(rendering engine)
或样版引擎
3、浏览器渲染过程
HTML解析过程中如果遇到了JavaScript标签,会停止解析HTML,而去加载和执行JavaScript代码
js代码由JavaScript引擎执行
3、认识JavaScript引擎
1、为什么需要JavaScript引擎
- 高级的编程语言都是需要转成最终的机器指令来执行的;
- 事实上我们编写的JavaScript无论你交给浏览器或者Node执行,最后都是需要被CPU执行的;
- 但是CPU只认识自己的指令集,实际上是机器语言,才能被CPU所执行;
- 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行;
2、比较常见的JavaScript引擎
- SpiderMonkey:第一款JavaScript引擎,由Brendan Eich开发(也就是JavaScript作者);
- hakra:微软开发,用于IT浏览器;
- JavaScriptCore:WebKit中的JavaScript引擎,Apple公司开发;
- V8:Google开发的强大JavaScript引擎,也帮助Chrome从众多浏览器中脱颖而出;
3、浏览器内核和JS引擎的关系
webkit浏览器内分为两部分:WebCore和JavaScriptCore
webCore负责解析HTML、布局和渲染等工作
JavaScriptCore负责解析、执行JavaScript代码
类似小程序中的Webview和JScore
4、V8引擎的原理
V8引擎用于Chrome和Node.js等,可以独立运行
V8引擎用到的模块与解释器
- Parse模块会将JavaScript代码转换成AST(抽象语法树),这是因为解释器并不直接认识JavaScript代码;
- Ignition是一个解释器,会将AST转换成ByteCode(字节码);
- TurboFan是一个编译器,可以将字节码编译为CPU可以直接执行的机器码;
5、V8执行的细节
解析过程:
- Blink将源码交给V8引擎,Stream获取到源码并且进行编码转换;
- Scanner会进行词法分析(lexical analysis),词法分析会将代码转换成tokens;
- 来tokens会被转换成AST树,经过Parser和PreParser:
- Parser就是直接将tokens转成AST树架构,PreParser称之为预解析
- 生成AST树后,会被Ignition转成字节码(bytecode),之后的过程就是代码的执行过程
6、JavaScript执行过程
1、初始化全局对象
js引擎会在执行代码之前,会在堆内存中创建一个全局对象:Global Object(GO)
- 该对象所有的作用域(scope)都可以访问;
- 里面会包含Date、Array、String、Number、setTimeout、setInterval等等;
- 其中还有一个window属性指向自己;
2、执行上下文
- js引擎内部有一个执行上下文栈(Execution Context Stack,简称ECS),它是用于执行代码的调用栈。
- 调用栈执行全局代码块,
- 全局的代码块为了执行会构建一个Global Execution Context(GEC),GEC会被放入到ECS中执行;
- GEC被放入到ECS中里面包含两部分内容:
- 第一部分:在代码执行前,在parser转成AST的过程中,会将全局定义的变量、函数等加入到GlobalObject中,
但是并不会赋值:这个过程也称之为变量的作用域提升(hoisting) - 第二部分:在代码执行中,对变量赋值,或者执行其他的函数;
- 第一部分:在代码执行前,在parser转成AST的过程中,会将全局定义的变量、函数等加入到GlobalObject中,
var name = 'why';
console.log(num1); //这边打印未定义,存在变量提升
var num1 = 20;
var num2 = 30;
var result = num1 + num2;
console.log(result);
/**
* 1.代码被解析, v8引擎内部会帮助我们创建一个对象(GlobalObject -> go)
* 2.运行代码
* 2.1. v8为了执行代码, v8引擎内部会有一个执行上下文栈(Execution Context Stack, ECStack)(函数调用栈)
* 2.2. 因为我们执行的是全局代码, 为了全局代码能够正常的执行, 需要创建 全局执行上下文(Global Execution Context)(全局代码需要被执行时才会创建)
*/
var globalObject = {
String: '类',
Date: '类',
setTimeount: '函数',
window: globalObject,
name: undefined,
num1: undefined,
num2: undefined,
result: undefined,
};
// console.log(window.window.window.window)
3、函数执行上下文
- 在执行的过程中执行到一个函数时,就会根据函数体创建一个函数执行上下文(Functional Execution Context,
简称FEC),并且压入到EC Stack中。 - FEC中包含三部分内容:
- 第一部分:在解析函数成为AST树结构时,会创建一个Activation Object(AO):AO中包含形参、arguments、函数定义和指向函数对象、定义的变量;
- 第二部分: 作用域链:由VO(在函数中就是AO对象)和父级VO组成,查找时会一层层查找,直到not defined。
- 第三部分:this绑定的值
foo(123); //foo
function foo(num) {
console.log(m); //undefined
var m = 10;
var n = 20;
var name = "foo"
console.log(name); //foo
function bar() {
console.log(name)
}
bar() //foo
}
var message = 'Hello Global';
function foo() {
console.log(message);
}
function bar() {
var message = 'Hello Bar';
foo(); //Hello Global,函数的父级作用域和定义位置有关,和调用位置无关。在函数定义的时候就确定了父级作用域
}
bar();
4、执行上下文面试题
2、内存管理和闭包
1、内存管理
- 不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,不同的是某些编程语言需要我们自己手动
的管理内存,某些编程语言会可以自动帮助我们管理内存
内存管理生命周期
- 分配申请你需要的内存(申请);
- 使用分配的内存(存放一些东西,比如对象等);
- 不需要使用时,对其进行释放;
JavaScript通常情况下是不需要手动来管理的。
1、JavaScript内存管理
JavaScript会在定义变量时为我们分配内存。
内存可以分为栈结构和堆结构
- 基本数据类型内存的分配会在执行时,
直接在栈空间进行分配; - 复杂数据类型内存的分配会在堆内存
中开辟一块空间,并且将这块空间的指针返
回值变量引用;
2、垃圾回收
因为内存的大小是有限的,所以当内存不再需要的时候,我们需要对其进行释放,以便腾出更多的内存空间。
垃圾回收详见:JavaScript性能优化
2、闭包
1、闭包的执行过程
函数和方法
函数:function:独立的function,那么就可以称为使一个函数
方法:method:当我们的一个函数属于某一个对象时,我们称这个函数时这个对象的方法
function foo() {
// 闭包的组成:函数+可以访问的自由变量
var name = 'foo';
function bar() {
console.log('bar', name);
}
return bar;
}
var fn = foo();
fn();
2、闭包的内存泄漏
3、this指向
this在全局作用于下指向window
1、在函数中使用this
- 所有的函数在被调用时,都会创建一个执行上下文:
- 这个上下文中记录着函数的调用栈、AO对象等;
- this也是其中的一条记录;
// this指向什么, 跟函数所处的位置是没有关系的, 跟函数被调用的方式是有关系
function foo() {
console.log(this)
}
// 1.直接调用这个函数
foo() //window
// 2.创建一个对象, 对象中的函数指向foo
var obj = {
name: 'why',
foo: foo
}
obj.foo() //obj
// 3.apply调用
foo.apply("abc") //abc
this绑定规则
调用方式和调用位置有关
- 默认绑定
//独立函数调用,重点在调用,可以理解成函数没有被绑定到某个对象上进行调用;
1、
function foo() {
console.log(this) //window
}
foo()
2、
function foo1() {
console.log(this)//window
}
function foo2() {
console.log(this)//window
foo1()
}
function foo3() {
console.log(this)//window
foo2()
}
foo3()
3、
//调用的时候时独立的
var obj = {
name: "why",
foo: function() {
console.log(this)
}
}
var bar = obj.foo
bar() // window
4、
function foo() {
console.log(this)
}
var obj = {
name: "why",
foo: foo
}
var bar = obj.foo
bar() // window
5、
function foo() {
function bar() {
console.log(this);
}
return bar;
}
var fn = foo();
fn(); // window
var obj = {
name: 'why',
eating: fn,
};
obj.eating(); // 隐式绑定
- 隐式绑定
//通过某个对象进行调用的,也就是它的调用位置中,是通过某个对象发起的函数调用。绑定在调用对象上
1、
function foo() {
console.log(this)
}
var obj = {
name: "why",
foo: foo
}
obj.foo() // obj对象
2、
var obj1 = {
name: "obj1",
foo: function() {
console.log(this)
}
}
var obj2 = {
name: "obj2",
bar: obj1.foo
}
obj2.bar()//obj2
- 显示绑定
function foo() {
console.log("函数被调用了", this)
}
var obj = {
name: "obj"
}
// call/apply是可以指定this的绑定对象
foo.call(obj)
foo.apply(obj)
//call和apply区别
//改变this后面的传参方式不同
function sum(num1, num2, num3) {
console.log(num1 + num2 + num3, this);
}
sum.call('call', 20, 30, 40);
sum.apply('apply', [20, 30, 40]);
//call和apply在执行函数时,是可以明确的绑定this, 这个绑定规则称之为显示绑定
//bind绑定
//bind会返回一个新的函数
function foo() {
console.log(this)
}
var newFoo = foo.bind("aaa")
newFoo() //aaa
newFoo() //aaa
newFoo() //aaa
- new绑定
JavaScript函数可以当作类的构造函数来使用,也就是使用new关键字
// 我们通过一个new关键字调用一个函数时(构造器), 这个时候this是在调用这个构造器时创建出来的对象
// this = 创建出来的对象
// 这个绑定过程就是new 绑定
function Person(name, age) {
this.name = name
this.age = age
}
var p1 = new Person("why", 18)
console.log(p1.name, p1.age)
var p2 = new Person("kobe", 30)
console.log(p2.name, p2.age)
var obj = {
foo: function() {
console.log(this)
}
}
其他说明:
forach中的this,foreach中的this默认指向window,可以传入第二个参数改变this指向
setTimeout中的this指向window
2、this绑定优先级
- 默认规则的优先级最低
- 显示绑定优先级高于隐式绑定
- new绑定优先级高于隐式绑定
- new绑定优先级高于bind
- new关键字不能和apply/call使用
3、箭头函数
- 箭头函数不会绑定this、arguments属性
- 箭头函数不能作为构造函数来使用(不能和new一起使用,会抛出异常)
//箭头函数简写
1、参数只有一个,()可以省略
nums.forEach(item=>{
console.log(item)
})
2、函数执行体只有一行代码,{}可以省略
并且默认会将这行代码的执行结果作为返回值
nums.forEach(item=>console.log(item))
nums.filter(item=>item % 2 === 0)
3、代码连写,将数字数组中的偶数乘以100后相加
var res= nums.filter(item=>item%2===0).map(item=>item*100).reducer((preValue,curValue)=>preValue + item)
4、如果箭头函数只有一行代码,并且返回一个对象
var bar = ()=>{
return {name:'byj',age:18}
}
var bar =()=>({name:'byj',age:18})
4、箭头函数中的this指向
在箭头函数中,this指向有外层作用域决定
5、this面试题
this绑定规则1-50
6、call函数的实现
// apply/call/bind的用法
// js模拟它们的实现? 难度
// 给所有的函数添加一个hycall的方法
Function.prototype.hycall = function(thisArg, ...args) {
// 在这里可以去执行调用的那个函数(foo)
// 问题: 得可以获取到是哪一个函数执行了hycall
// 1.获取需要被执行的函数
var fn = this
// 2.对thisArg转成对象类型(防止它传入的是非对象类型)
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg): window
// 3.调用需要被执行的函数
thisArg.fn = fn
var result = thisArg.fn(...args)
delete thisArg.fn
// 4.将最终的结果返回出去
return result
}
function foo() {
console.log("foo函数被执行", this)
}
function sum(num1, num2) {
console.log("sum函数被执行", this, num1, num2)
return num1 + num2
}
// 系统的函数的call方法
foo.call(undefined)
var result = sum.call({}, 20, 30)
// console.log("系统调用的结果:", result)
// 自己实现的函数的hycall方法
// 默认进行隐式绑定
// foo.hycall({name: "why"})
foo.hycall(undefined)
var result = sum.hycall("abc", 20, 30)
console.log("hycall的调用:", result)
// var num = {name: "why"}
// console.log(Object(num))