JS 函数作用域及变量提升那些事!
虽然看了多次js函数作用域及变量提升的理论知识,但也是一知半解~
这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~
主要参考书籍:
《你不知道的JavaScript(上卷)》第一部分
《JavaScript高级程序设计》第四章 4.2 执行环境与作用域
理解要点:
1. js其实是一门编译语言,代码的执行分为两个阶段:(《你不知道的JavaScript(上卷)》)
a.编译阶段
b.执行阶段
2. 作用域嵌套:
在当前作用域中无法找到某个变量时,引擎就会在外层嵌套中继续查找,直到找到该变量,或是抵达最外层作用域为止。(《你不知道的JavaScript(上卷)》)
3. 包括变量和函数在内的所有声明都会在任何代码被执行前首先被处理。变量及函数声明的提升也是在这个阶段。
注意:(1)变量及函数声明的提升只是提升“声明”,并不会提升“赋值”,赋值是在函数执行阶段完成的。
(2)函数表达式不能被提升。
4. 声明变量:使用var声明的变量会自动被添加到最近的环境中。没有使用var声明,该变量会自动被添加到全局变量中。(《JavaScript高级程序设计》)
注意:这里的没有使用var声明指的是从当前作用域向上延伸搜索,直到在全局作用域中都没有找到该变量的声明,此时该变量才会自动被添加到全局变量中。(参考上面理解要点“2”)
好啦,以下抛出题目,可以先试着做一下,你的答案是什么 ^_^
一.
var foo = 1;
function bar( ) {
foo=10;
return function foo() { };
}
bar( );
console.log(foo);
二.
var foo = 1;
function bar() {
foo = 10;
return;
function foo() {};
}
bar();
console.log(foo);
三.
var a = 1;
function fn() {
console.log(a);
var a = 2;
}
fn();
console.log(a);
四.
var a = 1;
function fn(a) {
console.log(a);
var a = 2;
}
fn(a);
console.log(a);
华丽丽的分割线———————————————————————————————————————————
哈哈,是不是so easy,以下是自己的理解,如果有误,还望大神指出^_^
一.
var foo = 1;
function bar( ) {
foo=10;
return function foo() { };
}
bar( );
console.log(foo);
理解要点:
1. 在bar()函数作用域中,foo 变量并没有使用 var 进行声明 ,所以在执行 foo = 1; 语句时,引擎会沿着作用域链向上查找,结果在全局作用域中找到了 var foo;此时全局作用域中的 foo 的值为 1;执行了 bar() 函数中的 foo = 10;后,最终全局作用域中的变量 foo 的值为 10;
2. return function foo(){}; 在此处是一个函数表达式,而不是函数声明,所以不存在函数声明的提升。
所以:
var foo = 1;
function bar( ) {
foo=10;
return function foo() { };
}
bar( );
console.log(foo);//
以下抛出题一的变形和答案,可以自行理解喔 ^_^
function bar( ) {
foo=10;
return function foo() { };
}
bar( );
console.log(bar());//ƒ foo() { }
console.log(foo);//
function bar( ) {
var foo=10;
return function foo() { };
}
bar( );
console.log(foo);//foo is not defined
二.
var foo = 1;
function bar() {
foo = 10;
return;
function foo() {};
}
bar();
console.log(foo);
理解要点:
1. bar()函数作用域中,function foo(){};语句虽然在 return;语句后面,对的,return;语句后的所有语句都不会被执行,但是在执行代码前,函数声明会被提前处理,此时函数声明语句会被提升到当前作用域的最前面。即实际上是这样的:
var foo = 1;
function bar() {
function foo() {};
console.log(foo);//ƒ foo() {}
foo = 10;
console.log(foo);//10
return;
function foo() {};//return;后的语句不执行
console.log(foo);
}
bar();
console.log(foo);
2. 既然 bar()函数作用域中已经有了 foo 的声明,说明 bar()中 foo 只是一个局部变量,在 bar()执行完毕就会被销毁,不影响全局作用域中的 foo 变量,所以:
var foo = 1;
function bar() {
foo = 10;
return;
function foo() {};
}
bar();
console.log(foo);//
三.
var a = 1;
function fn() {
console.log(a);
var a = 2;
}
fn();
console.log(a);
理解要点:
1. 函数 fn()的变量声明语句var a = 2;会提升;
2. fn ()存在函数局部变量 a;与全局作用域中的变量 a 互不影响;
所以实际上是这样的:
var a = 1;
function fn() {
var a;
console.log(a);//undefined
a = 2;
console.log(a);//
}
fn();
console.log(a);//
即:
var a = 1;
function fn() {
console.log(a);//undefined
var a = 2;
}
fn();
console.log(a);//
四.
var a = 1;
function fn(a) {
console.log(a);
var a = 2;
}
fn(a);
console.log(a);
理解要点:
1. 函数形参是存在于函数作用域中的局部变量,所以此题 fn(a)中相当于声明了一个局部变量 a;
2. fn(a);相当与 fn(1);
所以:
var a = 1;
function fn(a) {
console.log(a);
var a = 2;
}
fn(a);
console.log(a)//
又是华丽丽的分割线———————————————————————————————————————————
以下另外一些思考题,可以自行理解喔 ^_^
var foo = 0;
(function fn1(){
foo = 1;
console.log(foo);//
(function fn2(){
var foo = 2;
console.log(foo);//
(function fn3(){
foo = 3;
console.log(foo);//
}());
}());
}());
console.log(foo);//
(function fn1(){
(function fn2(){
(function fn3(){
foo = 3;
}());
}());
}());
console.log(foo);//
(function fn1(){
(function fn2(){
var foo;
(function fn3(){
foo = 3;
}());
}());
}());
console.log(foo);//Uncaught ReferenceError: foo is not defined
JS 函数作用域及变量提升那些事!的更多相关文章
- JS _函数作用域及变量提升
虽然看了多次js函数作用域及变量提升的理论知识,但也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷)&g ...
- JS中作用域和变量提升(hoisting)的深入理解
作用域(Scoping) javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部 ...
- 原型模式故事链(4)--JS执行上下文、变量提升、函数声明
上一章:JS的数据类型 传送门:https://segmentfault.com/a/11... 好!话不多少,我们就开始吧.对变量提升和函数声明的理解,能让你更清楚容易的理解,为什么你的程序报错了~ ...
- JS作用域、变量提升和闭包
作用域 作用域可以理解为JS引擎执行代码的时候,查找变量的规则. 从确定变量访问范围的阶段的角度,可以分为2类,词法作用域和动态作用域.js是词法作用域. 从变量查找的范围的角度,可以分为3类,全局作 ...
- javascript中的变量作用域以及变量提升
在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解. 变量作用域 “一个变量的作用域表示这个变量存在的上 ...
- javascript中的变量作用域以及变量提升详细介绍
在javascript中, 理解变量的作用域以及变量提升是非常有必要的.这个看起来是否很简单,但其实并不是你想的那样,还要一些重要的细节你需要理解变量作用域 “一个变量的作用域表示这个变量存在的上下文 ...
- JS函数——作用域
一 : 作用域的相关概念 首先看下 变量作用域 的概念:一个变量的作用域是程序源代码中定义这个变量的区域.————————<javascript权威指南>第六版全局变量拥有全局作用域,函数 ...
- Javascript作用域和变量提升
下面的程序是什么结果? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 结果是10: 那么 ...
- JS函数作用域及作用域链理解
从事web开发工作,尤其主要是做服务器端开发的,难免会对客户端语言JavaScript一些概念有些似懂非懂的,甚至仅停留在实现功能的层面上,接下来的文章,是记录我对JavaScript的一些概念的理解 ...
随机推荐
- NHibernate教程(14)--使用视图
本节内容 引入 1.持久化类 2.映射文件 3.测试 结语 引入 在数据库操作中,我们除了对表操作,还有视图.存储过程等操作,这一篇和下篇来学习这些内容.这篇我们来学习如何在NHibernate中使用 ...
- NHibernate教程(11)--多对多关联查询
本节内容 多对多关系引入 多对多映射关系 多对多关联查询 1.原生SQL关联查询 2.HQL关联查询 3.Criteria API关联查询 结语 多对多关系引入 让我们再次回顾在第二篇中建立的数据模型 ...
- 转:Java IO流学习总结
Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...
- 201521123107 《Java程序设计》第8周学习总结
第7周作业-集合 1.本周学习总结 2.书面作业 1.List中指定元素的删除 题集jmu-Java-05-集合之4-1 1.1 实验总结 这次的函数题是编写convertStringToList和r ...
- Swing-JMenu菜单用法-入门
菜单是Swing客户端程序不可获取的一个组件.窗体菜单大致由菜单栏.菜单和菜单项三部分组成,如下图所示: 由图可见,对于一个窗体,首先要添加一个JMenuBar,然后在其中添加JMenu,在JMenu ...
- 201521123052《Java程序设计》第5周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 学习了更多markdown的知识 参考资料: 百度脑图 XMind 2. 书面作 ...
- 201521123019 《Java程序设计》第4周学习总结
1. 本章学习总结 2. 书面作业 Q1.注释的应用:使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对象设计(大作业1-非常重要) 2.1 讲故事 ...
- 读取指定excel,修改并某个值并另存到指定路径
HSSFWorkBook是解析excel2007以前的版本(xls)之后的版本使用XSSFWrokBook(xlsx) 附:处理excel2007之后的版本代码: package gbyp.autoQ ...
- Jquery第二篇【选择器、DOM相关API、事件API】
前言 前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库-能够简化我们书写的代码-.本博文主要讲解使用Jquery定位HTML控件[定位控件就是获取HTML的标签],使用Jqu ...
- Servlet知识点大纲
这是我整理的Servlet知识点大纲,可按照它的顺序来学习-..具体的内容在我的博客中都可以找到!