this的使用:
1 var oUl = document.getElementById("ul1"); 2 var aLi = oUl.getElementByTagName("li"); 3 for(var i=0;i<10;i++) 4 { 5 aLi[i].onclick = function(){ 6 aLi[i].style.width = "200px;" 7 }; 8 }
这段代码是错误的
首先要说一下JavaScript中的作用域链和原型链 作用域是针对变量的,假设我们创建了一个函数,函数里面又包含了一个函数,那么现在就有三个作用域即:全局作用域,函数1作用域,函数2作用域
在代码执行时,若在现行函数作用域中没有找到相关变量,就向上一层找,直到找到为止。注意函数与函数是嵌套关系。 至于原型链,它和构造函数有关系,以后再说。
执行上下文:
当javascript代码文件被浏览器载入后,默认最先进入的是一个全局的执行上下文。当在全局上下文中调用执行一个函数时,程序流就进入该被调用函数内,此时引擎就会为该函数创建一个新的执行上下文,并且将其压入到执行上下文堆栈的顶部。浏览器总是执行当前在堆栈顶部的上下文,一旦执行完毕,该上下文就会从堆栈顶部被弹出,然后,进入其下的上下文执行代码。这样,堆栈中的上下文就会被依次执行并且弹出堆栈,直到回到全局的上下文。
执行上下文的建立过程:这个过程分为两个阶段:
1.建立阶段(发生在调用一个函数时,但是在执行函数体内的具体代码之前)
处理arguments, 参数,接着是函数的声明,最后是变量的声明(变量只是声明,赋值操作在执行时,但函数声明时会执行赋值操作,函数表达式声明时不赋值)
建立作用域链
确定this的值
2.代码执行阶段:
变量赋值
函数引用
执行其他代码
开头的代码错误原因是因为在事件发生时for循环早已结束,此时的i是for循环最后一次循环的i,不是事件发生时的i,for循环里的事件只是装载,即告诉浏览器当发生这个事件时要做后面function里的事情,当事件发生时要用this指针执行当下操作
1 var oUl = document.getElementById("ul1"); 2 var aLi = oUl.getElementByTagName("li"); 3 for(var i=0;i<10;i++) 4 { 5 aLi[i].onclick = function(){ 6 this.style.width = "200px;" 7 }; 8 }