浏览器中 Javascript 执行机制-我爱编程

当前位置：: 首页; 文章; 前端
详情

浏览器中 Javascript 执行机制

前端
越谷
0

一变量提升

变量提升，是指在 Javascript 执行过程中，Javascript 引擎在编译时把变量的声明部分和函数的声明部分提升到代码开头，并给变量初始化为 undefined。

变量和函数声明在代码里的执行位置是不变的，只是声明代码在编译阶段被 Javascript 引擎提前收集放入内存中。

var myName = 'zhangsan'
// 上述代码在Javascript编译阶段拆分为以下两部分：
var myName = undefined // 声明部分， 提升到当前作用域的头部
myName = 'zhangsan' // 赋值部分

// 这是一个完整的函数声明，没有赋值操作，编译时直接把整块代码提升到当前作用域头部
function foo() {
  console.log('foo')
}
// 这跟普通变量没什么却别，先声明后赋值，编译时将声明提升到当前作用域头部
var foo = function() {
	console.log('foo')
}

代码经过编译后，会生成两部分内容：执行上下文（Execution context）和 可执行代码。

执行上下文是 Javascript 执行代码时的运行环境，其中存在一个变量环境（Viriable Environment）的对象，编译过程中，会把代码里声明的变量和函数的属性收集到变量环境中（即变量提升的内容）。

示例：

showName()
console.log(myname)
var myname = '极客时间'
function showName() {
  console.log('函数showName被执行');
}

运行步骤：

编译阶段

1）1、2 行代码不是声明操作，Javascript 引擎不做任何处理；

2）第 3 行代码是 var 声明语句，Javascript 引擎在环境变量对象中创建一个名为 myname 的属性，并赋值为 undefined 进行初始化；

3）第 4 行，是一个通过 function 定义的函数，Javascript 把它存储到堆中，并在环境变量中创建一个 showName 的属性，然后将该属性值指向堆中函数的位置。
执行阶段

1）第 1 行，执行到 showName(), Javascript 引擎在变量环境中查找该函数，查到然后执行；

2）第 2 行，打印 myname，Javascript 引擎在变量环境中查找该对象，查到并发现值为 undefined；

3）第 3 行，赋值操作，把 '极客时间'赋值给 myname，环境变量中的 myname 的值更改为'极客时间'

如果遇到重复对一个属性赋值时，后者会覆盖前者。

二调用栈

Javascript 引擎执行全局代码和调用函数时，会为全局代码和每个一函数创建一个独立的执行上下文，全局环境及各函数之间可能存在调用关系，调用栈就是用来管理函数调用关系的一种数据结构。栈是一种先进后出的数据结构。

示例：

var a = 2
function add(b,c){
  return b+c
}
function addAll(b,c){
var d = 10
result = add(b,c)
return  a+result+d
}
addAll(3,6)

运行步骤：

第一步：创建全局上下文，并将其压入栈底；编译完成后，开始执行全局环境，对 a 赋值，并调用 addAll 函数。

第二步：调用 addAll 函数。调用该函数时，编译该函数，为其创建执行上下文，压入栈底；然后执行，调用 add 函数。

第三步，调用 add 函数，同样为其创建上下文，压入栈底然后执行。

第四步：add 函数执行完，该函数的执行上下文从栈顶弹出（销毁），返回结果为 result 赋值。

第五步：addAll 执行完，执行上下文从栈顶弹出（销毁），此时调用栈里只剩全局上下文，至此，整个流程结束。

一般情况下，函数执行完，该函数的执行上下文随之销毁。

注：调用栈是有大小的，当入栈的执行上下文超过一定数目，JavaScript 引擎就会报错，我们把这种错误叫做栈溢出。

三块级作用域

作用域，指变量与函数的可访问范围，即作用域控制着变量和函数的可见性及声明周期。

ES6 之前只有两种作用域：

全局作用域：变量和函数在任何地方都能访问，其生命周期伴随着页面的生命周期。
函数作用域：函数内部定义的变量或函数，只能在函数内部被访问，函数执行完后销毁。

ES6 之后支持块级作用域。

3.1 变量提升带来的问题

