一、作用域
作用域:能够储存变量当中的值,并且能在之后对这个值进行访问或修改。
1.1 词法作用域
历史:基础的作用域分为两种,词法作用域与动态作用域,js等大多数
都采用的是词法作用域。只有如Bash脚本
采用动态作用域。
定义:
所谓的词法(代码)作用域:就是代码在编写过程中体现出来的作用范围,代码一旦写好,不用执行,作用范围就已经确定好了。
类型
词法作用域包括 全局作用域与函数作用域。
简单来说:全局作用域就是函数外的,是共享的;函数作用域就是函数内部的,是私有的。
在JS中词法作用域的规则:()
- 函数允许访问函数外部的数据
- 整个代码结构中只有函数可以限定作用域
- 变量申明分显式申明和隐式申明,var i=100(显式申明 );i=100(隐式申明) ,隐式申明被当做全局变量。
- 作用规则首先使用提升规则分析(变量提升与函数提升)
- 如果当前作用域中有了名字了,就不通过作用域链查找了
demo1:访问函数外数据
var num = 123;
function foo(){
console.log( num );
}
foo(); //123
demo2:限定作用域
function foo(){
var num = 123;
}
foo();
console.log( num ); // 抛错num没有被定义
demo3:隐式声明变成全局变量
// 非严格模式下
function foo(){
num = 456;
}
foo();
console.log( num ); // 456
demo4:变量提升
if( false ){
var num = 123;
}
console.log( num ); //undefined
demo5:当前作用域中有了名字了,就不通过作用域链查找
var num = 123;
function foo () {
var num = 456;
function func(){
console.log( num );
}
func();
}
foo(); //456
1.2 块级作用域
出现解决了两个问题:
1)变量提升导致内层变量可能会覆盖外层变量
var i = 5;
function f() {
console.log(i);
let i = 6; // 改成var i = 6 试一下
}
f(); // i is not defined
2)用来计数的循环变量泄露为全局变量
for (let i = 0; i < 10; i++) { } // 改成var 试一下
console.log(i); // i is not defined
3)解决闭包问题
'use strict';
var arr = [];
for(let i = 0; i < 2; i++){ // 改成var 试一下
arr[i] = function(){
console.log(i);
};
};
arr[1]();//1
let
(1)let声明的变量只在块级有效
if (true) {
let i = 6;
console.log('inside: ' + i);
}
console.log('outside: ' + i);
(2)let 确实存在提升。只不过由于暂时死区
的限制,你不能在 let x 之前使用
console.log(i); //i is not defined
let i = 1;
如果你在项目中打印这句话,发现是打印underfined,原因是babel转译了let变成var了,而真正的let是通过ECMAScript去实现的。所以此时的let存在变量提升。去chrome控制台打印就好了。
const
const是用来声明恒定变量的,声明的同时就必须赋值,否则会报错。必须是const a = 1
,如下面代码就会报错。
const a;
a = 1 // 报错
二、作用域链
描述
只有函数才能制造作用域结构,那么只要是代码,至少有一个作用域,即全局作用域。
作用域查找方法
方法1:域气泡区分作用域
demo
function foo(a) {
var b = a * 2;
function bar(c) {
console.log(a, b, c);
}
bar(b * 3);
}
foo(2); // 2, 4, 12
为了好理解,我们把它分为三层嵌套气泡图形。
1、包含着整个全局作用域,其中只有一个标识符:foo。
2、包含着 foo 所创建的作用域,其中有三个标识符:a、bar 和 b。
3、包含着 bar 所创建的作用域,其中只有一个标识符:c。
查找
它从最内层的作用域3
开始查找,我们查找a,在最内层的bar函数
内没找到,继续向上在foo函数找a
,找到了是2,那么查找a结束j,a=2。(要记住找到a就结束了,不会再往上层查找了,这个叫做 “遮蔽效应” )。
方法2:绘制作用域图:
1、首先看变量在第几条链上,在该链上看是否有变量的定义与赋值,如果有直接使用
2、如果没有到上一级链上找( n - 1 级链),如果有直接使用,停止继续查找。
3、如果还没有在此往上找… 直到全局链(0级),还没有就是is not defined
4、注意,切记:同级的链不可混合查找
demo
function f1() {
var num = 123;
function f2() {
console.log( num );
}
f2();
}
var num = 456;
f1(); //123
解析步骤:
第一步:找到0级链:函数f1 、变量 num=456。
第二步:找到1级链:函数f1下的 var num = 123与函数f2。
第三步:找到2级链:函数f2下的 console.log( num )。
第四步:调用f1(),f1()中调用了f2(),进入2级链console.log( num ),f2内没有num,向1级链查找,找到var num = 123,结束。
更复杂的场景demo分析:
var num = 123;
function f1() {
console.log( num );
}
function f2(){
var num = 456;
f1();
}
f2(); //123
解析步骤:
第一步:找到0级链:var num = 123、函数f1、函数f2。
第二步:找到1级链:函数f1下的console.log( num )、函数f2下的var num = 456与f1()。
第三步:调用f2(),函数f2中调用了f1(),此时我们找到函数fn1最内层的作用域链是1级链,发现f1中没有num,就往0级链去查找,找到var num = 123。
结论:
作用域链查找,简单的推荐域气泡法,直接从最内层开始找,对于复杂场景可以使用绘制作用域链路图方式。
更多内容可以看我的集录: 全面攻陷js:更新中...