【JavaScript】JS引擎中执行上下文如何顺序执行代码

【JavaScript】JS引擎中执行上下文如何顺序执行代码已关闭评论
128 次浏览

A+

所属分类：Web前端

摘要

首先我们知道JavaScript引擎包括一个调用栈和堆，调用栈是代码实际执行的地方，使用执行上下文(执行环境)来完成；堆是非结构化的内存池，存储了应用程序所需要的所有对象。

便宜好用的国外VPS推荐

执行上下文是什么？
执行上下文创建

首先我们知道JavaScript引擎包括一个调用栈和堆，调用栈是代码实际执行的地方，使用执行上下文(执行环境)来完成；堆是非结构化的内存池，存储了应用程序所需要的所有对象。

执行上下文是什么？

执行上下文包括全局执行上下文和执行上下文。

全局执行上下文：代码编译完成后进入调用栈执行首先创建全局执行上下文（整个项目只有一个全局执行上下文），是用来执行顶层代码（函数除外，函数只在被调用的时候执行）。

执行上下文：执行一段JavaScript的环境，存储了一些代码执行所需要的必要信息，比如传递给函数的局部变量或者参数。打个比方：我们点外卖，送来的袋子（执行上下文）不只有外卖（JavaScript代码），还有餐具（代码执行所需要的必要信息）。

每一个函数调用就会创建执行上下文来执行。

执行上下文分为三个部分，依次为变量环境，作用域和this关键字：

变量环境VE

let,const and var变量
函数声明
函数形参

作用域

作用域(scoping)：由JavaScript引擎组织和访问,控制我们程序的变量。
主要分为以下三个

全局作用域：在代码中任何地方都能访问到的对象拥有全局作用域。
函数作用域：只能在函数中访问到的对象具有函数作用域，也称局部作用域。

块作用域：ES6新特性，类似于函数作用域，指的是大括号括起来的块，比如if和for循环，块中的变量只能在块中访问，具有块作用域。但只能用let和const,使用var仍能被全局访问。

    if (birthYear >= 1981 && birthYear <= 1996) {       var millenial = true;       const str = `oh,you're a millenial,${firstName}`;       console.log(str);       function add(a, b) {         return a + b;       }     }     console.log(str);//str不能被打印     console.log(add(1, 1));//add函数不能被打印     console.log(millenial);//var变量能打印，能被全局访问

作用域链：若在当前作用域无法查找到需要变量，则通过作用域链来进行变量查找，子作用域查找使用父作用域的变量。

注：如果子作用域和父作用域存在相同的变量名，则直接查找子作用域的，无需进行变量查找。

this关键字

定义：为每个执行上下文（函数）创建的特殊变量，取的值为该函数的调用者本身，具体取值包括以下四种方法 this为调用该方法的对象

方法 this指向调用方法的对象

const luki = {     name : 'lukirence',     year : 2002,     calcAge:function(){ 		return 2037-this.year;     } };

如果在方法内的函数嵌套一个新的函数,该嵌套函数相当于常规函数,this关键字为undefined

const luki = {   fullName: 'lukirence',   year: 2002,   calcAge: function () {     console.log(this);     console.log(2037 - this.year);     const isMillenial = function(){       console.log(this);//undefined       console.log(this.year >=1981);     }     isMillenial();   } };

如何解决嵌套函数能够使用this?

添加self变量=this(ES6之前的旧方法)

const luki = {   fullName: 'lukirence',   year: 2002,   calcAge: function () {     console.log(this);     console.log(2037 - this.year);     const self = this;     const isMillenial = function(){       console.log(self);       console.log(self.year >=1981);     }     isMillenial();   } };

将嵌套函数改成箭头函数

const luki = {   fullName: 'lukirence',   year: 2002,   calcAge: function () {     console.log(this);     console.log(2037 - this.year);     const isMillenial = ()=>{       console.log(this);       console.log(this.year >=1981);     }     isMillenial();   } };

常规函数声明 this为undefined

const calcAge = function (birthYear) {   console.log(2037 - birthYear);   console.log(this);//显示undefined }; calcAge(1991);

箭头函数箭头函数没有this关键字，箭头函数的关键词会通过查找父函数的关键词，若没有则为全局的关键词，即指向全局窗口。

console.log(this);//指向全局窗口window  const calcAgeArrow = birthYear => {   console.log(2037 - birthYear);   console.log(this);//指向全局窗口window }; calcAgeArrow(1991);  const luki = {   fullName: 'lukirence',   year: 2002,   calcAge: function () {     console.log(this);     console.log(2037 - this.year);   },   greet: () => {     console.log(`hi,${this.fullName}`);   }, }; luki.greet();//显示hi undefined,因为this指向window对象

事件监听 this为事件处理器所添加的DOM元素

注:箭头函数的执行上下文不包括参数对象和this关键字

执行上下文创建

在详细了解了执行上下文的内容后，我们来看一段代码实际执行时执行上下文如何在调用栈中活动的。

将以以下代码为例，按每一步骤描述执行上下文创建流程：

const name = 'luki';//--------------------------------1 const first =() =>{//---------------------------------2     let a =1;//-------------------------------------2.1     const b =second(1,2);//-------------------------2.2     a=a+b;//----------------------------------------2.3     return a;//-------------------------------------2.4 }; function second(x,y){//-------------------------------3     var c =2;//-------------------------------------3.1     return c;//-------------------------------------3.2 } const x =first();//-----------------------------------4