[深刻01] 执行上下文

导航

[深刻01] 执行上下文
[深刻02] 原型链
[深刻03] 继承
[深刻04] 事件循环
[深刻05] 柯里化 偏函数 函数记忆
[深刻06] 隐式转换 和 运算符
[深刻07] 浏览器缓存机制（http缓存机制）
[深刻08] 前端安全
[深刻09] 深浅拷贝
[深刻10] Debounce Throttle
[深刻11] 前端路由
[深刻12] 前端模块化
[深刻13] 观察者模式 发布订阅模式 双向数据绑定
[深刻14] canvas
[深刻15] webSocket
[深刻16] webpack
[深刻17] http 和 https
[深刻18] CSS-interview
[react] Hooks

[部署01] Nginx
[部署02] Docker 部署vue项目
[部署03] gitlab-CI

[源码-webpack01-前置知识] AST抽象语法树
[源码-webpack02-前置知识] Tapable
[源码-webpack03] 手写webpack - compiler简单编译流程

执行上下文的概念

执行上下文是：javaScript代码解析和执行时所在的环境，javascript中运行的全部代码都在执行上下文中执行

须要理解的一些名词

• VO： 变量对象 variable object
• AO： 活动对象 active object
• EC： 执行上下文 execution context
• ECS： 执行上下文栈 execution context stack
• Scope Chain： 做用域链
• Lexical Environment： 词法环境
• Variable Environment： 变量环境
• execution：执行
• lexical：词汇的

执行上下文的类型

执行上下文分为三种类型：

全局执行上下文：

• js代码运行起来，首先进入该环境。不在任何函数中的js代码都位于全局执行上下文中
• 一个程序中只能存在一个全局上下文，位于执行上下文栈的最底部
• 全局执行上下文会作两件事：（1）建立一个全局对象 （2）将this指向这个全局对象
• 在浏览器环境全局对象是window，在node环境全局对象是global

函数执行上下文：

• 每次调用一个函数，都会生成一个新的函数执行上下文
• 每一个函数都有本身的函数执行上下文，但只有被调用时才会被建立
• 函数执行上下文的生命周期分为两个阶段，建立阶段和执行阶段

Eval执行上下文：

• eval函数执行时产生的执行上下文，不建议使用

执行上下文栈（函数调用栈）

• 栈是一个后进先出的结构，用于储存 在js代码执行期间产生的全部执行上下文
• 具体过程：
  • 在javascript刚开始运行时，首先产生全局执行上下文，压入栈，位于栈底
  • 每当发生一个函数被调用，则产生函数执行上下文，压入栈，位于栈顶
  • 当这个函数执行完后，会从执行上下文栈中弹出
  • 引擎会继续去执行位于栈顶的函数

执行上下文的生命周期

建立阶段：（预编译阶段）

• 执行上下文会建立： 变量对象VO（arguments，形参，变量，函数），做用域链，this

执行阶段：

• 变量赋值，函数引用，以及执行其余代码
• 当（执行上下文）执行完毕后，就会出栈，等待被js垃圾回收机制回收

变量对象

变量对象VO ，活动对象AO

变量对象的分类

• 不一样执行上下文环境的变量对象有不一样的表现
• 全局执行上下文中的 变量对象
• 函数执行上下文中的 变量对象

全局执行上下文中的变量对象

• 全局执行上下文中的变量对象就是：全局对象
• 什么是全局对象
  • 进入任何执行上下文以前就创建的对象，只有一份，在程序任何地方都能访问，生命周期终止于程序退出时
• 全局对象初始化：
  • 初始化一系列的原始属性：Math、String、Date、parseInt、window等
  • 浏览器中，window对象引用全局对象自身，全局环境中this也能引用自身

函数执行上下文中的变量对象

• 在函数执行上下文中，变量对象VO 用活动对象AO来表示
• AO是在进入函数执行上下文时（预编译阶段）被建立的，经过argument对象进行初始化
• 复习下执行上下文的生命周期：（1）建立阶段即预编译阶段 （2）执行阶段。

（1） 函数执行上下文的，进入函数执行上下文阶段（预编译阶段）代码还未真正执行，此时AO被建立，此时包含的属性有：

