193 lines
4.5 KiB
Markdown
193 lines
4.5 KiB
Markdown
# 作用域
|
||
### 练习
|
||
```
|
||
var color = "blue";
|
||
|
||
function changeColor() {
|
||
let anotherColor = "red";
|
||
|
||
function swapColors() {
|
||
let tempColor = anotherColor;
|
||
anotherColor = color;
|
||
color = tempColor;
|
||
|
||
// 这里可以访问color、anotherColor和tempColor
|
||
}
|
||
|
||
// 这里可以访问color和anotherColor，但访问不到tempColor
|
||
swapColors();
|
||
}
|
||
|
||
// 这里只能访问color
|
||
changeColor();
|
||
|
||
```
|
||
|
||
分析上面的作用域链：
|
||
<details>
|
||
<summary>展开查看</summary>
|
||
|
||
* window
|
||
* color
|
||
* changecolor()
|
||
* anothercolor
|
||
* swapcolors()
|
||
* tempcolor
|
||
</details>
|
||
|
||
|
||
|
||
### 垃圾回收机制
|
||
优化内存占用的最佳手段就是保证在执行代码时只保存必要的数据。如果数据不再必要，那么把它设置为null ，从而释放其引用。这也可以叫作解除引用 。这个建议最适合全局变量和全局对象的属性。
|
||
局部变量在超出作用域后会被自动解除引用
|
||
即 全局变量(GO) 不会被销毁，但是局部变量(AO)函数执行完后会被销毁
|
||
也可以手动销毁变量，即赋值为null
|
||
|
||
如下面的例子所示：
|
||
```
|
||
function createPerson(name){
|
||
let localPerson = new Object();
|
||
localPerson.name = name;
|
||
return localPerson;
|
||
}
|
||
|
||
let globalPerson = createPerson("Nicholas");
|
||
|
||
// 解除globalPerson对值的引用
|
||
|
||
//globalPerson = null;
|
||
|
||
```
|
||
解析：
|
||
<details>
|
||
<summary>展开查看</summary>
|
||
在上面的代码中，变量globalPerson 保存着createPerson() 函数调用返回的值。在createPerson() 内部，localPerson 创建了一个对象并给它添加了一个name 属性。然后，localPerson 作为函数值被返回，并被赋值给globalPerson 。localPerson 在createPerson() 执行完成超出上下文后会自动被解除引用，不需要显式处理。但globalPerson 是一个全局变量，应该在不再需要时手动解除其引用，最后一行就是这么做的。
|
||
|
||
不过要注意，解除对一个值的引用并不会自动导致相关内存被回收。解除引用的关键在于确保相关的值已经不在上下文里了，因此它在下次垃圾回收时会被回收。
|
||
</details>
|
||
|
||
### 闭包
|
||
闭包是指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式，就是在一个函数内部创建另一个函数。
|
||
|
||
```
|
||
|
||
function a() {
|
||
var x = 0;
|
||
return function(y) {
|
||
x = x + y;
|
||
// return x;
|
||
console.log(x);
|
||
}
|
||
}
|
||
var b = a();
|
||
b(1); //1
|
||
b(1); //2
|
||
```
|
||
练习1：
|
||
```
|
||
function fn() {
|
||
var max = 10;
|
||
return function bar(x) {
|
||
if (x > max) {
|
||
console.log(x);
|
||
}
|
||
};
|
||
}
|
||
var f1 = fn();
|
||
f1(15);
|
||
|
||
```
|
||
练习2
|
||
```
|
||
function init() {
|
||
var name = "Mozilla"; // name 是一个被 init 创建的局部变量
|
||
function displayName() { // displayName() 是内部函数，一个闭包
|
||
alert(name); // 使用了父函数中声明的变量
|
||
}
|
||
displayName();
|
||
}
|
||
init();
|
||
|
||
```
|
||
<details>
|
||
init() 创建了一个局部变量 name 和一个名为 displayName() 的函数。displayName() 是定义在 init() 里的内部函数，并且仅在 init() 函数体内可用。请注意，displayName() 没有自己的局部变量。然而，因为它可以访问到外部函数的变量，所以 displayName() 可以使用父函数 init() 中声明的变量 name 。
|
||
|
||
</details>
|
||
hrefs:
|
||
https://blog.csdn.net/weixin_43586120/article/details/89456183
|
||
|
||
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
|
||
|
||
```
|
||
|
||
(function() {
|
||
var m = 0;
|
||
function getM() { return m; }
|
||
function seta(val) { m = val; }
|
||
window.g = getM;
|
||
window.f = seta;
|
||
})();
|
||
f(100);
|
||
console.info(g());
|
||
|
||
```
|
||
<hr/>
|
||
|
||
```
|
||
function fn(){
|
||
var arr = [];
|
||
for(var i = 0;i < 5;i ++){
|
||
arr[i] = (function(i){
|
||
return function (){
|
||
return i;
|
||
};
|
||
})(i);
|
||
}
|
||
return arr;
|
||
}
|
||
// 立即执行函数 每调用一次完成后就自动销毁
|
||
|
||
var list = fn();
|
||
for(var i = 0,len = list.length;i < len ; i ++){
|
||
console.log(list[i]());
|
||
} //0 1 2 3 4
|
||
|
||
```
|
||
|
||
```
|
||
function fn(){
|
||
var arr = [];
|
||
for(var i = 0;i < 5;i ++){
|
||
arr[i] = function(){
|
||
return i;
|
||
}
|
||
}
|
||
return arr;
|
||
}
|
||
var list = fn();
|
||
for(var i = 0,len = list.length;i < len ; i ++){
|
||
console.log(list[i]());
|
||
} //5 5 5 5 5
|
||
|
||
```
|
||
|
||
```
|
||
var lis = document.getElementsByTagName("li");
|
||
for(var i=0;i<lis.length;i++){
|
||
(function(i){
|
||
lis[i].onclick = function(){
|
||
console.log(i);
|
||
};
|
||
})(i); //事件处理函数中闭包的写法
|
||
}
|
||
|
||
```
|
||
```
|
||
|
||
var li = document.getElementsByTagName( "li" );
|
||
for ( var i = 0; i < li.length; i++) {
|
||
li[i].addEventListener( "click" , function () {
|
||
console.log(i);
|
||
})
|
||
}
|
||
``` |