什么是作用域
几乎所有的编程语言就是在变量中存储值,并且能读取和修改此值。事实上,在变量中存储值和取出值得能力,给程序赋予了状态。如果没有这样的概念,一个程序虽然可以执行一些任务,但是它们将会受到极大的限制而且不会非常有趣。
常见的作用域主要分为几个类型
| 对象 | 类型 |
|---|---|
| global/window | 全局作用域 |
| function | 函数作用域(局部作用域) |
| {} | 块状作用域 |
| this | 动态作用域 |
[!TIP]
如果一个变量或者其他表达式不在“当前的作用域”,那么js机制会继续沿着作用域链上查找直到全局作用域(global或者浏览器中的window),如果找不到将不可被使用。作用域也可以根据代码层次分层,以便子作用域可以访问父作用域,通常是指沿着链式的作用域链查找,而不能从父作用域引用子作用域的变量和引用
全局作用域
变量在函数或者代码块{}外定义。不过,在函数或者代码块{}内未定义的变量也是拥有全局作用域的(不推荐)。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
以上实例carName在函数内,但是拥有全局作用域,它将作为global或者window的属性存在。
[!Warning]
在函数内部或者代码中没有定义的变量实际上是作为window/global的属性存在,而不是全局变量。换句话说没有使用var定义的变量虽然拥有全局作用域,但是它是可以被delete的,而全局变量不可以。
函数作用域
在函数内部定义的变量。函数作用域内,对外是封闭的,从外层的作用域无法直接访问函数内部的作用域。
如果想要读取函数内的变量,必须借助return或者闭包。
return方式
function bar(value) {
var testValue = 'inner';
return testValue + value;
}
console.log(bar('fun')); // "innerfun"
闭包方式
function bar(value) {
var testValue = 'inner';
var rusult = testValue + value;
function innser() {
return rusult;
};
return innser();
}
console.log(bar('fun')); // "innerfun"
通常来说,return是函数对外交流的出口,而return可以返回的是函数,根据作用域的规则,函数内部的子函数是可以获取函数作用域的变量的。
块状作用域
es6中普及块状作用域。什么是块,只要认识{}就可以了。
ES6中的let
动态作用域
通俗的讲,变量的作用是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫静态作用域。
function foo() {
console.log(a); // 2 (不是 3!)
}
function bar() {
var a = 3;
foo();
}
var a = 2;
bar();
拓展
欺骗词法作用域-会导致更低下的性能
如果词法作用域是由函数被声明的位置唯一定义的,而且这个位置完全是一个编写时的决定。但是有两种方法可以修改词法作用域。eval和with
- 性能
通过运行时修改,或创建新的词法作用域,eval()和with都可以欺骗编写时定义的词法作用域。js引擎在编译阶段进行了许多优化工作。其中的一些优化原理都归结为实质上在在进行词法分析可以静态地分析代码,并提前决定所有的变量和函数声明都在什么位置,这样执行期间就可以少花些力气来解析标识符。
但如果引擎在代码中发现了一个eval()或者with,它实质上就不得不假定自己知道所有的标识符的位置可能是无效的,因为它不可能在词法分析时就知道你将会向eval(...)传递什么样的代码。那么它将做的几乎左右的优化都会变得没有意义,所以它就会简单地根本不做任何优化。
你的代码几乎肯定会趋于运行的更慢,只因为你在代码的任何地方引入了一个了eval(..) 或with。无论引擎将在努力限制这些悲观臆测的副作用上表现得多么聪明,都没有任何办法可以绕过这个事实:没有优化,代码就运行的更慢。
- 提升
函数作用域和块级作用域的行为都是依赖于这个相同规则的:在一个作用域中声明的任何变量都附着在这个作用域上。
只有声明本身被提升了,而任何赋值或者其他的执行逻辑都被留在原处。
提升是以作用域为单位的。
函数声明会被提升,但是函数表达式不会。
foo(); // 不是 ReferenceError, 而是 TypeError!—— 非法操作
var foo = function bar() {
// ...
};
函数优先:函数声明和变量声明都会被提升。但是函数会首先被提升,然后才是变量。
let有没有被提升
let 的「创建」过程被提升了,但是初始化没有提升。
var 的「创建」和「初始化」都被提升了,赋值undefined
function 的「创建」「初始化」和「赋值」都被提升了