javascript_basics
/
4.作用域和闭包-执行上下文.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

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

    //知识点
    //1、执行上下文
    //2、this
    //3、作用域
    //4、作用域链
    //5、闭包

    //1、执行上下文
    //范围:一段<script>或者一个函数
    //全局:变量定义、函数声明
    //函数:变量定义、函数声明、this、arguments
    //PS:注意'函数声明'和'函数表达式'的区别  function fn(){// 函数声明 }     var fn = function(){//函数表达式}

    //2、this
    //this 要在执行时才能确认值，定义时无法确认
    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

    //作为构造函数执行
    function Foo(name) {
      this.name = name
    }
    var f = new Foo('zhangsan')

    //作为对象属性执行
    var obj = {
      name: 'A',
      printName: function () {
        console.log(this.name)
      }
    }
    obj.printName()


    //作为普通函数执行
    function fn() {
      console.log(this) //this ===window
    }


    //call apply bind
    function fn1(name, age) {
      alert(name)
      console.log(this) //call 和apply类似 apply会把后面当成数组 fn1.apply({x:100},['zhangsan',20])
    }
    fn1.call({ x: 100 }, 'zhangsan', 20)//this x:100         this是第一个参数
    //bind bind 必须使用函数表达式的方式
    var fn2 = function (name, age) {
      alert(name)
      console.log(this)   //this = y:222
    }.bind({ y: 222 })
    fn2('lisi', 22)

    //3、作用域
    //3.1、自由变量
    //3.2、作用域链，即自由变量的查找
    //3.3、闭包的两个场景
    //js没有块级作用域
    if (true) {
      var name = 'shangshan'
    }
    console.log(name)
    //函数和全局作用域
    var a = 100
    function ffnn() {
      var a = 200
      console.log('ffnn', a) //200
    }
    console.log('global', a)//100

    //4、作用域链
    var a = 100
    function fnn() {
      var b = 200
      //当前作用域没有定义的变量，即‘自由变量’
      console.log(a)//100

      console.log(b)//200
    }
    fnn()

    //5、闭包 闭包的使用场景 函数作为返回值
    function F1() {
      var a = 100;
      //返回一个函数(函数作为返回值)
      return function () {
        console.log(a) //自由变量，父作用域中查找
      }
    }
    var f1 = F1()//f1得到一个函数
    var a = 200
    f1()//100

    //函数作为参数传递
    function F2() {
      var a = 100
      return function () {
        console.log(a)
      }
    }
    var f2 = F2()
    function F3(fn) {
      var a = 200
      fn()
    }
    F3(f2)//100 这里走的还是F2函数返回的值 跟F3里的变量a没有关系


    //说一下对变量提升的理解
    //1、变量定义
    //2、函数声明(注意和函数表达式的区别)


    //实际开发中闭包的应用 最主要用于 封装变量、收敛权限
    function isFirstLoad() {
      var _list = []
      return function (id) {
        if (_list.indexOf(id) >= 0) {
          return false
        } else {
          _list.push(id)
          return true
        }
      }
    }
    //使用
    var firstload = isFirstLoad()
    firstload(10)//true
    firstload(10)//false
    firstload(20)//true
    firstload(20)//false
    firstload(30)//true
    firstload(30)//false
    //你在isFirstLoad函数外面，根本不可能修改掉_list的值


    //创建10个<a>标签，点击的时候弹出对应的序号---------------------------
    for (let i = 1; i <= 10; i++) {
      (function (i) {//自执行函数 就是不用调用，只要定义完成，立即执行的函数

        let a = document.createElement('a')
        a.innerHTML = i + '</br>'
        document.body.appendChild(a)
        a.addEventListener('click', function (e) {
          e.preventDefault()//阻止默认事件
          console.log(i)
        })

      })(i)
    }
  </script>
</body>

</html>