js执行上下文

2019-06-04 本文已影响0人小泡_08f5

1.什么是执行上下文

简而言之，执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念， JavaScript 中运行任何的代码都是在执行上下文中运行。

执行上下文总共有三种类型：

全局执行上下文：这是默认的、最基本的执行上下文。不在任何函数中的代码都位于全局执行上下文中。
它做了两件事：
1、创建一个全局对象，在浏览器中这个全局对象就是window对象
2、将this指针指向这个全局对象。一个程序中只能存在一个全局执行上下文。
函数执行上下文：每次调用函数时，都会为该函数创建一个新的执行上下文。每个函数都拥拥有自己的执行上下文，但是只有在函数被调用的时候才会被创建。
一个程序中可以存在任意数量的函数执行上下文。
每当一个新的执行上下文被创建，它都会按照特定的顺序执行一系列步骤。具体过程将在本文后面讨论。
Eval 函数执行上下文：运行在eval函数中的代码也获得了自己的执行上下文，但由于 JavaScript 开发人员不常用 eval 函数，这里不再讨论

二、执行上下文的生命周期

执行上下文的生命周期包括三个阶段：创建阶段->执行阶段->回收阶段

1、创建阶段

当函数被调用，但未执行任何其内部代码之前，会做以下三件事：

创建变量对象：首先初始化函数的参数argument, 提升函数声明和变量声明。
创建作用域链（scope chain）：在执行期上下文的创建阶段，作用域链是在变量对象之后创建的。
作用域链本身包含变量对象。作用域链用于解析变量。
当被要求解析变量时，JavaScript始终从代码嵌套的最内层开始，如果最内层没有找到变量，就会跳转到上一层父作用域中查找，直到找到该变量。
确定this指向：包括多种情况，下文详细说明

在一段JS脚本执行之前，要先解析代码（所以说JS是解释执行的脚本语言），解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来。变量先暂时赋值为 undefined ,函数则先声明好可使用。这一步做完了，然后再开始正式执行程序。

另外，一个函数在执行之前，也会创建一个函数执行上下文环境，跟全局上下文差不多，不过函数执行上下文中会多出 this arguments 和函数的参数。

2、执行阶段

执行变量赋值，代码执行

3、回收阶段

执行上下文出栈等待虚拟机回收执行上下文

三、变量提升和this指向的细节

变量声明提升

大部分编程语言都是先声明变量再使用，但在JS中，

console.log(a)// undefined
var a = 10

上述代码正常输出 undefined而不是报错 Uncaught ReferenceError: a is not defined, 这是因为声明提升了，相当于如下代码:

var a; //声明 默认值是undefined “准备工作”
console.log(a);
a=10; //赋值

函数声明提升

我们都知道，创建一个函数的方法有两种，一种是函数声明 function foo(){} 另一种是通过函数表达式 var foo = function(){}，那这两种在函数提升有什么区别呢

console.log(f1) // function f1(){}
function f1() {} // 函数声明
console.log(f2) // undefined
var f2 = function() {} // 函数表达式

接下来我们通过一个例子来说明这个问题：

function test() {
    foo(); // Uncaught TypeError "foo is not a function"
    bar(); // "this will run!"
    var foo = function () { // function expression assigned to local variable 'foo'
        alert("this won't run!");
    }
    function bar() { // function declaration, given the name 'bar'
        alert("this will run!");
    }
}
test();

在上面的例子中， foo()调用的时候报错了，而bar能够正常调用。

我们前面说过变量和函数都会上升，遇到函数表达式 var foo = function(){} 时，首先会将var foo上升到函数体顶部，然而此时的foo d的值为undefined, 所以执行foo() 报错。

而对于函数 bar(), 则是提升了整个函数，所以bar()才能够顺利执行。

有个细节必须注意： 当遇到函数和变量同名且都会被提升的情况，函数声明优先级比较高，因此变量声明会被函数声明所覆盖，但是可以重新赋值

alert(a);//输出：function a(){ alert('我是函数') }
function a(){ alert('我是函数') }//
var a = '我是变量';
alert(a);   //输出：'我是变量'

function 声明的优先级比var声明高，也意味着当两个同名变量同时被function和var声明时， function声明会覆盖var声明

这代码等效于：

function a(){alert('我是函数')} 
var a;    //hoisting
alert(a);    //输出：function a(){ alert('我是函数') }
a = '我是变量';//赋值
alert(a);   //输出：'我是变量'

最后我们看个复杂点的例子：

function test(arg){
    // 1. 形参 arg 是 "hi"
    // 2. 因为函数声明比变量声明优先级高，所以此时 arg 是 function
    console.log(arg);  
    var arg = 'hello'; // 3.var arg 变量声明被忽略， arg = 'hello'被执行
    function arg(){
    console.log('hello world') 
    }
    console.log(arg);  
}
test('hi');
/* 输出：
function arg(){
    console.log('hello world') 
    }
hello 
*/

