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的一些概念的理解 ...
随机推荐
- (转)C语言malloc()与free()的使用
如何使用 malloc 函数 本文为转载内容,原文地址请点击 不要莫名其妙,其实上面这段小小的对话,就是malloc的使用过程.malloc是一个函数,专门用来从堆上分配内存.使用malloc函数需要 ...
- 【2017集美大学1412软工实践_助教博客】团队作业6——展示博客(Alpha版本)
题目 团队作业6: http://www.cnblogs.com/happyzm/p/6791211.html 团队成绩 团队成员简介 项目地址 项目目标,包括典型用户.功能描述.预期用户数量 如何满 ...
- 团队作业八—第二次团队冲刺(Beta版本) 第 1 天
一.每个人的工作 (1) 昨天已完成的工作 由于是才刚开始冲刺,所以没有昨天的工作 (2) 今天计划完成的工作: 对界面的优化和一些细节的完善 (3) 工作中遇到的困难: 工作中出现了意见不一的情况 ...
- 【Alpha】——First scrum Meeting
一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 · 李永豪 编写测试计划 学习JAVA编程及UI设计 · 郑靖涛 Alpha任务分配计划 学习JAVA编程及UI设 ...
- 201521123086《java程序设计》第四周
本章学习总结 尝试使用思维导图总结有关继承的知识点 1.2 使用常规方法总结其他上课内容. 为了不必要写重复的代码,可以运用继承,用关键字extends来定义一个类,被继承的类叫做父类,继承的类叫做子 ...
- 201521123036 《Java程序设计》第14周学习总结
本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 书面作业 MySQL数据库基本操作 1.1 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己的学号.姓名) ...
- Java课程设计 猜数游戏个人博客
1.团队课程设计博客链接 http://www.cnblogs.com/tt1104/p/7064349.html 2.个人负责模块或任务说明 1.成绩排行榜算法的设计: 2.排行榜存放到文件中, 3 ...
- 201521123117 《Java程序设计》第9周学习总结
1. 本周学习总结 2. 书面作业 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现Numbe ...
- java课程设计——算术运算测试个人博客
1.团队课程设计链接 团队博客:http://www.cnblogs.com/yytx/p/7064790.html 2.个人负责模块 有关排行榜的界面设计和代码编写 3.自己的代码提交记录截图 4. ...
- DAU新解
写在回归之时 --------------------------- 抱歉,已经超过三年没有回到这里了. 浮躁,虚荣,一颗心没有落到地上,也没有好好总结一下自己.怀念最开始那个时候的状态,安静的做点事 ...