理解js中的自由变量以及作用域的进阶
如果你不知道什么是作用域,建议你先看什么是作用域链,什么是原型链。这篇文章,因为这些内容都是有关联性的。
什么是自由变量?
如我在全局中定义了一个变量a,然后我在函数中使用了这个a,这个a就可以称之为自由变量,可以这样理解,凡是跨了自己的作用域的变量都叫自由变量。
var a = "追梦子";
function b(){
console.log(a); //追梦子
}
b();
上面的这段代码中的变量a就是一个自由变量,因为在函数b执行到console.log(a)的时候,发现在函数中找不到变量a,于是就往上一层中找,最后找到了全局变量a。
作用域的进阶
在我讲作用域链的时候说过如果有一个全局变量a,以及函数中也有一个变量a,那么只会作用函数中的那个变量a,都是有一种情况就显得比较复杂一些,我们一起来看看这段代码。
var aa = 22;
function a(){
console.log(aa);
}
function b(fn){
var aa = 11;
fn();
}
b(a); //
最后打印的不是11而是22,为什么会这样呢?在我解释之前我建议你事先看一下js中的执行上下文,菜鸟入门基础。这一文,如果不了解js的执行顺序就比较难以理解,另外如果你看了我这几天的文章应该有种感觉,就是内容的关联性都特别强,这也是为什么很多js新手朋友不能够理解的地方。
我们接着说为什么打印的是22,一起来分析一下这段代码。
假如我们的代码是这样的
var aa = 22;
function a(){
console.log(aa);
}
打印出的是22,我想大家应该没有意见,但是有一点我一定要提,那就是在创建这个函数的时候,这个函数的作用域就已经决定了,而是不是在调用的时候,这句话至管重要。
有了这句话的基础是不是理解上面的那段代码就变得不值一提了?
为了照护新手朋友我还是分析一下过程吧。
首先我们创建了一个全局变量aa
var aa = 22;
接着我们创建了一个函数a
function a(){
console.log(aa);
}
这时js解析这个函数的时候,就已经决定了这个函数a的作用域,既如果在函数a中找不到变量aa那就会到全局变量中找,如果找到了就返回这个aa,如果找不到就报错。
接着我们又创建了一个函数b
function b(fn){
var aa = 11;
fn();
}
在函数b中我们定义了又重新定义了这个变量aa,虽然我们这个时候重新定义了变量aa,但是因为函数a的作用域在创建的时候已经决定了,所以在函数b中创建的那个变量aa以及和函数a里面的那个变量aa没有关系了。
function b(fn){
var aa = 11;
fn();
}
b(a);
我们把函数a传到了函数b中,并且当做函数b的形参,接着我们执行了这个被传进去的函数a,最后打印出来的就是22。
在创建这个函数的时候,这个函数的作用域就已经决定了,而是不是在调用的时候。
理解js中的自由变量以及作用域的进阶的更多相关文章
- 深入理解Js中的this
深入理解Js中的this JavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及 ...
- 图文结合深入理解 JS 中的 this 值
图文结合深入理解 JS 中的 this 值 在 JS 中最常见的莫过于函数了,在函数(方法)中 this 的出现频率特别高,那么 this 到底是什么呢,今天就和大家一起学习总结一下 JS 中的 th ...
- 深度理解js中var let const 区别
首先要理解js中作用域的概念 作用域:指的是一个变量的作用范围 1.全局作用域 直接写在script中的js代码,在js中,万物皆对象,都在全局作用域,全局作用域在页面打开时创建,在全局作用域中有一个 ...
- 如何理解js中的this和实际应用中需要避开哪些坑
this是什么 this就是函数内部的关键字 看下面例子理解js中的this // 例子1 function fnOne () { console.log(this) } 'use strict' f ...
- 怎么理解js中的事件委托
怎么理解js中的事件委托 时间 2015-01-15 00:59:59 SegmentFault 原文 http://segmentfault.com/blog/sunchengli/119000 ...
- 深入理解javascript中执行环境(作用域)与作用域链
深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...
- js中的块级作用域
概述 函数是js中最常见的作用域单元, 声明在一个函数内部的变量或函数会在所处的作用域中隐藏起来, 这是有意为之的非常好的设计原则. 但是随着js的发展, 我们有了某个代码块(通常指{..}内部)隐藏 ...
- 如何更好的理解js中的this,分享2段有意思的代码
关于js中this的浅析,大家可以点击[彻底理解js中this的指向,不必硬背]这篇博客了解. 今天遇到2段比较有意思的代码. ----------------第一段----------------- ...
- 深入理解JS中的对象(二):new 的工作原理
目录 序言 不同返回值的构造函数 深入 new 调用函数原理 总结 参考 1.序言 在 深入理解JS中的对象(一):原型.原型链和构造函数 中,我们分析了JS中是否一切皆对象以及对象的原型.原型链和构 ...
随机推荐
- new一个Object对象占用多少内存?
Java的自动内存管理机制省却了很多编码工作,大大地提高了Java的生产力,而且JVM的性能也越来越好,特别是G1的出现,改善了垃圾回收中stop the world的状况. 也许很多人都没有考虑过这 ...
- 每天一个linux命令(7):mv命令
mv命令是move的缩写,可以用来移动文件或者将文件改名(move (rename) files),是Linux系统下常用的命令,经常用来备份文件或者目录. 企业中常用的 [root@ local]# ...
- JavaWeb学习总结(二)——Tomcat服务器学习和使用(一)
一.Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...
- Maven学习总结(一)——Maven入门——转载
一.Maven的基本概念 Maven(翻译为"专家","内行")是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.1. ...
- Socket通信实例(C#)
SOCKET原理 一.套接字(socket)概念 套接字(socket)是通信的基石,是支持TCP/IP协议的网络通信的基本操作单元.它是网络通信过程中端点的抽象表示,包含进行网络通信必须的五种信息: ...
- Less安装与使用
Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量.Mixin.函数等特性,使CSS更易维护和拓展.(less可以运行在node或浏览器端) 首先:安装+配置环境 在node.js中通过它 ...
- 如何使用代码动态的获取和设置ImageView的宽度和高度?
http://blog.csdn.net/wulianghuan/article/details/8644144 国内某金融企业的一道面试题:如何在代码中获得一个ImageVIew的高度和宽度? 相信 ...
- linux云主机怎么安装WDCP
linux云主机 教你成功安装WDCP的2个方法(第一个不成功就试第2个) 工具/原料 Xshell 云服务器 方法/步骤 1 先用Xshell连接你的服务器 2 输入一下代码 wget ...
- jdk分析工具:jps和jstack
jps 用来查看基于HotSpot JVM里面所有进程的具体状态, 包括进程ID,进程启动的路径等等.与unix上的ps类似,用来显示本地有权限的java进程,可以查看本地运行着几个java程序,并显 ...
- Java web实时进度条整个系统共用(如java上传进度条、导入excel进度条等)
先上图: 这上文件上传的: 这是数据实时处理的: 1:先说说什么是进度条:进度条即计算机在处理任务时,实时的,以图片形式显示处理任务的速度,完成度,剩余未完成任务量的大小,和可能需要处理时间,显示方式 ...