一步步学习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
一步步学习javascript基础篇(2):作用域和作用域链的更多相关文章
- 一步步学习javascript基础篇(0):开篇索引
索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...
- 一步步学习javascript基础篇(3):Object、Function等引用类型
我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...
- 一步步学习javascript基础篇(8):细说事件
终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...
- 一步步学习javascript基础篇(7):BOM和DOM
一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...
- 一步步学习javascript基础篇(6):函数表达式之【闭包】
回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; } //函数声明语法定义 2. var sum = funct ...
- 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)
上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...
- 一步步学习javascript基础篇(4):面向对象设计之创建对象(工厂、原型和构造函数等模式)
前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...
- 一步步学习javascript基础篇(1):基本概念
一.数据类型 数据类型 基本数据类型(五种) Undefined Null Boolean Number String 复杂数据类型(一种) Object Undefined:只有一个值undefin ...
- 一步步学习javascript基础篇(9):ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
随机推荐
- .net学习笔记---tcp/udp/http/socket
什么是TCP和UDP,以及二者区别是什么? TCP的全称为传输控制协议.这种协议可以提供面向连接的.可靠的.点到点的通信. UDP全称为用户数据报协议,它可以提供非连接的不可靠的点到多点的通信. 使用 ...
- JQuery数组详解(含实例)
<!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...
- 【转载】关于treeview的多层显示的科学用法!
http://blogs.msdn.com/b/mikehillberg/archive/2009/10/30/treeview-and-hierarchicaldatatemplate-step-b ...
- sqlserver 查找某个字段在哪张表里
select [name] from [库名].[dbo].sysobjects where id in(select id from [库名].[dbo].syscolumns Where name ...
- Qt实现端口扫描器
首先展示一下效果: 界面通过Qt设计师做出来的. 主要有两个类. 首先主函数: #include "mainwindow.h" #include <QApplication& ...
- C#版 Winform界面 Socket编程 Server服务器端
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- vs2012 发布web应用程序
Visual Studio 2012 Visual Studio Express 2012 for Web 与 的Visual Studio 2010 Visual Studio Web发布更新 与 ...
- linux菜鸟日记
本地yum源的安装: 要安装本地yum源,首先需要熟悉本地yum文件的配置和光盘的挂载 第一步挂载光盘: 首先需要指定一个光盘挂载目录 通常情况下我习惯使用默认挂载目录,所以一般我使用的光盘挂载命令是 ...
- POJ 1979 题解
Red and Black Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 31722 Accepted: 17298 D ...
- POI3.8解决导出大数据量excel文件时内存溢出的问题
POI3.8的SXSSF包是XSSF的一个扩展版本,支持流处理,在生成大数据量的电子表格且堆空间有限时使用.SXSSF通过限制内存中可访问的记录行数来实现其低内存利用,当达到限定值时,新一行数据的加入 ...