• arguments对象
• 全部形参
  • 形参名称和形参的值，组成了AO对象的属性。
  • 传递实参，则该形参的值被赋值为实参
  • 没有传递实参，值是undefined
• 全部函数声明
• 全部变量声明
• this

函数执行上下文
- 建立阶段（进入执行上下文阶段，或者说预编译阶段），即进入函数执行上下文时，AO被建立，代码并未真正执行
- 此时AO中的属性有：arguments, 形参，函数声明，变量声明，this
- 代码示例：


function a(name, age) {
    var b = 1
    function c() {}
    var d = function()()
    (function e () {}); // 注意e函数的写法
    var f = function g(){}
}
a('woow') // 注意这里没有传实参age


------------
预编译阶段的AO以下：
AO(a function execution context) = {
    arguments: {
        ......
    },
    name: 'woow',
    age: undefined,
    b: undefined,
    c: reference to function c(){},
    d: undefined
    f: undefined
}
// 注意：
// e函数表达式不在AO中
// g函数不在AO中


------------
执行阶段的AO以下：
AO(a function execution context) = {
    arguments: {
        ......
    },
    name: 'woow',
    age: undefined,
    b: 1,
    c: reference to function c(){},
    d: reference to FunctionExpression "d",
    f: reference to FunctionExpression "f"
}
复制代码

（2）活动对象AO和变量对象VO的区别：

• 变量对象：是规范或引擎实现层面的，在js的环境中没法访问，在进入函数执行上下文阶段（预编译阶段），VO才被激活，成为AO
• 活动对象：只有成为了活动对象，变量对象的属性和方法才能被访问

变量提高

优先级： 函数形参 > 函数声明 > 变量声明

函数名已经存在，则新的覆盖旧的

变量名已经存在，直接跳过变量声明

- 变量提高，其实是在函数执行上下文中：进入函数执行上下文时，生成的活动对象AO的属性的赋值过程

变量提高
- 优先级：形参 > 函数声明 > 变量声明 
- 函数名已经存在，则新的覆盖旧的
- 变量名已经存在，则跳过变量声明（注意：只是跳过变量的声明，赋值是正常的赋值）

复制代码

（例1）
function a(name, age) {
    console.log(name) // -------------------------- 'wang'
    console.log(age) // --------------------------- undefined
    var name = 'woow_wu7'
    console.log(name) // -------------------------- 'woow_wu7'
}
a('wang')

实际执行的代码以下：
function a(name, age) {
    var name = 'wang'
    var age = undefined // ------------------------ 优先级：形参 > 变量声明，因此形参声明并被赋值
    // var name = undefined // -------------------- 变量名已经存在了，跳过变量声明，即这行代码不执行
    console.log(name) // -------------------------- 'wang'
    console.log(age) // --------------------------- undefined, 未传入实参
    name = 'woow_wu7' // -------------------------- 执行阶段被从新赋值
    console.log(name) // -------------------------- 'woow_wu7'
}
a('wang')
复制代码

（例2）
function a(name, age) {
    console.log(name) // -------------------------- function name(){....}
    console.log(age) // --------------------------- undefined
    var name = 'woow_wu7'
    function name() {
        console.log('name()')
    }
    console.log(name) // --------------------------- 'woow_wu7'
}
a('wang')

实际执行的代码以下：
function a(name, age) {
    var name = 'wang' // -------------------------- 优先级：形参 > 函数声明 > 变量声明
    function name() {...} // ---------------------- 优先级：函数声明 > 变量声明；函数名name已经存在，则新的覆盖旧的
    // var name = undefined // -------------------- 变量名已经存在，则跳过变量声明，至关于该行不执行
    console.log(name) // -------------------------- function name(){....}
    console.log(age) // --------------------------- undefined
    name = 'woow_wu7' // -------------------------- 执行时从新被赋值
    function name() {
        console.log('name()')
    }
    console.log(name) // --------------------------- 'woow_wu7'
}
a('wang')
复制代码

