学习JS的心路历程-范围Scope和提升(Hoisting)
在上一篇提到了JS有三种声明变量的方式,分别是var、const及let,var和const let最大区别就是范围(scope)的限制。所以在这一篇我们会详谈何谓范围链及他们的复写优先级。
范围Scope
我们先来看一个例子:
var globalVar = 'global';
function scopeFun(){
globalVar =“change in scopeFun”;
console.log(“1.”,globalVar);//1.change in scopeFun
var funVar = 'Im in fun';
console.log(“2.”,funVar);//2.Im in fun
}
scopeFun();
console.log(“3.”,globalVar);//3.change in scopeFun
console.log(“4.”,funVar);//funVar is not defined
在function中所声明的var在全局是没办法作呼叫的,但是在全局声明的在function中却可以用。
这边我们可以确定两件事情:
var是函数级作用域(function-level scope)由function的{}所区隔。
变量会由内往外寻找直到全局,我们称这行为为范围链(Scope Chain)。
那我们再来看ES6新增的let及const的范围:
let globalLet = true;
function scopeFun(){
if(globalLet){
let localLet =“local let”;
const localConst =“local const”;
console.log(localLet,localConst);
}
console.log(localLet,localConst);
}
scopeFun();
由这个例子我们可以得知:
let及const的是内存块作用域(Blocak-level scope)由{}所区隔。
提升(Hoisting)
在讲解变量复写优先级前,我们还需要先了解什么是Hoisting:
在执行代码前,JS会把函式声明放进內存里面,可以在代码声明该函式之前使用它。
function myName(name){
console.log(“my name is”+name);
}
myName(“John”);//my name is John
一般在撰写一个函式时候都会这样作,但我们前面有提到说可以在声明该函式之前使用它,所以我们也可以这样作:
myName(“John”);//my name is John
function myName(name){
console.log(“my name is”+name);
}
当然提升也适用于变量,但是跟函式就有很大的区别了。
如果我们在声明前就先给初始化的话,是可以正常使用的:
price = 10;
price +=1;
console.log(price);//11
var price = 20;
但是如果在声明后才初始化,则前面使用将会得到undefined:
console.log(price);//undefined
var price = 20;
这段代码可以理解成这样:
var price;
console.log(price);//undefined
var price = 20;
这边要注意的是,ES6提供的变量声明let及const是无法做到的,会回报错误:
console.log(price);//ReferenceError: price is not defined
let price= 20;
那如果我们用变量声明函式的话,会发生什么事情呢:
console.log(price);//undefined
price(20);//TypeError: price is not a function
var price = function(amount){
console.log(20*amount);
}
可以看到只有变量被提升到最上面且是undefined,所以无法当成函式使用。
总结:
var是函数级作用域(function-level scope)由function的{}所区隔。
let及const的是内存块作用域(Blocak-level scope)由{}所区隔。
变量会由内往外寻找直到全局,我们称这行为为范围链(Scope Chain)。
可以在声明该函式之前使用它,这行为称为提升(Hoisting)。
变量var也有提升,但如果使用时没有初始化将会得到undefined。
用var声明函式无法在之前使用,因为var提升是undefined。
参考资料:
https://developer.mozilla.org/zh-TW/docs/Glossary/Hoisting
https://ithelp.ithome.com.tw/articles/10198485
最新文章
- spring boot整合shiro出现UnavailableSecurityManagerException
- 小白Linux入门 三
- javaScript中定义类或对象的五种方式
- redhat7下配置tomcat7,更改端口8080后无法访问页面
- MFC坐标空间与映射模式
- HTML&;CSS布局练习---360导航页面
- Codeforces Round #362 (Div. 2) C. Lorenzo Von Matterhorn (类似LCA)
- JS学习之表格的排序
- Keil伪指令
- 双向DFS模板题
- 第6章 Overlapped I/O, 在你身后变戏法 ---被激发的 File Handles -3
- Promise同时进入catch和then——踩坑
- (三十七)从私人通讯录引出的细节I -Notification -Segue -HUD -延时
- java多线程(3)---synchronized、Lock
- Hydra(爆破神器)
- beautifulsoup爬取糗事百科
- January 20th, 2018 Week 3rd Saturday
- 【Hadoop学习之四】HDFS HA搭建(QJM)
- Hue中hive(hive cli)查询结果中显示列名,不带表名
- C语言入门教程-(5)格式化输入输出
热门文章
- C,Java,C#数据类型对比总结
- Http Request Method:options
- 安全测试4_客户端的安全漏洞(XSS、CSRF、点击劫持、URL跳转)
- [UnityShader基础]02.深度测试 &; 深度写入
- 使用wifi ssh: connect to host hadoop000 port 22: No route to host
- git push异常
- [Flex+JAVA]建立Flex+java项目,并实现基本功能
- 转载:approxPolyDP函数
- 文件系统(File System)
- 利用STM32CubeMX之SPI