JavaScript执行上下文

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 }

 

posted @ 2016-10-31 19:32  ljuyi  阅读(280)  评论(0编辑  收藏  举报