执行上下文和作用域

 执行上下文

1. 代码分类(位置)

  * 全局代码

  * 函数(局部)代码

2. 全局执行上下文

  * 在执行全局代码前将window确定为全局执行上下文

  * 对全局数据进行预处理

    * var定义的全局变量==>undefined, 添加为window的属性

    * function声明的全局函数==>赋值(fun), 添加为window的方法

    * this==>赋值(window)

  * 开始执行全局代码 //

3. 函数执行上下文

  * 在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)

  * 对局部数据进行预处理

    * 形参变量==>赋值(实参)==>添加为执行上下文的属性

    * arguments==>赋值(实参列表), 添加为执行上下文的属性

    * var定义的局部变量==>undefined, 添加为执行上下文的属性

    * function声明的函数 ==>赋值(fun), 添加为执行上下文的方法

    * this==>赋值(调用函数的对象)

  * 开始执行函数体代码

 4执行上下文栈

   1. 在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象

2. 在全局执行上下文(window)确定后, 将其添加到栈中(压栈)

3. 在函数执行上下文创建后, 将其添加到栈中(压栈)

4. 在当前函数执行完后,将栈顶的对象移除(出栈)

5. 当所有的代码执行完后, 栈中只剩下window

  

5:面试题目

/*

   测试题1:  先执行变量提升, 再执行函数提升

   */

  function a() {}

  var a

  console.log(typeof a) // 'function'

  /*

   测试题2:

   */

  if (!(b in window)) {

    var b = 1

  }

  console.log(b) // undefined

  /*

   测试题3:

   */

  var c = 1                等价于 var a ,function c() ,变量提前-》函数提前,最后赋值

  function c(c) {

    console.log(c)

    var c = 3

  }                            c=1,C是一个数值不是函数对象

  c(2) // 报错

  

//面试题:

 Funcution fun(){ var a=b=3;     }

 Console.log(b)//B是全局变量 var a是局部变量  B=3;A=undefine

 

6:作用域和作用域链

   1. 理解

  * 就是一块"地盘", 一个代码段所在的区域

  * 它是静态的(相对于上下文对象), 在编写代码时就确定了

2. 分类

  * 全局作用域

  * 函数作用域

  * 没有块作用域(ES6有了)

3. 作用

  * 隔离变量,不同作用域下同名变量不会有冲突

 1. 区别1

  * 全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时

  * 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建

  * 函数执行上下文是在调用函数时, 函数体代码执行之前创建

2. 区别2

  * 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化

  * 执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放

3. 联系

  * 执行上下文(对象)是从属于所在的作用域

  * 全局上下文环境==>全局作用域

  * 函数上下文环境==>对应的函数使用域

1. 理解

  * 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)

  * 查找变量时就是沿着作用域链来查找的

2. 查找一个变量的查找规则

  * 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2

  * 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3

  * 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

-->

<script type="text/javascript">

  var a = 1

  function fn1() {

    var b = 2

    function fn2() {

      var c = 3

      console.log(c)

      console.log(b)

      console.log(a)

      console.log(d)

    }

    fn2()

  }

  fn1()

</script>

3:面试题 X=10

 

///2

  var fn = function () {

    console.log(fn)

  }

  fn()

  var obj = {

    fn2: function () {

     console.log(fn2)

     //console.log(this.fn2)

    }

  }

  obj.fn2()

原文地址:https://www.cnblogs.com/love-life-insist/p/9063104.html