解析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=200f1() ?????????//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) ??//括号传递参数