javascript 基础攻关（三）——作用域和闭包

��

题目：

1. 说一下对变量提升的理解
2. 说明this的几种不同的使用场景
3. 创建10个<a>标签，点击的时候弹出来对应的序号
4. 如何理解作用域
5. 实际开发中闭包的应用

执行上下文

• 范围：一段<script>或者一个函数
• 全局：变量定义、函数声明 一段<script>
• 函数：变量定义、函数声明、this、arguments 函数

注意：“函数声明”和“函数表达式”的区别

console.log(a);  //undefined
var a = 100;

fn("zhangsan");   //zhangsan,20

function fn(name) {
    age = 20;
    console.log(name, age);
    var age
}

this

• this要在执行时才能确认，定义时无法确认
• 作为构造函数执行
• 作为对象属性指向
• 作为普通函数执行
• call apply bind

```js
var a = {
    name: "A",
    fn: function() {
        console.log(this.name)
    }
}

a.fn(); //this===A
a.fn.call({ name: "B" }); //this==={name:"B"}
var fn1 = a.fn;
fn1(); //this===window

```

作用域

• 没有块级作用域

• 只有函数和全局作用域

  //无块级作用域
  if(true){
      var name = 'zhangsan';
  }
  console.log(name);
  
  // 函数和全局作用域
  var a=100;
  function fn() {
      var a=10;
      console.log('fn',a);
  }
  console.log('global',a);    //100
  fn();  //10
  

作用域链

```js
var a = 100;

function fn() {
    var b = 200;
    // 当前作用域没有定义的变量，即“自由变量”
    console.log(a);
    console.log(b);
}
fn() //100,200
```

闭包

使用场景

• 函数作为返回值
• 函数作为参数传递

    ```js
    function F1() {
        var a = 100;
        // 返回一个函数
        return function() {
            console.log(a);
        }
    }
    //f1 得到一个函数
    var f1 = F1();
    var a = 200;
    f1();  //100
    
    ```

解题

1. 说一下对变量提升的理解

   • 变量定义
   • 函数声明

2. 说明this的几种不同的使用场景

   • this要在执行时才能确认，定义时无法确认
   • 作为构造函数执行
   • 作为对象属性指向
   • 作为普通函数执行
   • call apply bind

3. 创建10个<a>标签，点击的时候弹出来对应的序号

   var i;
   

for (i = 0; i < 10; i++) {
(function(i) {
var a = document.createElement('a')
a.innerHTML = i + '
';
a.addEventListener('click', function(e) {
e.preventDefault();
alert(i);
})
document.body.appendChild(a);
})(i)
}

        


4. 如何理解作用域

    * 自由变量
    * 作用域链，即自由变量的查找
    * 闭包的两个场景

5. 实际开发中闭包的应用

    封装变量，收敛权限