Scope and closure

1. 1 execution context

console.log(a) //undefind
var a = 100

fn('zhangsan') //'zhangsan' 20
function fn (name) {
    age = 20
    console.log(name, age)
    var age
}

• Scope: a < script > or a function
• Global: variable definition and function declaration
• Functions: variable definition, function declaration, this, arguments function

1,2 this

• The value of this can only be confirmed during execution, and cannot be confirmed during definition

var a = {
    name: 'A',
    fn: function (name) {
        alert(name)
        console.log(this)
    }
}

a.fn()                                  //this === a
a.fn.call({name: 'B'}, 'zhangsan')      //this === {name: 'B'}
// The. call function takes the first parameter passed in as this
var fn1 = a.fn
fn1()                                   //this === window

1. 3 Scope

• JS has no block level scope

if (true) {
    var name = 'zhangsan'
}
console.log(name)

• Only function scope and global scope

var a = 100
function fn() {
    var a = 200
    console.log('fn', a)   //fn 200
}
console.log('global', a)   //global 100
fn()

1. 4 scope chain

var a = 100
function fn() {
    var b = 200

    //  Variables not defined in the current scope, i.e. "free variables"
    console.log(a)
    console.log(b)
}
fn()

In which scope is the function defined, and the parent scope of this function is the scope

1, 5 closure

• Function as return value

function F1() {
    var a = 100
    return function () {
        console.log(a)      //Free variable, parent scope search
    }
}
// f1 to get a function
var f1 = F1()
var a = 200
f1()

• Functions are passed as arguments

function F1() {
    var a = 100
    return function () {
        console.log(a)      //Free variable, parent scope search
    }
}
var f1 = F1()
fnuction F2(fn) {
    var a = 200
    fn()
}
F2(f1)

1, 6 example

• Let's talk about the understanding of variable promotion
  
  • Variable definition
  • Function declaration (note the difference between function expression and function declaration)

• Explain several different usage scenarios of this

  • Execute as constructor
  • Execute as object property
  • Execute as a normal function
  • call apply bind

  function Foo(name) {
      this.name = name
  }
  var f = new Foo('zhangsan')
  
  var obj = {
      name: 'A',
      printName: function () {
          console.log(this.name)
      }
  ]
  obj.printfNmae()
  
  funtion fn() {
      console.log(this)
  }
  fn()

• Create 10 < a > tags and pop up the corresponding serial number when clicking

var i
for(i = 0; i < 10; i++) {
    //Set a self executing function
    (function (i) {
        var a = document.creatElement('a')
        a.innerHTML = i + '<br>'
        a.addEventListener('click', function (e) {
            e.preventDefault()
            alert(i)
        })
        document.body.appendChild(a)
    })(i)
}

• How to understand scope
  
  • Free variable
  • Scope chain, i.e. searching for free variables
  • Two scenarios of closures
• Application of closure in practical development

//Closures are mainly used to encapsulate variables and converge permissions in practical applications
function isFirstLoad() {
    var _list = []
    return function (id) {
        if (_list.indexOf(id) != -1) {
            return false
        } else {
            _list.push(id)
            return true
        }
    }
}

var firstLoad = isFirstLoad()
firstLoad(10)       // true
firstLoad(10)       // false
firstLoad(20)       // true