一步步学习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的父作用域是全局作用域,而不是fu()调用时fun2中的作用域。所以我们可以把这句话改成“先从自己的作用域取变量,没取到然后去自定自己的地方的父作用域中取”。

暂且分析到这里了。后续如果有新的理解再补充进来。

这是学习记录,不是教程。文中错误难免,您可以指出错误,但请不要言辞刻薄。

原文链接:http://haojima.net/zhaopei/513.html

本文已同步至目录索引:一步步学习javascript

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

时间: 2024-12-20 17:11:46

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

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

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.

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

终于学到事件了,不知道为何听到“事件”就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有事件我们的页面就只能阅读了.有了事件,我们可以通过键盘或是鼠标和页面交互了,通过我们不同的操作页面给出不同的响应.好了,开始我们今天的分析吧. DOM0级事件处理方式 什么是DOM0级? 其实世上本来没有DOM0级,叫的人多了就有了DOM0级. 在1998 年 10 月 DOM1级规范成为 W3C 的推荐标准,在此之前

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

一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文档对象模型,针对HTML(或XML)文档的API(应用程序编程接口).描绘的一个层次化的节点树,开发人员可以添加.修改和删除页面的某一部分. 二.细说BOM对象 1.window对象 window对象表示浏览器的一个实例,同时也是ECMAScript 规定的 Global 对象.(Global :所

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

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

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

上一篇介绍了对象创建的几种基本方式,今天我们看分析下对象的继承. 一.原型链继承 1.通过设置prototype指向“父类”的实例来实现继承. function Obj1() { this.name1 = "张三"; } function Obj2() { } Obj2.prototype = new Obj1(); var t2 = new Obj2(); alert(t2.name1); 这里有个明显的缺点就是:(如果父类的属性是引用类型,那么我们在对象实例修改属性的时候会把原型中

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

需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如果我们改变给url添加参数,这样就改变了url,也就会重新请求整个url.这样一来就没有了ajax的优势和作用了.那么,我们应该怎么保持参数而又不重新请求url呢?做过单页面SPA (Single-page Application)的都知道,我们可以使用描点来实现(因为修改描点的时候,不会发送url

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

史上最全、JavaScript基础篇

索宁 Hot summer nights mid July, when you and  I were forever wild. 首页 新随笔 联系 管理 随笔 - 12  文章 - 5  评论 - 19 史上最全.JavaScript基础篇 本章内容: 简介 定义 注释 引入文件 变量 运算符 算术运算符 比较运算符 逻辑运算符 数据类型 数字 字符串 布尔类型 数组 Math 语句 条件语句(if.switch) 循环语句(for.for in.while.do-while) label语

js基础--javascript基础概念之变量与作用域

js基础--javascript基础概念之变量.作用域 javascript按照ECMA-262 的定义,变量与其他语言变量有所不同.js变量时松散的,不需要事先定义变量类型的.这使得他只是一个保存特定值的一个名称.变量与其数据类型可以在脚本的生命周期内改变. 还有明白几点: JavaScript的变量作用域是基于其特有的作用域链的,JavaScript没有块级作用域. 基本类型和引用类型的值 ECMAScript 的变量有两种不同的数据类型:分别是 基本数据类型值 和 引用类型值 : 基本数据