【前端精进之路】JS篇：第4期 作用域_前端作用域，2024年最新阿里巴巴大数据开发面试题答案

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新大数据全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注大数据）

正文

function foo() {
function bar() {
…
}
}

函数创建时，各自的[[scope]]为：

foo.[[scope]] = [
globalContext.VO
];

bar.[[scope]] = [
fooContext.AO,
globalContext.VO
];

  

### 作用域与执行上下文


作用域是在声明时就已经确定了，但是执行上下文是在运行的时候才能确定的。比如函数声明时其中this的指向是不确定的，由它最终的调用时环境确定。


执行上下文是函数执行之前创建的。执行上下文最明显的就是this的指向是执行时确定的。而作用域访问的变量是编写代码的结构确定的。



> 
> 作用域和执行上下文之间最大的区别是： **执行上下文在运行时确定，随时可能改变；作用域在定义时就确定，并且不会改变**。
> 
> 
> 


**总结：**


在js代码执行时，首先会创建执行上下文，然后遇到变量，函数，进行声明，此时会进行作用域的创建。然后当函数被调用时（此时就是在运行时），执行上下文才被确定（此时包括this指向被确定）。


  

### 静态作用域与动态作用域


**JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。**


JavaScript 采用的是词法作用域(静态作用域)，函数的作用域在函数定义的时候就决定了。


而与词法作用域相对的是动态作用域，函数的作用域是在函数调用的时候才决定的。


**一个demo**

var value = 1;

function foo() {
console.log(value);
}

function bar() {
var value = 2;
foo();
}

bar();

假设采用静态作用域，执行代码，声明了一个变量value，声明了两个函数foo和bar，然后执行函数bar。bar里面声明了一个变量value，然后执行foo函数，foo函数里面要求打印value，因为采用静态作用域，当前作用域中没有value，所以向上层作用域查找，查找到上层作用域为全局作用域，全局作用域中的value为1，最终打印结果1。


采用动态作用域，执行 foo 函数，依然是从 foo 函数内部查找是否有局部变量 value。如果没有，就从调用函数的作用域，也就是 bar 函数内部查找 value 变量，所以结果会打印 2。


  

### 总结



> 
> Like most modern programming languages, JavaScript uses lexical scoping. This means that functions are executed using the variable scope that was in effect when they were defined, not the variable scope that is in effect when they are invoked. In order to implement lexical scoping, the internal state of a JavaScript function object must in- clude not only the code of the function but also a reference to the current scope chain. (Before reading the rest of this section, you may want to review the material on variable scope and the scope chain in §3.10 and §3.10.3.) This combination of a function object and a scope (a set of variable bindings) in which the function’s variables are resolved is called a closure in the computer science literature. (This is an old term that refers to the fact that the function’s variables have bindings in the scope chain and that therefore the function is “closed over” its variables.)
> 
> 
> Technically, all JavaScript functions are closures: they are objects, and they have a scope chain associated with them. Most functions are invoked using the same scope chain that was in effect when the function was defined, and it doesn’t really matter that there is a closure involved. Closures become interesting when they are invoked under a different scope chain than the one that was in effect when they were defined. This happens most commonly when a nested function object is returned from the function within which it was defined. There are a number of powerful programming techniques that involve this kind of nested function closures, and their use has become relatively common in JavaScript programming. Closures may seem confusing when you first en- counter them, but it is important that you understand them well enough to use them comfortably.
> 
> 
> *JavaScript, The Definite Guide*
> 
> 
> 


翻译成中文的话也许是这样：


和大多数的现代化编程语言一样，`JavaScript`是采用词法作用域的，这就意味着函数的执行依赖于函数定义的时候所产生（而不是函数调用的时候产生的）的变量作用域。为了去实现这种词法作用域，`JavaScript`函数对象的内部状态不仅包含函数逻辑的代码，除此之外还包含当前作用域链的引用。函数对象可以通过这个作用域链相互关联起来，如此，函数体内部的变量都可以保存在函数的作用域内，这在计算机的文献中被称之为闭包。


从技术的角度去将，所有的`JavaScript`函数都是闭包：他们都是对象，他们都有一个关联到他们的作用域链。绝大多数函数在调用的时候使用的作用域链和他们在定义的时候的作用域链是相同的，但是这并不影响闭包。当调用函数的时候闭包所指向的作用域链和定义函数时的作用域链不是同一个作用域链的时候，闭包become interesting。这种interesting的事情往往发生在这样的情况下： 当一个函数嵌套了另外的一个函数，外部的函数将内部嵌套的这个函数作为对象返回。一大批强大的编程技术都利用了这类嵌套的函数闭包，当然，`javascript`也是这样。可能你第一次碰见闭包觉得比较难以理解，但是去明白闭包然后去非常自如的使用它是非常重要的。


  

**用童话故事解释闭包**


建议看一下，很有意思👍🏻。



> 
> **Once upon a time:**
> 
> 
> There was a princess…
> 
> 
> 
> ```
> function princess() {
> 
> ```
> 
> She lived in a wonderful world full of adventures. She met her Prince Charming, rode around her world on a unicorn, battled dragons, encountered talking animals, and many other fantastical things.
> 
> 
> 
> ```
>  var adventures = [];
> 
>  function princeCharming() { /\* ... \*/ }
> 
>  var unicorn = { /\* ... \*/ },
>      dragons = [ /\* ... \*/ ],
>      squirrel = "Hello!";
> 
>  /\* ... \*/
> 
> ```
> 
> But she would always have to return back to her dull world of chores and grown-ups.
> 
> 
> 
> ```
>  return {
> 
> ```
> 
> And she would often tell them of her latest amazing adventure as a princess.
> 
> 
> 
> ```
>      story: function() {
>          return adventures[adventures.length - 1];
>      }
>  };
> }
> 
> ```
> 
> But all they would see is a little girl…
> 
> 
> 
> ```
> var littleGirl = princess();
> 
> ```
> 
> …telling stories about magic and fantasy.
> 
> 
> 
> ```
> littleGirl.story();
> 
> ```
> 
> And even though the grown-ups knew of real princesses, they would never believe in the unicorns or dragons because they could never see them. The grown-ups said that they only existed inside the little girl’s imagination.
> 
> 
> But we know the real truth; that the little girl with the princess inside…
> 
> 
> …is really a princess with a little girl inside.
> 
> 
> [原文链接]( )
> 
> 
> 


  

**参考文章**


[深入理解JavaScript作用域和作用域链]( )


[JavaScript之闭包相关]( )


[JavaScript深入之作用域链]( )




**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
![img](https://img-blog.csdnimg.cn/img_convert/da6cc93736226abfef71e77adcf540f8.png)

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**需要这份系统化的资料的朋友，可以添加V获取：vip204888 （备注大数据）**
[外链图片转存中...(img-CpIVeDCY-1713356618859)]

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**