解析js中作用域、闭包——从一道经典的面试题开始

     console.log(a)         //undefined
     var a=100
     console.log(a)         //100
     
     person("double")       //double，20
     function person(name){ //声明函数
          age=20
          console.log(name,age)
          var age
     }

        //普通的构造函数;this就是构造函数的实例
        function Foo(name){
            //var this
            this.name=name
            //return this
        }
        var f=new Foo("double")

        //普通对象;this就是这个对象
        var obj={
            name:"double",
            printName:function(){
                console.log(this.name)
            }
        }
        obj.printName()

        //普通函数 this就是window
        function fn(){
            console.log(this)
        }
        fn()

        //call apply bind来设置this的值
        function fn1(name,age){
            alert(name)
            console.log(this)
        }
        fn1.call({x:100},‘double‘,20)      //this 就是{x:100}这个对象
        fn1.apply({x:100},["double",20])   //this 就是{x:100}这个对象

        var fn2=function (name,age){
            alert(name)
            console.log(this)
        }.bind(‘double‘,20)                //this 就是double了     
        fn2()

//闭包

//函数作为返回值
function F1(){
    var  a=100;

    //返回一个函数(函数作为返回值)
    return function(){
        console.log(a)
    }
}

//f1 得到一个函数
var f1=F1()
var a=200
f1()          //a=100     执行返回函数，函数在定义函数的作用域查找变量(而非执行函数的作用域),没有才会往父级作用域查找


//函数作为参数传递

function F1(){
    var a=100
    return function(){
        console.log(a)
    }
}

var f1=F1()   //这是个函数

function F2(fn){
    var a=200
    fn()
}
F2(f1)        //a=100       给函数传参给F2

     //这是一个闭包以返回值的例子
     function create(){
          var a=100              
          return function(){
                console.log(a)
          }
     }
     var a=200               
     var result=create()        //得到返回函数
     result()                   //执行返回函数  a=100   函数会在定义函数的作用域中查找，然后再在父级中查找

     当某个函数被调用的时候，会创建一个执行环境及相应的作用域链，使用arguments和其他参数
     来初始化函数的活动对象，但在作用域链中，外部函数的活动对象始终处于第二位，

     对于create函数内部的匿名函数,其作用域链被初始化包含三个的活动对象,一个自身的，一个为create函数的，一个是全局环境的
     一般来说，函数执行完毕，其活动对象就已经被销毁；
     但是对于闭包来说，当create函数执行完毕，函数的活动对象依然不会销毁，因为内部的匿名函数一直引用其中的活动对象

     //普通对象 的 一个方法
     var person={
         name:"double",
         getName:function(){
              console.log(this.name)
         }
     }
     person.getName()     //double
     
     //普通对象方法返回的是匿名函数
     var person={
           name:"double",
           getName:function(){
                  return function(){
                         console.log(this.name)
                  }
           }
     }
     var name="single"
     person.getName()()     //single
   
     //普通对象方法返回的是匿名函数
     var person={
         name:"double",
         getName:function(){
              var that=this           //在定义匿名函数前将this对象赋予给that的变量  this和arguments差不多，也要将其赋值给某个变量
              return function(){
                     console.log(that.name)
              }
         }
     }
     var name="single"
     person.getName()()    //double

    正确的写法
     var i
     for(i=0;i<10;i++){
      (function(i){
         var a=document.createElement(‘a‘)
          a.innerHTML=i+‘<br>‘
          a.addEventListener(‘click‘,function(event){
               var event=event||window.event
               event.preventDefault()
               alert(i)                   //去父作用域查找         
          })
          document.body.appendChild(a)
        })(i)
     }
      
     //js没有块级作用域,所以alert(i)的i是在全局作用域下的,返回的当然是10,
     //如何让i是每个弹出来的呢？
     //我们知道环境分函数环境和全局环境,只需要将每个i都有自己的执行环境就可以了
     //怎么弄？
     //直接加个自执行函数,让每个i都有自己的函数环境，也就是构建出私有作用域

       //内存泄露
       function person(){
              var element=document.getElementById("someElement")
              element.onclick=function(){
                       alert(element.id)
              }
       }
       
       //解决内存泄露
       function person(){
              var element=document.getElementById("someElement")
              var id=element.id    //将所需内容赋值给一个变量
              element.onclick=function(){
                       alert(id)
              }
           element=null         //闭包会引用包含函数的整个活动对象,其中包含着element
       }

     //变量名只是个值的另一种形式
     var count=10
     alert(count)  
     alert(10)
      
     //既然变量可以,那么函数呢 
     var person=function(){
           alert("hello")
     }
     person()

     var person=function(){
          alert("hello")
     }()

     
     function(){
          alert("hello")
     }()    //报错
     //为啥？因为js将function关键字作为一个函数声明的开始,而函数声明是不能加圆括号
     
     (function(){
         alert("hello")
     })()
     //将函数声明转为函数表达式即可,外部加个圆括号即可,也就是形成自己的私有作用域

     //对于函数声明和函数表达式的转换
     //js中括号()是不包含语句的,和js中的&&,||,逗号等操作符是在函数表达式和函数声明上消除歧义的
     //所以
     var i=function(){console.log("hello")}()
     true &&function(){console.log("hello")}()
     0,function(){console.log("hello")}()
     !function(){console.log("hello")}()
     ~function(){console.log("hello")}()
     -function(){console.log("hello")}()
     +function(){console.log("hello")}()
     new function(){console.log("hello")}
     var value=10
     new function(){console.log(value)}(value)   //括号传递参数