3.1.1 变量容易在不被察觉的情况下被覆盖掉

示例：

var myname = "极客时间"
function showName(){
  console.log(myname);
  if(0){
   var myname = "极客邦"
  }
  console.log(myname);
}
showName()

分析：因为 showName 函数中的局部变量 myname 被提升至函数头部，所以打印的结果都是 undefined。

3.1.2 本应销毁的变量没被销毁

示例：

function foo(){
  for (var i = 0; i < 7; i++) {}
  console.log(i); 
}
foo()

分析：打印结果为7，因为变量 i 被提升。

3.2 ES6 解决变量提升问题及其原理

ES6 引入 let / const 关键字，在编译阶段，被其声明的变量，不会存放到变量环境中，不会提升到全函数可见，从而使 Javascript 拥有了块级作用域。

示例：

function foo(){
    var a = 1
    let b = 2
    {
      let b = 3
      var c = 4
      let d = 5
      console.log(a)
      console.log(b)
    }
    console.log(b) 
    console.log(c)
    console.log(d)
}   
foo()

上述代码执行流程：

第一步：编译并创建上下文。通过 var 声明的变量存放到变量环境中，通过 let 声明的变量存放到词法环境中（Lexical Environment）,而块内的通过 let 声明的变量没有存放到词法环境中。

第二步：执行代码，块内的 let 声明的变量存放在词法环境一个单独的区域中，与其他区域隔离，不影响其他作用域的变量。词法环境内也是一个栈结构。

第三步：查找值。

第四步：作用域块执行结束，从栈顶弹出销毁。

注：在块作用域内，let声明的变量同样被提升，但变量只是创建被提升，初始化并没有被提升，在初始化之前使用变量，就会形成一个暂时性死区，访问时会报错。

var 的创建和初始化被提升，赋值不会被提升。 let的创建被提升，初始化和赋值不会被提升。创建和初始化是两个独立的过程。

四作用域和闭包

4.1 作用域链

在每个执行上下文的变量环境中，除了变量和函数外，还存在一个外部引用（outer)，用来指向外部的执行上下文。当访问一个变量时，Javascript 引擎首先在当前执行上下文中查找该变量，如果查不到，则会沿着 outer 指向的上下文中继续查找。这种查找的指向链条就是“作用域链”。

词法作用域指作用域是由代码中函数声明的位置决定的。在编译阶段就决定好的，和函数是怎么调用的没有关系。这是 outer 指向的原则。

示例1：

function bar() {
    console.log(myName) 
}
function foo() {
    var myName = "极客邦"
    bar()
}
var myName = "极客时间"
foo()

示例2：块级作用域中的变量查找

function bar() {
    var myName = "极客世界"
    let test1 = 100
    if (1) {
        let myName = "Chrome浏览器"
        console.log(test)
    }
}
function foo() {
    var myName = "极客邦"
    let test = 2
    {
        let test = 3
        bar()
    }
}
var myName = "极客时间"
let myAge = 10
let test = 1
foo()

4.2 闭包（closure）

在 JavaScript 中，根据词法作用域的规则，内部函数总是可以访问其外部函数中声明的变量，当通过调用一个外部函数返回一个内部函数后，即使该外部函数已经执行结束了，但是内部函数引用外部函数的变量依然保存在内存中，我们就把这些变量的集合称为闭包。

示例：

function foo() {
    var myName = "极客时间"
    let test1 = 1
    const test2 = 2
    var innerBar = {
        getName:function(){
            console.log(test1)
            return myName
        },
        setName:function(newName){
            myName = newName
        }
    }
    return innerBar
}
var bar = foo()
bar.setName("极客邦")
bar.getName()
console.log(bar.getName())

当执行到 foo 时的调用栈：

根据词法作用域的规则，内部函数 getName 和 setName 总是可以访问它们的外部函数 foo 中的变量。当 innerBar 对象返回给全局变量 bar 时，foo 函数已经执行完毕，foo 函数的执行上下文弹出销毁，但是 getName 和 setName 函数依然可以使用 foo 函数中的变量 myName 和 test1，由于存在这样的引用，这两个变量保存在内存中，不会随着 foo 的销毁而销毁。

