JS函数本身的作用域实例分析
在JS中,函数拥有自身的作用域,也可以使用父级作用域中的变量。函数本身的作用域指的是在其内部可以访问的变量和函数。本文将详细讲解JS函数本身的作用域,以及两个具体的实例分析。
函数内部可以访问的变量有两种,分别是自有变量和父级变量。
自有变量指的是函数内部定义的变量,只能在函数内部访问。例如下面的代码片段:
function demo() {
var name = '张三';
console.log(name);
}
demo(); // 输出 '张三'
console.log(name); // 抛出错误,name未定义
在函数内部定义了名为 name
的变量,这个变量只能在函数内部使用,无法在外部访问到。
在函数内部还可以访问到父级作用域内的变量,这种作用域链的是因为JS采用了词法作用域。例如下面的示例:
var age = 18;
function demo() {
console.log(age);
}
demo(); // 输出 18
函数内部并没有定义变量 age
,但是由于函数的父级作用域是全局作用域,所以可以在函数内部访问到全局变量 age
的值。
函数本身的作用域是在函数定义时确定的。可以在在函数内部使用自有变量和访问父级变量,但是无法在函数外部访问这些变量。下面是一个示例:
function demo() {
var name = '张三';
function inner() {
console.log(name);
}
inner(); // 输出 '张三'
}
demo();
console.log(name); // 抛出错误,name未定义
在函数内部定义了一个名为 inner
的函数,这个函数可以访问到外层 demo
函数内部定义的变量 name
,输出了变量的值。而在函数外部访问变量 name
会抛出错误。
闭包可以访问到创建它的函数的内部变量,在这个例子中,利用函数本身的作用域和闭包的特性,实现了一个计数器:
function counter() {
var num = 0;
return function() {
num ++;
console.log(num);
}
}
var c1 = counter();
c1(); // 输出 1
c1(); // 输出 2
c1(); // 输出 3
var c2 = counter();
c2(); // 输出 1
c2(); // 输出 2
在 counter
函数内部定义了一个变量 num
,并且返回了一个闭包,这个闭包可以访问到 num
变量。在外部多次调用闭包,每次都能够更新 num
的值并输出。
利用函数本身的作用域可以实现模块化开发,通过匿名函数的方式可以模拟出模块的功能:
var module = (function() {
var name = 'module';
function getName() {
return name;
}
return {
getName: getName
}
})();
console.log(module.getName()); // 输出 'module'
在示例中,利用匿名函数自身作用域的特性,定义了一个名为 module
的变量,并且返回了一个对象,这个对象包含了用于外部调用的函数 getName
。在外部调用 module.getName()
可以输出 'module'。这种方式可以模拟出一个独立的模块,避免了全局变量的污染。