文章目录

作用域
- 1.全局作用域
- - 2.函数作用域
  - 3.块级作用域
  - - 经典例子
作用域链

当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性：

变量对象(Variable object，VO)
作用域链(Scope chain)
this

那么作用域链是什么呢？一起来看看。

作用域

作用域，就是变量或者是函数能作用的范围。

1.全局作用域

除了函数中定义的变量之外，都是全局作用域。

var a = 1;
function bar(){console.log(a);
}
bar();//1

a就是全局变量，在函数里也可以访问a

2.函数作用域

创建函数后在花括号中声明的一些语句或变量只在当前函数中起作用。

var a = 10;
function bar(){var a  = 20;console.log(a);
}
console.log(a);//10，取的全局作用域中的a
bar();//20，取的局部作用域中的a

3.块级作用域

ES6带来的新特性，在语句块中声明的语句或变量只在当前语句块中起作用。

函数作用域和块级作用域根本没有直接关系,函数作用域在ES5和ES6作用完全一样,变量不论是使用var声明还是使用了let ,const声明在外部都是不可以访问的。

块级作用域指的就是使用 if () { }; while ( ) { } …这些语句所形成的语句块 , 并且其中变量必须使用let或const声明(否则就不是块级作用域了),保证了外部不可以访问语句块中的变量。

if(true) {
let name='douqing';
console.log(name); // douqing
}
console.log(name); // ReferenceError: name is not defined

经典例子

for(var i=0;i<4;i++){setTimeout(function(){console.log(i);},200);
}
//4 4 4 4

利用函数形成函数作用域

for(var i=0;i<4;i++){(function(j){setTimeout(function(){console.log(j);},200);})(i)
}
//0 1 2 3

利用let形成块级作用域

for(leti=0;i<4;i++){setTimeout(function(){console.log(i);},200);
}
//0 1 2 3

作用域链

当查找变量的时候，会先从当前作用域的变量对象中查找，如果没有找到，就会从父级作用域(上层环境)的变量对象中查找，一直找到全局作用域的变量对象，也就是全局对象。这样由多个作用域的变量对象构成的链表就叫做作用域链。它由当前环境与上层环境的一系列变量对象组成，保证了当前执行环境对符合访问权限的变量和函数的有序访问。

var a = 20;
function test() {var b = a + 10;//当前作用域没有a，往上找，找到a = 20；function innerTest() {var c = 10;return b + c;//当前作用域没有b，往上找，找到b = a+10；}console.log(d);//Uncaught ReferenceError: d is not defined,一直往上找，最终也没找到d，所以报错return innerTest();
}
test();//40

本文链接:https://blog.csdn.net/qq_39903567/article/details/115069564

前端面试系列-JavaScript作用域和作用域链相关推荐

2020最全前端面试系列（浏览器原理）（最容易忽视的面试隐藏大杀器）
2020前端面试系列(浏览器原理) 浏览器输入URL到返回页面的全过程浏览器渲染步骤重排和重绘触发reflow情形减少reflow方法浏览器本地存储方案的比较 cookie localSto ...
【前端 · 面试】JavaScript 之你不一定会的基础题（二）
最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正.交流. 争取每个知识点能够多总结一些,至少要做到在面试时,针对每个知识点都可以侃起来,不至于哑火. 前言在上一篇文章[前端 · 面试 ...
前端面试之JavaScript
面试题 1 .解释一下什么是闭包 ? 闭包:就是能够读取外层函数内部变量的函数. 闭包需要满足三个条件: 访问所在作用域: 函数嵌套: 在所在作用域外被调用 . 优点: 可以重复使用变量,并且不会造成 ...
前端面试整理JavaScript
1.eval是做什么的? 它的功能是把对应的字符串解析成JS代码并运行: 应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行). 2. null,undefined 的区别? ...
破解前端面试系列（3）：如何搞定纸上代码环节？
很多重视技术的互联网公司在工程师招聘的技术面环节都会要求候选人在纸上写代码(后文用"纸上代码"代称),面试官想通过这种方式考察哪些点?候选人该注意哪些点?本文基于美团早几年常用的一 ...
第 4 节：前端面试指南 — JavaScript篇
终于更新啦,刚更新完「CSS篇」之后,很多读者朋友都在微信催更「面试指南」系列的第 4 期 - JavaScript篇. 前 3 期没看的同学,建议先看完再来看这一期的,传送门: 第 1 节:「简历篇 ...
Web前端面试之JavaScript典型面试题及答案
JavaScript是Web前端三要素之一,是互联网上最流行的脚本语言.一个合格的Web前端工程师一定要掌握JavaScript,而企业在招聘前端人员时也会考察其对JavaScript的掌握.接下来就 ...
清除string内容_前端面试之javascript相关内容整理一
1.js有哪些数据类型?(死记就行,好嗨哟) 答:js基本数据类型:String.Number.Boolean.Null.undefined 混合数据类型:Object(Array) 2.手写AJAX ...
【面试题】「中高级前端面试」JavaScript手写代码无敌秘籍
大厂面试题分享面试题库前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 1. 实现一个new操作符 new操作符做了这些事: 它创建了一个全新的对象. 它会被执行[[Proto ...
前端面试系列-ES6
什么是提升?什么是暂时性死区?var.let 及 const 区别? 当我们在一个作用域使用var声明一个变量的时候,会首先声明这个变量在当前作用域(undefined)的最上面,然后在进行赋值. c ...

前端面试系列-JavaScript作用域和作用域链