当 foo 函数执行完成之后，其整个调用栈的状态如下图所示：

当执行到 bar.setName 方法中的 myName = "极客邦"这句代码时，JavaScript 引擎会沿着“当前执行上下文–>foo 函数闭包–> 全局执行上下文”的顺序来查找 myName 变量:

闭包的回收：

引用闭包的函数是一个全局变量，那么闭包会一直存在直到页面关闭；如果这个闭包以后不再使用，就会造成内存泄漏。
引用闭包的函数是个局部变量，等函数销毁后，在下次 JavaScript 引擎执行垃圾回收时，判断闭包这块内容如果已经不再被使用了，那么 JavaScript 引擎的垃圾回收器就会回收这块内存。

在使用闭包的时候，你要尽量注意一个原则：如果该闭包会一直使用，那么它可以作为全局变量而存在；但如果使用频率不高，而且占用内存又比较大的话，那就尽量让它成为一个局部变量。

五 this

5.1 不合常理的例子

var bar = {
    myName:"a",
    printName: function () {
        console.log(myName)
    }    
}
function foo() {
    let myName = "b"
    return bar.printName
}
let myName = "c"
let _printName = foo()
_printName()
bar.printName()

按照常理来说，调用 bar.printName 方法时，该方法内部的变量 myName 应该使用 bar 对象中的，因为它们是一个整体，大多数面向对象语言都是这样设计的，但是 JavaScript 的作用域机制并不支持这一点。

在 Javascript 机制中，调用了foo()后，返回的是 bar.printName，后续就跟 foo 函数没有关系了，所以结果就是调用了两次 bar.printName()，根据词法作用域，结果都是“c”，也不会形成闭包。

在 JavaScript 中可以使用 this 实现在 printName 函数中访问到 bar 对象的 myName 属性。

var bar = {
    myName:"a",
    printName: function () {
        console.log(this.myName)
    }    
}

5.2 this 的说明

this和作用域链是并行的两套系统，和执行上下文绑定，每个执行上下文都有一个 this。

执行上下文主要分为三种——全局执行上下文、函数执行上下文和 eval 执行上下文，所以对应的 this 也只有这三种——全局执行上下文中的 this、函数中的 this 和 eval 中的 this。

全局执行上下文中的 this 是指向 window 对象的。这也是 this 和作用域链的唯一交点。

5.3 设置 this 指向

默认情况下，调用一个函数，其执行上下文的 this 也指向 window 对象。通常情况下，有以下三种情况可以设置函数执行上下文的 this 指向。

通过 call / apply / bind 方法设置
通过对象调用方法设置

a.  在全局环境中调用一个函数，函数内部的 this 指向的是全局变量 window
b.  通过一个对象来调用其内部的一个方法，该方法的执行上下文中的 this 指向对象本身。

var myObj = {
  name : "极客时间", 
  showThis: function(){
    console.log(this)
  }
}
myObj.showThis() // this 指向 myObj

var foo = myObj.showThis
foo() // this 指向 window

通过构造函数设置

var myObj = new CreateObj() // new

// new 一个构造函数相当于执行了以下三步
var tempObj = {}
CreateObj.call(tempObj)
return tempObj

5.4 this 的设计缺陷

5.4.1 嵌套函数中的 this 不会从外层函数中继承

var myObj = {
  name : "a", 
  showThis: function(){
    console.log(this) // this 指向 myObj
    function bar(){console.log(this)} // this 指向 window
    bar()
  }
}
myObj.showThis()

可以通过使用 ES6 的箭头函数，或者设置变量保存 this，来使嵌套函数继续使用外层函数的 this。

5.4.2 普通函数中的 this 默认指向 window

这个缺陷可以通过设置严格模式来解决，在严格模式下，函数的执行上下文中的 this 默认是 undefined。

免责申明：本站发布的内容（图片、视频和文字）以转载和分享为主，文章观点不代表本站立场，如涉及侵权请联系站长邮箱：xbc-online@qq.com进行反馈，一经查实，将立刻删除涉嫌侵权内容。