JavaScript执行上下文

Posted 2020-08-16 ljuyi

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 }