外围作用域(Outer Scope)是指一个变量或函数定义时所在的上下文环境。在JavaScript中,作用域决定了如何查找变量,以及变量能被访问的范围。以下是关于外围作用域的几个关键点:
概念:
- 函数作用域:在JavaScript中,函数内部声明的变量在外部是不可见的,这形成了函数作用域。如果一个变量在当前函数作用域中没有找到,JavaScript解释器会继续在定义该函数的作用域中查找,这个作用域就是当前函数的外围作用域。
- 块作用域:ES6引入了
let
和const
关键字,它们允许块级作用域(如在一个{}
块内部声明的变量)。如果一个变量在当前块作用域中没有找到,解释器同样会继续在外围作用域中查找。 - 全局作用域:如果一个变量在所有函数和块级作用域之外声明,它就属于全局作用域。全局作用域是所有非全局作用域的外围作用域。
示例:
// 全局作用域
var globalVar = 'I am global';
function outerFunction() {
// outerFunction的作用域,也是innerFunction的外围作用域
var outerVar = 'I am outer';
function innerFunction() {
// innerFunction的作用域
var innerVar = 'I am inner';
console.log(innerVar); // 输出:'I am inner'
console.log(outerVar); // 输出:'I am outer',从外围作用域中访问
console.log(globalVar); // 输出:'I am global',从全局作用域中访问
}
innerFunction();
}
outerFunction();
在上面的例子中:
innerFunction
的外围作用域是outerFunction
的作用域。outerFunction
的外围作用域是全局作用域。
箭头函数和外围作用域:
箭头函数不绑定自己的this
,它们的this
值是继承自外围作用域的。这意味着箭头函数的this
与外围作用域中的this
保持一致。
function outerFunction() {
// outerFunction的作用域
this.outerProperty = 'I am from outerFunction';
const arrowFunction = () => {
// arrowFunction的this继承自外围作用域
console.log(this.outerProperty); // 输出:'I am from outerFunction'
};
arrowFunction();
}
outerFunction.call({ outerProperty: 'I am from an object' }); // 输出:'I am from an object'
在上面的例子中,arrowFunction
的this
指向outerFunction
的this
,这是因为箭头函数没有自己的this
,它查找的是外围作用域的this
。由于outerFunction
的this
被显式设置为某个对象,arrowFunction
中的this
也指向这个对象。