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

如何理解js中的作用域,闭包,私有变量,this对象概念呢?

就从一道经典的面试题开始吧!

题目:创建10个<a>标签,点击时候弹出相应的序号

先思考一下,再打开看看
     //先思考一下你会怎么写,是不是这样?        可是结果呢,弹出来的都是10,为啥?

     var i,a
for(i=0;i<10;i++){
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)
}

这个题目答案最后再说,当然,你就可以直接翻到最后了解,不过我不建议这样!!


涉及到今天的变量、作用域、闭包等等,在变量、作用域知识中已经说了一些,再重新简单的说一下。

执行环境:也称之为执行上下文,两个,一个是全局环境(window),一个是函数环境(每个函数都是一个函数环境)

作用域链:当代码在某一个环境中执行,会创建变量对象的一个作用域链,以保证对执行环境有权访问的所有变量和函数的有序访问。外部环境访问不到内部环境;内部环境通过作用域链可以访问外部环境。

块级作用域:js没有块级作用域,类似循环语句、条件判断语句内作用域都是全局的;只有两个执行环境

变量:var操作符判断是局部变量还是全局变量。

浏览器解析:浏览器解析时,先将所有的变量提升,变量都存为undefined,当执行到哪一行才给予赋值;函数声明一开始就是完整的,而函数表达式跟解析变量是一样的

     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:引用执行环境的对象;只有在执行时才能确认,定义时无法确认

        //普通的构造函数;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

ok,了解闭包、作用域链的知识后,回到那道面试题,应该知道其中的原因

    正确的写法
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
}

模仿块级作用域

都是知道的,js没有块级作用域,所以要模仿,怎么模仿呢?

上面的面试题已经告诉了:通过匿名函数来构造函数环境,形成私有作用域

下面解释有关涉及到匿名函数,函数声明,函数表达式的东西,说明一下块级作用域

     //变量名只是个值的另一种形式
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) //括号传递参数

关于闭包的知识,就说这么多

上一篇:Delphi 中 动态创建的Panel无法改变颜色的解决办法


下一篇:实验吧—Web——WP之 简单的sql注入之2