[JavaScript知识库]重学前端-JavaScript高级

重学前端-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）
  • 第二部分：在代码执行中，对变量赋值，或者执行其他的函数；

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))

4、柯里化

5、对象

6、ES新特性

1、JavaScript中的类和对象

1、继承