一步步学习javascript基础篇(2):作用域和作用域链
作用域和作用域链
js的语法用法非常的灵活,且稍不注意就踩坑。这集来分析下作用域和作用域链。我们且从几道题目入手,您可以试着在心里猜想着答案。
问题一、
if (true) {
var str = "李四";
}
alert(str);//弹出值是?
问题二、
function add(num1, num2) {
var sum = num1 + num2;
}
add(1,2);
alert(sum) //弹出值是?
问题三、
var str1 = "张三";
var str2 = "李四";
function fun1() {
var str2 = "王五";
var str3 = "郑六";
alert(str1 + str2 + str3); //弹出值是?
} fun1();
问题四、
var num1 = 10;
function fun1() {
alert(num1);
}
function fun2(fn) {
var num1 = 12;
fn();
}
fun2(fun1); //弹出值是?
js中没有块级作用域
答案一:
if (true) {
var str = "李四";
}
alert(str);
我们看到了,弹出值是”李四“。这说明了js中没有块级作用域(这和我们以前接触的其他语言不同)。不仅if里面是这样,for、while...等等都是这样。
如:
for (var i = 0; i < 10; i++) { }
alert(i);
js中只有函数作用域和全局作用域
我们只能从外层内层作用域访问外层作用域,而外层作用域不能访问内层作用域。
答案二:
function add(num1, num2) {
var sum = num1 + num2;
}
add(1,2);
alert(sum)
(没反映?因为报异常了。不信F12看)如此,我们是访问不到sum的。因为sun是属于add函数内的作用域。 我们只能从add函数内访问到全局作用域的变量值。
js中的作用域链
答案三:
var str1 = "张三 ";
var str2 = "李四 ";
function fun1() {
var str2 = "王五 ";
var str3 = "郑六 ";
alert(str1 + str2 + str3);
}
fun1();
str1取全局作用域、str3去fun1函数作用域的。这里有些疑惑的是str2了。这里就引入了作用域链。
一般我们都说,先从自己的作用域取变量,没取到然后去父作用域中取。这句话没错,不过有时候也会产生疑惑或是混淆。如答案四:
var num1 = 10;
function fun1() {
alert(num1);
}
function fun2(fn) {
var num1 = 12;
fn();
}
fun2(fun1);
“先从自己的作用域取变量,没取到然后去父作用域中取”,这里fun1的父作用域是全局作用域,而不是fn()调用时fun2中的作用域。所以我们可以把这句话改成“先从自己的作用域取变量,没取到然后去自定自己的地方的父作用域中取”。
暂且分析到这里了。后续如果有新的理解再补充进来。
注意:
- 当循环嵌套时千万不要忘记修改循环条件的变量名如:(这样就死循环了)
for (var i = 0; i < 4; i++) {
//......
//......
for (var i = 0; i < 2; i++) {
alert("ok")
}
//......
//......
}
这是学习记录,不是教程。文中错误难免,您可以指出错误,但请不要言辞刻薄。
原文链接:http://haojima.net/zhaopei/513.html
本文已同步至目录索引:一步步学习javascript
最新文章
- go:关于变量地址的疑惑
- 在Android Studio中使用lambda表达式
- Oracle 异常处理汇总
- C# 反转字符串
- mongodb3.2配置文件yaml格式 详解
- 【Tree 3】树形结构数据加载的思考
- readLine读取socket流的时候产生了阻塞
- MAT
- 【LeetCode】15. 3Sum 三个数和为0
- 类库探源——System.Exception
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
- 小A项目为什么加班
- Razor Generator 将cshtml自动生成对应的CS文件
- Ubuntu离线安装VSCode(附带前期准备工作)
- .meta和模型贴图丢失
- kubernetes nginx ingress 使用记录
- Java笔记 (持续更新ing)
- 【手记】走近科学之为什么明明实现了IEnumerable<;T>;的类型却不能调用LINQ扩展方法
- 宝塔安装swoole
- yum 安装mysql数据库
热门文章
- ExtJs基础知识总结:Dom、IFrame和TreePanel、TabPanel(三)
- python3 与 pip3 安装与使用
- Android 如何判断一个应用在运行(转)
- jQuery的DOM操作详解
- 如何找出标有";App Store 精华";,";Essentials";的所有软件?
- 使用Git的Push出现rejected - non-fast-forward错误
- 在Javascript中onclick()方法应用
- 向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
- SpringMvc相关配置的作用
- Android开发 SQLite数据库应用笔记(一)