JS基础知识（中）

执行上下文

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


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

执行上下文

1 范围：一段script或者一个函数
2 全局：变量定义，函数声明 一段script
3 函数：变量定义，函数声明，this，arguments 函数

this

this  要在执行时才能确认值，定义时无法确定
var  a = {
   name:"A",
   fn:function () {
        console.log(this.name)  
}
}

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

this 的使用场景

1 作为构造函数执行
2 作为对象属性执行
3 作为普通函数执行
4 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.printName()

function fn() {
    console.log(this)
}
fn()

作用域

// 无作用域

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


//函数和全局作用域
var  a = 100
function  fn()  {
      var  a = 100
      console.log("fn",a)
}
console.log("global",a)
fn()

作用域链

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
















var  a = 100
function  F1() {
    var  b = 200
    function  F2() {
      var  c = 300
      console.log(a)     //a是自由变量
      console.log(b)    // b 是自由变量
      console.log(c)
    }
}

闭包

1 函数作为返回值
function Fn() {
   var  a = 100
  //返回一个函数（函数作为返回值）
  return  function （） {
         console.log(a) //自由变量，父作用域寻找
 }
}

//fn得到的是一个函数
var   f1 = F1()
var  a = 200
f1()   //100

闭包的使用场景

1 函数作为返回值
2 函数作为参数传递

说一下对变量提升的理解

1 变量定义
2 函数声明（注意和函数表达式的区别）

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

1 作为构造函数执行
2 作为对象属性执行
3 作为普通函数执行
4 call  apply  bind

创建10个a标签，点击的时候弹出对应的序号

var i 
for ( i = 0; i<10; i++) {
   (function(i) {
    var  a = document.createElement("a")
    a.innerHTML = i + “<br”
    a.addEventListener("click",function(e)
     		e.preventDefault()
     		alert(i) //自由变量要去父作用域获取值
 })
    document.body.appendChild(a)
})(i)
}

如何理解作用域

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

实际开发中闭包的应用

//闭包实际应用中主要用于封装变量，收敛权限

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
firsrLoad(20) // true