个人语雀：www.yuque.com/woowwu/msyq… juejin.im/post/5dc7db…
juejin.im/post/5bdfd3…
juejin.im/post/5ab072…
juejin.im/post/58ec3c…
www.jianshu.com/p/330b1505e…

复习

手写new

• 构造函数
  • 构造函数的首字母一般大写
  • this指向的是实例对象
  • 调用时经过new命令
  • 构造函数也能够接收参数
• new命令
  • 执行构造函数，返回实例对象
  • new命令自己就能够执行构造函数，因此函数后面的那对括号能够不要。好比：new fn 或者 new fn() 均可以
• 构造函数调用忘记使用new命令？
  • 构造函数忘记使用new命令调用的话，构造函数就成了普通函数，函数中的this就要在调用时才能肯定指向
  • 如何避免构造函数忘记使用new命令调用：
  • （1）在构造函数内使用严格模式'use strict'，这样忘记使用new就是报错
  • （2）就是判断是否使用了new，如何判断？
  • !(this instanceof Fubar) => 若是this不是Fubar的实例，就用new命令调用return new Fubar()
• new命令的原理
  • 建立一个空对象，做为将要返回的实例对象
  • 将这个空对象的原型指向构造函数的prototype属性
  • 将这个空对象赋值给函数内部的this关键字
  • 执行构造函数内部的代码
  • 若是构造函数的返回值是一个对象，就返回这个对象。不然返回这个空对象即this对象
• 构造函数中的return
  • 构造函数中，若是return后面跟着一个对象，new命令就会返回这个对象
  • 构造函数中，若是return后面跟的不是一个对象，或者没有返回值，就是返回this对象
  • 普通函数若是用new命令调用，则会返回一个空对象

手写new
- new命令执行构造函数，返回实例对象
- 构造函数中有return，若是后面跟一个对象new命令会返回这个对象，若是后面不是对象，就会返回this对象
- new命令生成的实例对象能够继承构造函数的prototype属性 => 即实例能够访问构造函数的prototype上的属性和方法
- new命令生成的实例能够访问构造函数中的属性和函数


过程：
1. 新建一个空对象
2. 将空对象的隐式原型指向构造函数的显示原型 => 空对象就能访问构造函数的prototype上的属性和方法
3. 将构造函数中的this指向这个空对象 => this上绑定的属性和方法实际上就绑在了空对象上
4. 执行构造函数 => 若是有return,并返回一个对象，就返回这个对象，若是不是对象，就返回这个空对象
5. 若是构造函数的返回值是一个对象，就返回这个对象。不然返回这个空对象即this对象


代码：
function Constructor(name) {
  this.name = name
  this.age = 20
  return this
}
Constructor.prototype.address = 'chongqing'

function _new() {
  const obj = {}
  // 还能够经过 const obj = new Object()来生成

  const paramsConstructor = Array.prototype.shift.call(arguments)
  // 获取传入new函数的构造函数
  // 等于 [].prototype.shift.call(arguments)
  // 等于 [].prototype.shifig.apply(arguments)

  obj.__proto__ = paramsConstructor.prototype
  // 将空对象的隐式原型指向构造函数的显示原型
  // 这样paramsConstructor.prototype就成了obj的原型对象，obj能够访问原型对象上的属性和方法
  // 注意：Object.create() 该方法能够以参数对象为原型，返回一个实例对象
  // 因此：空对象的生成，加空对象的隐式原型的绑定能够一行代码搞定：
  //!!!!!!!能够：const obj = Object.create(paramsConstructor.prototype)
  //!!!! 还能够：const obj = Object.setPrototypeOf({}, paramsConstructor.prototype)

  const res = paramsConstructor.apply(obj, arguments)
  // 将构造函数中的this绑定在空对象上，并执行构造函数
  // 注意：这里arguments是shift后剩下的值，由于apply能够本身转化类数组的对象，因此无需额外操做

  return Object.prototype.toString.call(res).includes('Object') ? res : obj
  // 若是构造函数返回的是一个对象，就返回这个对象，不然返回这个空对象
  // 等于 typeof res === 'object' ? res : obj
}
const res = _new(Constructor, 'woow_wu7')
console.log(res, 'res11')
复制代码