Javascript之旅——第一站:从变量说起
原文出处: 一线码农的博客 欢迎分享原创到伯乐头条
工作这几年,js学的不是很好,正好周末有些闲时间,索性买本《js权威指南》,大名鼎鼎的犀牛书,好好的把js深入的看一看。买过这本书的第一印象就是贼厚,不过后面有一半部分都是参考手册。
一:作用域
说起变量第一个要说到的肯定就是作用域,正是因为不熟悉JS的作用域,往往就会把面向对象的作用域张冠李戴,毕竟有些东西总是习惯性的这样,但是并不是每次照搬都是可以的,那么下一个问题就来了,js到底是什么作用域,当然是函数作用域了,我们的浏览器就是一个被实例
化的window对象,如果在window下定义一个name字段,那么name字段就具有window这个函数作用域,也就是在window下都是可以访问的,如果在window下定义一个function ctrip,然后里面再定义一个name,那么这个新定义的name只能在ctrip函数下通用,而老的name继续window下通用,举个例子。
从图中可以看出两点:
1: 在window下定义了一个name,居然还可以在function下定义一个重名的name,这个在C#里面是不可想象的。
2:在JS下就可以做到眼瞎,它只认自己的作用域,所以就出现了第一个”second”,你可能觉得这个没有什么稀奇的地方,这是因为可能你还没有真正理解什么是函数作用域,解析器在执行ctrip的时候,第一件事情就是寻找ctrip下的所有局部变量,然后再执行后续语句,既然是先寻找,那么var name=”second”这条语句定义在ctrip中任何位置都是可以的,下面我们把语句调换过来。
可以看到在ctrip函数下,第一个console.log输出的是undefined,这个结果可以证实,确实做了第一件事情是收集到了name这个局部变量,可能有人说为什么没有变成”second“,那是因为初始化操作必须是逐语句执行,所以在ctrip函数中执行console.log(name)时,此时解析器只知道有一个未赋值的变量name,所以就console的时候就是undefined了。
二:作用域链
从上面的这个例子中我们也很清楚的知道了,在function中定义的变量只具有function范围内的作用域,同时我们也看到上面这个例子只是一层嵌套,window是个大的function,里面是一个ctrip的function,同样的道理也可以延伸到多层嵌套,比如三层,四层。。。。N层,这些层就形成了一个链式结构。
从图中可以看到,我在ctrip下再定义了一个plane函数,这样的话就有三层了,输出的结果也是我们希望看到的,每层的name只在自己的作用域范围内生效,但是下面有一个问题来了,有一天我傻逼了,在定义plane的函数时,把 var name=”third” 中的var忘记写了,那么这个时候,plane中的name到底是什么值呢? 是first还是second呢?
1
2
3
4
5
6
7
8
9
10
11
12
|
var name= "first" ;
function ctrip(){
var name= "second" ;
function plane(){
name= "third" ;
console.log(name);
}
plane();
console.log(name);
}
ctrip();
console.log(name);
|
现在就是考验你是否真的懂了作用域链,仔细想想会发现,当代码执行到plane函数中的name=”third“时,发现plane函数中并没有name这个局部变量,恰好代码又在ctrip这个大函数中,所以解析器就会回溯到ctrip函数中寻找name,发现果然有name,这个时候就把ctrip的name修改成了”third“。
又有一天,我喝多了酒又傻逼了一回,在定义plane函数的时候,把name=”third” 错写成了 nam=”third”; 丢了一个e,你可以说是酒精的问题,又不是我代码的问题。那么这个时候解析器该怎么处理呢?同样的道理,在回溯时,发现ctrip没有,再回溯到顶层的window下,发现还是没有,这个时候解析器做了这样的处理,既然整个链中都没有,你又赋值了,我总不能给你报错,那多尴尬呀,就索性给你在window下隐式的定义一个nam变量,这个时候nam其实就是全局变量了。我们可以在window顶层console一下nam看看。
好了,关于变量的东西也就这么多了,没什么稀奇的,理解了就没什么意思了。
转载于:https://www.cnblogs.com/sunscheung/p/4341658.html
Javascript之旅——第一站:从变量说起相关推荐
- Javascript之旅——第二站:对象和数组
一觉睡到中午,本来准备起来洗洗继续睡,不过想想没辙,还得继续这个系列,走过变量的第一站,第二站我们再来看看对象和数组. 一:对象 说起对象,我们不自然就想起了面向对象中自封装的一个类,同样JS中也 ...
- Python的学习之旅第一站:基本语法
初识Python Python是一门简单易学的解释型语言.对于什么是解释型语言,在C语言的第一章可以学习到.感谢大家的支持和鼓励.点个赞,评论和收藏.谢谢啦!我也是初学者,大家一起努力吧,写博客记录自 ...
- asp.net mvc 之旅—— 第一站 从简单的razor入手
记得2011年mvc3刚出来的时候,我们就有幸将 mvc3 用在我们团购项目上,当时老大让我们用一个星期时间来熟悉mvc,幸好园子里面的老朋友DR 正在写mvc3系列,也恭喜这个系列文章被整理成专题供 ...
- Spring之旅第一站(不得不佩服老外...)
第1章 Spring之旅 说明 1.本文抄写了<Spring 实战>重点内容,参考了GitHub上的代码 2.每个人的学习方式不一样,但目的是一样的,活学活用.最近一直在听<我们不一 ...
- DRP之旅第一站--DRP概览
进入了DRP的项目,相对于以前的知识而言DRP的概念比较陌生,是个新的概念,面对新的概念和知识我们应该如何去跟它打交道. 学习一个新知识应该从哪些角度进行思考: 这个知识概念是什么? 什么是DRP?: ...
- Sql Server之旅——第一站 那些给我们带来福利的系统视图
本来想这个系列写点什么好呢,后来想想大家作为程序员,用的最多的莫过于数据库了,但是事实上很多像我这样工作在一线的码农,对sql 都一知半解,别谈优化和对数据库底层的认识了,我也是这样... 一:那些系 ...
- HTML(卓音前端之旅第一站)
HTML相关知识 一.html的语法规范(标签) 特点: 标签关系: 二.基本结构标签(==骨架标签==) 三.常用标签 1. 标题标签 2.==段落和换行标签== 1.段落: 2.换行 3.文本格式 ...
- Javascript之旅——第十站:为什么都说闭包难理解呢?
原文:Javascript之旅--第十站:为什么都说闭包难理解呢? 研究过js的朋友大多会说,理解了js的原型和闭包就可以了,然后又说这些都是js的高级内容,然后就又扯到了各种神马的作用域...然后不 ...
- Javascript之旅——第四站:parseInt中要注意的坑
Javascript之旅--第四站:parseInt中要注意的坑 原文:Javascript之旅--第四站:parseInt中要注意的坑 前些天信用卡站点要接入一个新功能,不过还真比较坑爹,asp站点 ...
最新文章
- 程序员编程时戴耳机是在听什么?
- python变量需要声明吗_python中可以声明变量类型吗
- 宝塔ssl验证域名失败_申请一年期限的AlphaSSL泛域名证书 – 安装第三方证书
- openlayers 2 高亮显示元素以及通过属性查询高亮某一元素
- 圆形渐变shader_Flutter 中渐变的高级用法
- 1305. GT考试
- 30分钟快速搭建移动应用直传OSS服务
- linux std::queue 怎么释放内存_电脑卡慢怎么办?一个小工具帮你轻松释放内存,瞬间提升电脑性能...
- java输入输出高速
- jquery请求后台数据(get请求)
- linux系统开机启动流程
- Volley(五)—— 自定义Request
- Scarpy 学习记录(scrapy爬取双色球,并pyinstaller打包)
- PTES渗透测试执行标准
- C盘空间不够?教你简单扩容C盘空间
- xp提示计算机内存不足,在xp系统中,经常提示虚拟内存不足的原因是什么?
- Android 分屏模式-多窗口支持
- 2020年中国经济蓝皮书(第四部分)
- 睿普康 以太网接口PHY芯片主要替换瑞昱的pin对pin芯片
- 基于2.4GHz射频NRF24L01模块的智能家居项目总结
热门文章
- 计算机设计原则,CISSP备考系列之计算机设计原则[10-39]
- centos7上的图形化界面svn客户端_Git实战一:图形客户端规范用法小讲
- foxmail 怎么修改存储路径_FoxMail 7.2的邮件存储目录修改
- 在内网中使用maven_maven构建docker镜像三部曲之三:推送到远程仓库(内网和阿里云)-Go语言中文社区...
- linux i2c核心,总线与设备驱动,Linux2.6.37 I2C驱动框架分析(一)
- filco linux 蓝牙,挖矿知识普及(一)Filcoin是怎么被挖出来的?
- Python,OpenCV使用KNN来构建手写数字及字母识别OCR
- IDEA Java解析GeoJson.json文件
- C++中的.hpp理解
- 3. 5种常见卷积论文、解读、使用方法、实现代码整理(conv)