这是因为当函数执行的时候，首先会形成一个新的私有的作用域，然后依次按照如下的步骤执行：

如果有形参，先给形参赋值
进行私有作用域中的预解释，函数声明优先级比变量声明高，最后后者会被前者所覆盖，但是可以重新赋值
私有作用域中的代码从上到下执行

3、确定this的指向

先搞明白一个很重要的概念---this的值是在执行的时候才能确认，定义的时候不能确认！为什么呢---因为this是执行上下文环境的一部分，而执行上下文需要再代码执行之前确定，而不是定义的时候。

// 情况1
function foo() {
  console.log(this.a) //1
}
var a = 1
foo()

// 情况2
function fn(){
  console.log(this);
}
var obj={fn:fn};
obj.fn(); //this->obj

// 情况3
function CreateJsPerson(name,age){
//this是当前类的一个实例p1
this.name=name; //=>p1.name=name
this.age=age; //=>p1.age=age
}
var p1=new CreateJsPerson("尹华芝",48);

// 情况4
function add(c, d){
  return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34

// 情况5
<button id="btn1">箭头函数this</button>
<script type="text/javascript">   
    let btn1 = document.getElementById('btn1');
    let obj = {
        name: 'kobe',
        age: 39,
        getName: function () {
            btn1.onclick = () => {
                console.log(this);//obj
            };
        }
    };
    obj.getName();
</script>

对于直接调用foo来说，不管 foo 函数被放在了什么地方， this 一定是 window
对于 obj.foo()来说，我们只需要记住，谁调用了函数，谁就是this, 所以在这个场景下foo函数中的this就是obj对象
构造函数模式中，类中（函数体中）出现的this.xxx=xxx中的this是当前类的一个实例
call, apply和bind:this是第一个参数
箭头函数this指向：箭头函数没有自己的this，看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this, 如没有，则this是window

image.png

四、执行上下文栈

函数多了，就有多个函数的上下文，每次调用函数创建一个新的执行上下文，那如何管理创建的那么多执行上下文呢

JS 引擎创建了执行上下文栈来管理执行上下文， 可以把执行上下文栈认为是一个存储函数调用的栈结构，遵循先进后出的原则

image.png

从上面的流程图，我们需要记住几个关键点：

JavaScript 执行在单线程上，所有的代码都是排队执行。
一开始浏览器执行全局的代码时，首先创建全局的执行上下文，压入执行栈的顶部。
每当进入一个函数的执行就会创建函数的执行上下文，并且把它压入执行栈的顶部。当前函数执行完成后，当前函数的执行上下文出栈，并等待垃圾回收。
浏览器的JS执行引擎总是访问栈顶的执行上下文
全局上下文只有唯一的一个，它在浏览器关闭时出栈

var color = 'blue';
function changeColor() {
    var anotherColor = 'red';
    function swapColors() {
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
    }
    swapColors();
}
changeColor();

上述代码运行按照如下步骤：

当上述代码在浏览器中加载时， JS引擎会创建一个全局执行上下文并且将它推入当前的执行栈
调用 changeColor函数时，此时changeColor 函数内部代码还未执行，js引擎立即创建一个changeColor的执行上下文（简称EC），然后把这执行上下文压入执行栈（简称ECStack）中
执行changeColor函数过程中，调用swapColors函数，同样的，swapColors函数执行之前也创建了一个swapColors的执行上下文，并压入到执行栈中，
swapColors韩式执行完成， swapColors函数的执行上下文出栈，并且被销毁
changeColors函数执行完成， changeColors函数的执行上下文出栈，并且被销毁

image.png

补充：

执行环境

执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object）,环境中定义的所有变量和函数都保存在这个对象中。
虽然我们编写的代码无法访问这个对象，但解析器在处理数据中会在后台使用它。

变量对象

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。
因为不同执行上下文的变量对象稍有不同，所以我们来聊聊全局上下文的变量对象和函数上下文下的变量对象

全局上下文

全局上下文中的变量对象就是全局对象
了解一下全局对象的概念，在W3School中也有介绍：

全局对象是预定义的对象，作为JavaScript的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象，函数和属性

在顶层JavaScript代码中，可以用关键字this引用全局对象。因为全局对象是作用域链的头，这意味着所有非限定性的变量和函数名都会作为该对象的属性来查询。
例如，当JS代码引用 parseInt() 函数时，它引用的是全局对象的parseInt属性。全局对象是作用域链的头，还意味着在顶层JS代码中声明的所有变量都将成为全局对象的属性。

console.log(this); // 可以通过 this 引用，在客户端 JavaScript 中，全局对象就是 Window 对象。
console.log(this instanceof Object); // 全局对象是由 Object 构造函数实例化的一个对象。
// 都能生效，预定义了一堆，嗯，一大堆函数和属性。
console.log(Math.random());
console.log(this.Math.random());

var a = 1;
console.log(this.a);  // 作为全局变量的宿主。

// 客户端 JavaScript 中，全局对象有 window 属性指向自身。
var a = 1;
console.log(window.a);
this.window.b = 2;
console.log(this.b);

函数上下文

在函数上下文中，我们用活动对象（activation object ,AO）来表示变量对象。

活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在JS环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫activation object呐，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的，它通过函数的arguments属性初始化。 arguments属性值是Argements对象。

执行过程

执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：

进入执行上下文
代码执行

进入执行上下文

当进入执行上下文时，这时候还没有执行代码，
变量对象会包括：

函数的所有形参（如果是函数上下文）
- 由名称和对应值组成的一个变量对象的属性被创建
- 没有实参，属性值设为 undefined
函数声明
- 由名称和对应值（函数对象（function-object））组成一个变量对象的属性被创建
- 如果变量对象已经存在相同名称的属性，则完全替换这个属性
变量声明

由名称和对应值（undefined）组成一个变量对象的属性被创建；
如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性
举例：

function foo(a) {
  var b = 2;
  function c() {}
  var d = function() {};

  b = 3;

}

foo(1);

在进入执行上下文后，这时候的AO是：

AO={
  arguments:{
      0:1,
      length: 1
  },
 a: 1,
 b:undefined,
 c: reference to function c(){},
 d: undefined
}

代码执行

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值
还是上面的例子，当代码执行完后，这时候的AO是：

AO = {
    arguments: {
        0: 1,
        length: 1
    },
    a: 1,
    b: 3,
    c: reference to function c(){},
    d: reference to FunctionExpression "d"

到这里变量对象的创建过程就介绍完了，让我们简洁的总结我们上述所说：

1. 全局上下文的变量对象初始化是全局对象
2.函数上下文的变量对象初始化只包括Arguments对象
3.在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值
4.在代码执行阶段，会再次修改变量对象的属性值

再补充几个例子：

function foo() {
    console.log(a);
    a = 1;
}

foo(); // ???

function bar() {
    a = 1;
    console.log(a);
}
bar(); // ???

第一段会报错：Uncaught ReferenceError: a is not defined。
第二段会打印：1 。
这是因为函数中的 "a" 并没有通过 var 关键字声明，所有不会被存放在 AO 中。

第一段执行 console 的时候， AO 的值是：

AO = {
    arguments: {
        length: 0
    }
}

没有 a 的值，然后就会到全局去找，全局也没有，所以会报错。

当第二段执行 console 的时候，全局对象已经被赋予了 a 属性，这时候就可以从全局找到 a 的值，所以会打印 1。

console.log(foo);

function foo(){
    console.log("foo");
}

var foo = 1;

对打印函数，而不是 undefined
这是因为在进入执行上下文时，首先会处理函数声明，其次会处理变量声明，如果变量声明跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性。

本文参考：https://blog.csdn.net/hi_kevin/article/details/37761919

面试题：
1.执行上下文的生命周期？

创建阶段->执行阶段->回收阶段
创建阶段：
1. 创建变量对象
2. 创建作用域链
3. 确认this指向
执行阶段：执行变量赋值，代码执行
回收阶段：执行上下文出栈，等待虚拟机回收执行上下文

题目二：

(function(){
    a= 5;
    console.log(window.a);//undefined
    var a = 1;//这里会发生变量声明提升
    console.log(a);//1
})();

window.a之所以是undefined，是因为var a = 1;发生了变量声明提升。相当于如下代码：

(function(){
    var a;//a是局部变量
    a = 5;//这里局部环境中有a，就不会找全局中的
    console.log(window.a);//undefined
    a = 1;//这里会发生变量声明提升
    console.log(a);//1
})();

题目三：

var name = "jay"; 
var person = {
    name: "kang",
    pro: {
        name: "Michael",
        getName: function() {
            return this.name;
        }
    }
};
console.log(person.pro.getName()); // Michael
var pepole = person.pro.getName;
console.log(pepole()); // jay

题目四：

function foo() {
    console.log(this.a)
}

function active(fn) {
    fn(); // 真实调用者，为独立调用
}

var a = 20;
var obj = {
    a: 10,
    getA: foo
}
active(obj.getA); // 20

题目五：

 let btn1 = document.getElementById('btn1');
    let obj = {
        name: 'kobe',
        age: 39,
        getName: function () {
            btn1.onclick = () => {
                console.log(this);//obj
            };
        }
    };
    obj.getName();