作用域和作用域链

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

欢迎上海“程序猿/媛”、"攻城狮"入群:【沪猿】229082941 入群须知

一步步学习javascript基础篇(2):作用域和作用域链的更多相关文章

  1. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  2. 一步步学习javascript基础篇(3):Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  3. 一步步学习javascript基础篇(8):细说事件

    终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能 ...

  4. 一步步学习javascript基础篇(7):BOM和DOM

    一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文 ...

  5. 一步步学习javascript基础篇(6):函数表达式之【闭包】

    回顾前面介绍过的三种定义函数方式 1. function sum (num1, num2) { return num1 + num2; }  //函数声明语法定义 2. var sum = funct ...

  6. 一步步学习javascript基础篇(5):面向对象设计之对象继承(原型链继承)

    上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 ...

  7. 一步步学习javascript基础篇(4):面向对象设计之创建对象(工厂、原型和构造函数等模式)

    前面我们介绍了可以通过Object构造函数或对象字面量都可以用来创建单个对象,但是如果需要创建多个对象的话,显然很多冗余代码. 接下来介绍几种模式来创建对象.不过在此之前,我们还是先来了解下 type ...

  8. 一步步学习javascript基础篇(1):基本概念

    一.数据类型 数据类型 基本数据类型(五种) Undefined Null Boolean Number String 复杂数据类型(一种) Object Undefined:只有一个值undefin ...

  9. 一步步学习javascript基础篇(9):ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

随机推荐

  1. .net学习笔记---tcp/udp/http/socket

    什么是TCP和UDP,以及二者区别是什么? TCP的全称为传输控制协议.这种协议可以提供面向连接的.可靠的.点到点的通信. UDP全称为用户数据报协议,它可以提供非连接的不可靠的点到多点的通信. 使用 ...

  2. JQuery数组详解(含实例)

    <!doctype html>jQuery数组处理详解(含实例演示)@Mr.Think 演示所用数组 var _mozi=['墨家','墨子','墨翟','兼爱非攻','尚同尚贤']; 1 ...

  3. 【转载】关于treeview的多层显示的科学用法!

    http://blogs.msdn.com/b/mikehillberg/archive/2009/10/30/treeview-and-hierarchicaldatatemplate-step-b ...

  4. sqlserver 查找某个字段在哪张表里

    select [name] from [库名].[dbo].sysobjects where id in(select id from [库名].[dbo].syscolumns Where name ...

  5. Qt实现端口扫描器

    首先展示一下效果: 界面通过Qt设计师做出来的. 主要有两个类. 首先主函数: #include "mainwindow.h" #include <QApplication& ...

  6. C#版 Winform界面 Socket编程 Server服务器端

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  7. vs2012 发布web应用程序

    Visual Studio 2012 Visual Studio Express 2012 for Web 与 的Visual Studio 2010  Visual Studio Web发布更新 与 ...

  8. linux菜鸟日记

    本地yum源的安装: 要安装本地yum源,首先需要熟悉本地yum文件的配置和光盘的挂载 第一步挂载光盘: 首先需要指定一个光盘挂载目录 通常情况下我习惯使用默认挂载目录,所以一般我使用的光盘挂载命令是 ...

  9. POJ 1979 题解

    Red and Black Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 31722   Accepted: 17298 D ...

  10. POI3.8解决导出大数据量excel文件时内存溢出的问题

    POI3.8的SXSSF包是XSSF的一个扩展版本,支持流处理,在生成大数据量的电子表格且堆空间有限时使用.SXSSF通过限制内存中可访问的记录行数来实现其低内存利用,当达到限定值时,新一行数据的加入 ...