一个人搞得定网站建设,昆明网站建设 熊掌号,邯郸网站制,咨询北京国互网网站建设前言大厂面试题分享 面试题库前后端面试题库 #xff08;面试必备#xff09; 推荐#xff1a;★★★★★地址#xff1a;前端面试题库大家好#xff0c;笔者呢最近再回顾JavaScript知识时#xff0c;又看到了JavaScript的一些较为常见的内容#xff0c;仔细看了之后发现…前言大厂面试题分享 面试题库前后端面试题库 面试必备 推荐★★★★★地址前端面试题库大家好笔者呢最近再回顾JavaScript知识时又看到了JavaScript的一些较为常见的内容仔细看了之后发现之前理解的并不深所以给记录了下来加深印象。执行上下文与执行栈、作用域与作用域链、闭包。执行上下文例题大家先来看一道较为简单的题看下是否能看出来结果var a 10;
functionfn(b) {b 20;console.log(a, b);
}
functionfn1() {a 100;fn(a);
}
fn(200); //输出结果fn1(); // 输出结果复制代码大家可以看出来输出结果是什么吗如果你已经算出来的话那么说明你对执行上下文还是有一些理解的欢迎继续往下看加深印象如果你没算出来或者输出结果与你算的不相符那也先不要着急先看下边内容看完后再回来算概念大家都知道JavaScript代码的在运行的时候都是自上而下按顺序执行的但是呢实际并非是一行一行的执行那大家有没有了解过它在执行代码的时候做过哪些准备做过哪些事情比如代码解析、分配内容都是在哪处理的那这个地方呢就是执行上下文是准备工作的所在环境执行上下文类型执行上下文呢有三种类型分别是全局执行上下文函数执行上下文还有就是eval函数执行上下文那么我们继续执行上下文呢是在代码编译阶段创建的来看看执行上下文的生命周期执行上下文生命周期创建阶段执行阶段创建阶段执行上下文的创建阶段具体做了什么事呢又分为三部分ExecutionContext {ThisBinding thisvalue,LexicalEnvironment { ... },VariableEnvironment { ... },
}
复制代码确定this指向在全局执行上下文中this指向的是全局对象在函数执行上下文中this指向取决于该函数是如何被调用的看下这个democonst obj {fn: function(){console.log(this)}
}
obj.fn(); //fn: f();
const func obj.fn;
func(); // Window复制代码词法环境官方的 ES6 文档把词法环境定义为词法环境是一种规范类型基于 ECMAScript 代码的词法嵌套结构来定义标识符和具体变量和函数的关联。一个词法环境由环境记录器和一个可能的引用外部词法环境的空值组成。简单来说词法环境是一种持有标识符—变量映射的结构。这里的标识符指的是变量/函数的名字而变量是对实际对象[包含函数类型对象]或原始数据的引用。现在在词法环境的内部有两个组件(1) 环境记录器和 (2) 一个外部环境的引用。环境记录器是存储变量和函数声明的实际位置。外部环境的引用意味着它可以访问其父级词法环境作用域。词法环境有两种类型全局环境在全局执行上下文中是没有外部环境引用的词法环境。全局环境的外部环境引用是 null。它拥有内建的 Object/Array/等、在环境记录器内的原型函数关联全局对象比如 window 对象还有任何用户定义的全局变量并且 this的值指向全局对象。在函数环境中函数内部用户定义的变量存储在环境记录器中。并且引用的外部环境可能是全局环境或者任何包含此内部函数的外部函数。环境记录器也有两种类型如上声明式环境记录器存储变量、函数和参数。对象环境记录器用来定义出现在全局上下文中的变量和函数的关系。简而言之在全局环境中环境记录器是对象环境记录器。在函数环境中环境记录器是声明式环境记录器。注意 — 对于函数环境声明式环境记录器还包含了一个传递给函数的 arguments 对象此对象存储索引和参数的映射和传递给函数的参数的 length。抽象地讲词法环境在伪代码中看起来像这样GlobalExectionContext {LexicalEnvironment: {EnvironmentRecord: {Type: Object,// 在这里绑定标识符}outer: null}
}
FunctionExectionContext {LexicalEnvironment: {EnvironmentRecord: {Type: Declarative,// 在这里绑定标识符}outer: Globalorouterfunctionenvironmentreference}
}
复制代码变量环境它同样是一个词法环境其环境记录器持有变量声明语句在执行上下文中创建的绑定关系。如上所述变量环境也是一个词法环境所以它有着上面定义的词法环境的所有属性。在 ES6 中词法环境组件和变量环境的一个不同就是前者被用来存储函数声明和变量let 和 const绑定而后者只用来存储 var 变量绑定。我们看点样例代码来理解上面的概念let a 20;
const b 30;
var c;
functionmultiply(e, f) {var g 20;return e * f * g;
}
c multiply(20, 30);
复制代码执行上下文看起来像这样GlobalExectionContext {
ThisBinding: Global Object,
LexicalEnvironment: {EnvironmentRecord: {Type: Object,// 在这里绑定标识符a: uninitialized ,b: uninitialized ,multiply: func }outer: null},
VariableEnvironment: {EnvironmentRecord: {Type: Object,// 在这里绑定标识符c: undefined,}outer: null}
}
FunctionExectionContext {ThisBinding: Global Object,
LexicalEnvironment: {EnvironmentRecord: {Type: Declarative,// 在这里绑定标识符Arguments: {0: 20, 1: 30, length: 2},},outer: GlobalLexicalEnvironment},
VariableEnvironment: {EnvironmentRecord: {Type: Declarative,// 在这里绑定标识符g: undefined},outer: GlobalLexicalEnvironment}
}
复制代码注意 — 只有遇到调用函数 multiply 时函数执行上下文才会被创建。可能你已经注意到 let 和 const 定义的变量并没有关联任何值但 var 定义的变量被设成了 undefined。这是因为在创建阶段时引擎检查代码找出变量和函数声明虽然函数声明完全存储在环境中但是变量最初设置为 undefinedvar 情况下或者未初始化let 和 const 情况下。这就是为什么你可以在声明之前访问 var 定义的变量虽然是 undefined但是在声明之前访问 let 和 const 的变量会得到一个引用错误。这就是我们说的变量声明提升。执行阶段这是整篇文章中最简单的部分。在此阶段完成对所有这些变量的分配最后执行代码。注意 — 在执行阶段如果 JavaScript 引擎不能在源码中声明的实际位置找到 let 变量的值它会被赋值为 undefined。执行栈那根据上述执行上下文的理解那我们知道在执行代码中会有很多的执行上下文那么执行上下文是怎么确定执行顺序的。执行上下文存放的位置就是在执行上下文栈也叫调用栈。具有LIFOLast In First Out后进先出也就是先进后出的特性。那我们来看下之前的例题来分析下var a 10;
functionfn(b) {b 20;console.log(a, b);
}
functionfn1() {a 100;fn(a);
}
fn(200); //输出结果fn1(); // 输出结果复制代码首先进入全局执行环境创建全局执行上下文环境并加入栈中fn()函数被调用进入对应的函数执行环境创建函数执行环境并加入栈执行 console.log(a, b);代码console.log(a, b);代码出栈fn()函数执行完毕后出栈fn1()函数被调用进入对应的函数执行环境创建函数执行环境并加入栈继续fn()函数被调用进入对应的函数执行环境创建函数执行环境并加入栈执行 console.log(a, b);代码console.log(a, b);代码出栈fn()函数执行完毕后出栈fn1()函数出栈全局执行上下文出栈题解那我们再来分析下例题的答案var a 10;
functionfn(b) {b 20;console.log(a, b);
}
fn(200);
复制代码在执行fn函数时此fn活动对象为AO : {a: 10,b: 20,arguments: {0 : 20, length:0}
}
复制代码所以此时输出结果为1020继续看var a 10;
functionfn(b) {b 20;console.log(a, b);
}
functionfn1() {a 100;fn(a);
}
fn1();
复制代码在执行fn1函数时此fn1活动对象为AO : {a: 100,fn: reference to functionfn(){}arguments: {length: 0}
}
复制代码在继续执行fn函数时此fn活动对象为AO : {a: 100,b: 20,arguments: {0 : 20, length:0}
}
复制代码所以此时输出结果为10020作用域例题大家先来看下下边的题看下是否能看出来结果var a 1;
functionfn() {var b 10;c 100;let d 20;console.log(1000)returnfunction() {console.log(a); console.log(b);console.log(d)}
}
var func fn();
func();
console.log(b);
console.log(d);
复制代码大家可以看出来输出结果是什么吗概念作用域是可访问的变量对象函数的结合同时也决定了这些变量的可访问性。JavaScript中有三种作用域分别是全局作用域函数作用域块级作用域。那就来聊聊这三种作用域全局作用域什么是全局作用域呢先来看下概念最外层的函数和在最外层函数外面定义的变量是拥有全局作用域的所有的未声明的变量自动声明为拥有全局作用域的变量我们开来接着看下上边例题var a 1;
functionfn() {var b 10;c 100;console.log(1000)returnfunction() {console.log(a); console.log(b);}
}
fn();
console.log(c)
复制代码那我们根据上述概念来分析下变量a呢是拥有全局作用域的全局变量是可以在程序任何位置都可以访问到的函数fn也是拥有全局作用域的函数接着来看下输出结果fn(); // 1000console.log(c); //100复制代码这个就很简单了吧。相信99%的前端 应该都会吧函数作用域来看下函数作用域的概念函数作用域呢也被称为局部作用域因为一般只有在固定的代码片段中可以访问到也就是说只能在函数内部访问函数外部是访问不到的。那我们接着来看下上述例题相信小部分人是卡在console.log(b)这个输出结果上了没关系继续往下看var a 1;
functionfn() {var b 10;c 100;console.log(1000)returnfunction() {console.log(a); console.log(b);}
}
var func fn();
func();
console.log(b)
复制代码来继续根据函数作用域的概念来分析下变量b呢是在函数内部所以称为局部变量只能在函数内部访问外部是无法访问的那根据这个解释看的话这个输出结果就很明显了吧var func fn(); //1000func(); //1, 10console.log(b); //b is not defined复制代码那么现在知道为什么console.log(b);输出结果是b is not defined了吗块级作用域我们来看看块级作用域的概念简单来说变量是存在于一个大括号之内在大括号之外是不能访问这些块级作用域中的变量当然是有局限性的只针对于ES6 中的const与let来说因为呢在ES6之前呢JavaScript是没有块级作用域的那继续看例题例题中有let声明的变量var a 1;
functionfn() {let d 20;returnfunction() {console.log(d)}
}
var func fn();
func();
console.log(d);
复制代码看上述块级作用域的解释那我们知道let d 20;是在大括号中的变量那根据概念括号外是无法访问的那也应该知道答案是什么了吧console.log(d); //d is not defined复制代码那最后在回头看初始例题是不是一切都变的很简单最后输出结果var func fn(); // 1000func(); // 11020console.log(b); // b is not defined// 不过console.log(d); 是输出不了结果的因为上一步已经报错了console.log(d); // d is not defined复制代码作用域链那我们继续看上述例题var a 1;
functionfn() {var b 10;c 100;let d 20;console.log(1000)returnfunction() {console.log(a); console.log(b);console.log(d)}
}
var func fn();
func();
console.log(b);
console.log(d);
复制代码其中console.log(a)输出a那这个a是在哪里来的因为在一般的情况下会在当前作用域中取值那在当前作用域没找到的话会去上级作用域中寻找一直到找到全局作用域。这么一个寻找的过程中呢就会形成一个链条就叫做作用域链总结作用域是可访问的变量对象函数的结合同时也决定了这些变量的可访问全局作用域是说在最外层的函数以及不在任何函数或者打括号中声明的变量都在全局作用域下程序中任务位置都可以访问的变量函数作用域呢是变量声明在函数中只能在函数内部访问函数外部是访问不到的块级作用域呢是说对于ES6 中的const与let来说在大括号之内的变量是存在于块级作用域中的大括号之外不能访问这些块级作用域中的变量作用域链在寻找变量值的时候层层往上形成的链条闭包例题大家先来看下这道题看下是否能看出来输出结果var data [];
for (var i 0; i 3; i) {data[i] function () {console.log(i);};
}
data[0](); // 输出结果
data[1](); // 输出结果
data[2](); // 输出结果复制代码优雅永不过时答对了说明你对闭包还是有一定研究的没答对的继续往下看概念那我们先来看看闭包的概念什么是闭包看看MDN与高级程序设计给出的概念能够访问其它函数内部变量的函数称为闭包能够访问自由变量的函数称为闭包分析那我们来分析下上边的例题在分析之前你需要对作用域以及执行上下文有一定的了解如果不太明确的话可以优先看下这两篇文章再继续阅读下面内容var data [];
for (var i 0; i 3; i) {data[i] function () {console.log(i);};
}
data[0](); // 输出结果
data[1](); // 输出结果
data[2](); // 输出结果复制代码首先我们记录下这道例题的执行上下文栈的变化首先进入了全局执行上下文然后创建全局执行上下文将全局上下文放入执行上下文栈中然后继续初始化执行全局上下文创建作用域链以及变量对象等那么此时的全局上下文VO为globalContext {VO: {data: [...],i: 3}
}
复制代码执行data[0](),然后创建data[0]()执行上下文继续放入执行上下文栈内然后呢初始化data[0]()执行上下文创建作用域链以及变量对象等那么此时的data[0]()AO为data[0]Context {AO: {arguments: {length: 0} }
}
复制代码那么此时的data[0]()作用域链为data[0]Context {Scope: [AO, globalContext.VO]
}
复制代码因为在data[0]Context活动对象AO中是没有i值的所以去全局上下文的变量对象中查找此时全局上下文的变量对象中i值为3所以data[0]()输出结果为3执行完毕后在data[0]()执行上下文在执行上下文栈给弹出至于data[1]()与data[2]()与步骤3-5是一样的所以在这就不多说了场景至于闭包的使用场景其实在日常开发中使用到是非常频繁的防抖节流函数定时器回调等就不一一列举了优缺点优点闭包帮我们解决了什么问题呢内部变量是私有的可以做到隔离作用域保持数据的不被污染性缺点同时闭包也带来了不小的坏处说到了它的优点内部变量是私有的,可以做到隔离作用域,那也就是说垃圾回收机制是无法清理闭包中内部变量的那最后结果就是内存泄漏大厂面试题分享 面试题库前后端面试题库 面试必备 推荐★★★★★地址前端面试题库
