javascript怎么运行当前文件,如何运行javascript代码

大家好，小编来为大家解答以下问题，javascript怎么运行程序快捷键，javascript怎么运行到浏览器，今天让我们一起来看看吧！

1.执行上下文

showNum()
console.log(mynum)
var mynum = '111'
function showNum() {
    console.log('111');
}

我们都知道java的执行顺序是从上往下执行的，按照这个逻辑来看的话，这段代码第一行showNum还没定义，所以会报错，第二行mynum同理。然而结果是第一行输出111，第二行输出undefined，然而如果我们把声明的代码去掉的话，那它必然是报错的快码论文。

由此我们可以得到几个结论

• 1.在执行过程中，若用了未声明的变量，那么java执行会报错
• 2.在一个变量定义之前使用它不会报错，但该值会变成undefined
• 3.在一个函数声明之前使用它，能正常使用

根据我们从上到下的执行顺序来看第一行很好理解，主要看下另外两条结论。

变量提升

java在执行的时候，java引擎会自动把变量和函数声明的部分提升到代码开头，并且会给它设置一个默认值就是undefined

var mynum = undefined
console.log(mynum)
mynum = '111';

所以我们在定义mynum的时候，并且将它输出的时候，它的代码执行顺序其实是这样的

那么为什么showNum是可以输出111呢

fn1();
fn2();
function fn1(){
	console.log('fn1')
}
var fn2 = function(){
    console.log('fn2')
}

fn1是一个完整的函数声明，没涉及赋值的操作，而fn2是先声明fn2再把function赋值给它，因此fn2声明后被提升到前面时它的值是undefined，所以会报is not a function的错误

showNum()
console.log(mynum)
var mynum = '111'
function showNum() {
    console.log('111');
}


//变量提升部分
var mynum = undefined
function showNum(){
    console.log('111')
} 
//执行部分
showNum()
console.log(mynum)
mynum = '111'

实际上变量和函数声明里代码的位置是不会改变的，所谓的变量提升其实是在编译阶段被java引擎放到内存中，所以我们最初的那段代码经过编译后它是这样的

执行上下文是JavaScript执行一段代码时的运行环境，比如调用一个函数，就会进入这个函数的执行上下文，确定该函数在执行期间用到的诸如this、变量、对象以及函数等。

2.调用栈

函数调用

var a = 2
function add(){
var b = 10
return  a+b
}
add()

当我们执行上面这段代码的时候，代码中的a，add都会被保存在全局的执行上下文中，当执行到add( )时，java判断这是一个函数调用，于是会做出以下操作

• 从全局执行上下文中取出add函数的代码
• 对add函数这段代码进行编译，并创建该函数的执行上下文和可执行代码
• 执行代码，输出结果

这个时候这段代码会拥有两段执行上下文，一段是全局的，一段是add函数的，也就是说在执行java的时候，可能存在多个执行上下文。而java就是通过栈来管理这些执行上下文的

JavaScript调用栈

在执行上下文创建好后，java会将执行上下文压入栈中，这种管理执行上下文的栈被称为执行上下文栈，也就是我们平时说的调用栈。

观看下面这段相对复杂一点的代码的调用栈

var a = 1
function add_1 (b,c){
    return b+c
}
function add_2(b,c){
    var d = 4
    var e = add_1(b,c)
    return a + e + d 
}
add_2(2,3)

这里解释一下为什么add_2的执行上下文中e是undefined。其实在将其执行上下文压入调用栈中时，一开始这些变量的值根据我们前面说到的变量提升，都是undefined，是经过执行代码之后它们的值才发生了变化，而当我们执行到var e = add_1(b,c)的时候，代码执行了add_1方法，这时候在给它赋值之前需要先执行add_1函数，于是它还是undefined，当add_1执行结束之后其调用栈会变成这样。

可以看到在add_1函数执行结束之后，它的执行上下文会从调用栈中弹出，并且将值返回给e。接着add_2执行完之后它的执行上下文也会从调用栈中弹出，只剩下全局执行上下文，到这里整个执行流程就结束了。

在平时开发过程中，我们也可以通过控制台打断点的方式或者使用console.trace()来输出当前的函数调用关系

栈溢出

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

就像这段代码，通过递归不断地向调用栈压入fn的执行上下文，导致入栈的执行上下文超过了它的限制，就会抛出栈溢出的错误

function fn(a){
    return fn(a)
}
fn(a)

3.块级作用域

java因为存在着我们之前讲到的变量提升这一特性，导致了它的一些执行方式不符合从上到下的执行顺序，所以es6中引入了块级作用域避开了这种缺陷，而在这之前java是只有全局作用域跟函数作用域。

//if块
if(1){}

//while块
while(1){}

//函数块
function foo(){
 
//for循环块
for(let i = 0; i<100; i++){}

//单独一个块
{}

举个例子说一下没有块级作用域的缺陷

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

按理想状态来说。for循环中的i在这段循环结束后应该是被销毁了，然而在这段代码中它没有被销毁，所以最后输出了8

再看看通过let使用块级作用域的

function fn(){
    for(let i =0;i<8;i++){}
    console.log(i)
}
fn()

会发现下面输出i的时候报了not defined的错误，这种就非常符合我们的编程习惯了：作用块内声明的变量不影响块外面的变量。

JavaScript是如何支持块级作用域的

function fn(){
    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)
}   
fn()

当进入函数的作用域块时，作用域块中通过let声明的变量，会被存放在词法环境的一个单独的区域中，这个区域中的变量并不影响作用域块外面的变量，比如在作用域外面声明了变量b，在该作用域块内部也声明了变量b，它们都是独立的存在。

其实，在词法环境内部，维护了一个小型栈结构，栈底是函数最外层的变量，进入一个作用域块后，就会把该作用域块内部的变量压到栈顶；当作用域执行完成之后，该作用域的信息就会从栈顶弹出，这就是词法环境的结构。需要注意下，我这里所讲的变量是指通过let或者const声明的变量。

当作用域块执行结束后，其内部定义的变量就会从词法环境中弹出，类似调用栈

4.作用域链

function fn1(){
	console.log(a)
}
function fn2(){
	var a = 2
	fn1()
}
var a = 1
fn2()

这段代码如果根据先前讲到的调用栈去分析的话，可能会觉得会从上往下去取到 fn2的执行上下文中的a，所以输出2，但其实不是这样的

这里的作用域链如下

fn1，fn2的作用域链其实都是指向了全局，这是因为在JavaScript执行过程中，其作用域链是由词法作用域决定的。

词法作用域

词法作用域就是指作用域是由代码中函数声明的位置来决定的，所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。

从图中可以看出，词法作用域就是根据代码的位置来决定的，其中main函数包含了bar函数，bar函数中包含了foo函数，因为JavaScript作用域链是由词法作用域决定的，所以整个词法作用域链的顺序是：foo函数作用域—>bar函数作用域—>main函数作用域—>全局作用域。

回去看先前的那段代码，fn1,fn2的上级作用域都是全局作用域，所以在这两个函数内用了一个它们没有定义的变量，那它们就会到全局作用域里面去找。也就是说，词法作用域是代码阶段就决定好的，和函数是怎么调用的没有关系。

闭包

function fn(){
    var name ='a'
    var fn_name={
        getname:function(){
            return name
        },
         setname:function(new_name){
            name = new_name
        }
    }
    return fn_name
}
var bar = fn()
bar.setname('b')
console.log(bar.getname())

根据词法作用域的规则，内部函数getName和setName总是可以访问它们的外部函数fn中的变量name。虽然fn执行结束了，但是getname,setname依然可以使用fn中的变量name。所以fn执行结束后，它的整个调用栈其实是这样的

fn函数执行结束后其执行上下文会从调用栈中弹出，但由于返回的setname，getname保留了对fn内部name的引用，所以这个变量依然保留在内存中。这就像生成了一个setname，getname的专属包，因为除了它们其他任何地方都无法访问到，这个包就是所谓的闭包。

当我们执行bar.setName(‘b’)的时候，java引擎会沿着当前执行上下文–>fn函数闭包–>全局执行上下文的顺序来查找变量

5.数据是如何存储的

JavaScript的内存模型

从图中可以看出， 在JavaScript的执行过程中， 主要有三种类型内存空间，分别是代码空间、栈空间和堆空间。这里的栈空间就是我们之前反复提及的调用栈，是用来存储执
行上下文的。

function fn(){
    var a = 'a',
        b = a,
        c = {num:3},
        d = c
}

原始类型的数据值都是直接保存在“栈”中的，引用类型的值是存放在“堆”中的。

JavaScript引擎需要用栈来维护程序执行期间上下文的状态，如果栈空间大了话，所有的数据都存放在栈空间里面，那么会影响到上下文切换的效率，进而又影响到整个程序的执行效率。比如文中的fn函数执行结束了，JavaScript引擎需要离开当前的执行上下文，只需要将指针下移到上个执行上下文的地址就可以了，fn函数执行上下文栈区空间全部回收。

所以通常情况下，栈空间都不会设置太大，主要用来存放一些原始类型的小数据。而引用类型的数据占用的空间都比较大，所以这一类数据会被存放到堆中，堆空间很大，能存放很多大的数据，不过缺点是分配内存和回收内存都会占用一定的时间。

在JavaScript中，赋值操作和其他语言有很大的不同，原始类型的赋值会完整复制变量值，而引用类型的赋值是复制引用地址。

还有一种特殊情况是闭包，当执行到内部函数的时候，java引擎会对内部函数做一次词法扫描，当发现这是一个闭包的时候，会在堆空间创建一个closure的对象（这是一个内部对象，JavaScript是无法访问的），用来保存闭包用到的变量。

总的来说，产生闭包的核心有两步：第一步是需要预扫描内部函数；第二步是把内部函数引用的外部变量保存到堆中。

6.垃圾回收

有些数据被使用之后，可能就不再需要了，我们把这种数据称为垃圾数据。如果这些垃圾数据一直保存在内存中，那么内存会越用越多，所以我们需要对这些垃圾数据进行回收，以释放有限的内存空间。

调用栈中的数据是如何回收的

function fn (){
    var a = 1
    var b = {num:1}
    function fn_in{
        var c = 3
        var d = {num:4}
    }
    fn_in()
}
fn()

当执行到fn_in内的时候，其调用栈和对空间状态如下

与此同时，还有一个记录当前执行状态的指针（称为ESP），指向调用栈中fn_in函数的执行上下文，表示当前正在执行fn_in函数。接着，当fn_in函数执行完成之后，函数执行流程就进入了fn函数，那这时就需要销毁fn_in函数的执行上下文了。ESP这时候就帮上忙了，JavaScript会将ESP下移到fn函数的执行上下文，这个下移操作就是销毁fn_in函数执行上下文的过程。

堆中的数据是如何回收的

当上面那段代码的fn函数执行结束之后，ESP应该是指向全局执行上下文的，那这样的话，fn_in函数和fn函数的执行上下文就处于无效状态了，不过保存在堆中的两个对象依然占用着空间。要回收堆中的垃圾数据，就需要用到JavaScript中的垃圾回收器了。

在V8中会把堆分为新生代和老生代两个区域，新生代中存放的是生存时间短的对象，老生代中存放的生存时间久的对象。

新生区通常只支持1～8M的容量，而老生区支持的容量就大很多了。对于这两块区域，V8分别使用两个不同的垃圾回收器，以便更高效地实施垃圾回收。

• 副垃圾回收器，主要负责新生代的垃圾回收。
• 主垃圾回收器，主要负责老生代的垃圾回收。

工作流程

其实不论什么类型的垃圾回收器，它们都有一套共同的执行流程。

第一步是标记空间中活动对象和非活动对象。所谓活动对象就是还在使用的对象，非活动对象就是可以进行垃圾回收的对象。

第二步是回收非活动对象所占据的内存。其实就是在所有的标记完成之后，统一清理内存中所有被标记为可回收的对象。

第三步是做内存整理。一般来说，频繁回收对象后，内存中就会存在大量不连续空间，我们把这些不连续的内存空间称为内存碎片。当内存中出现了大量的内存碎片之后，如果需要分配较大连续内存的时候，就有可能出现内存不足的情况。所以最后一步需要整理这些内存碎片，但这步其实是可选的，因为有的垃圾回收器不会产生内存碎片，比如接下来我们要介绍的副垃圾回收器。

副垃圾回收器

副垃圾回收器主要负责新生区的垃圾回收。而通常情况下，大多数小的对象都会被分配到新生区，所以说这个区域虽然不大，但是垃圾回收还是比较频繁的。

新生代中用Scavenge算法来处理。所谓Scavenge算法，是把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域，如下图所示：
 

新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作。

在垃圾回收过程中，首先要对对象区域中的垃圾做标记；标记完成之后，就进入垃圾清理阶段，副垃圾回收器会把这些存活的对象复制到空闲区域中，同时它还会把这些对象有序地排列起来，所以这个复制过程，也就相当于完成了内存整理操作，复制后空闲区域就没有内存碎片了。

完成复制后，对象区域与空闲区域进行角色翻转，也就是原来的对象区域变成空闲区域，原来的空闲区域变成了对象区域。这样就完成了垃圾对象的回收操作，同时这种角色翻转的操作还能让新生代中的这两块区域无限重复使用下去。

由于新生代中采用的Scavenge算法，所以每次执行清理操作时，都需要将存活的对象从对象区域复制到空闲区域。但复制操作需要时间成本，如果新生区空间设置得太大了，那么每次清理的时间就会过久，所以为了执行效率，一般新生区的空间会被设置得比较小。

也正是因为新生区的空间不大，所以很容易被存活的对象装满整个区域。为了解决这个问题，JavaScript引擎采用了对象晋升策略，也就是经过两次垃圾回收依然还存活的对象，会被移动到老生区中。

主垃圾回收器

由于老生区的对象比较大，若要在老生区中使用Scavenge算法进行垃圾回收，复制这些大的对象将会花费比较多的时间，从而导致回收执行效率不高，同时还会浪费一半的空间。因而，主垃圾回收器是采用**标记-清除（Mark-Sweep）**的算法进行垃圾回收的。下面我们来看看该算法是如何工作的。

首先是标记过程阶段。标记阶段就是从一组根元素开始，递归遍历这组根元素，在这个遍历过程中，能到达的元素称为活动对象，没有到达的元素就可以判断为垃圾数据。

接下来就是垃圾的清除过程。它和副垃圾回收器的垃圾清除过程完全不同，你可以理解这个过程是清除掉红色标记数据的过程，可参考下图大致理解下其清除过程：

上面的标记过程和清除过程就是标记-清除算法，不过对一块内存多次执行标记-清除算法后，会产生大量不连续的内存碎片。而碎片过多会导致大对象无法分配到足够的连续内存，于是又产生了另外一种算法——标记-整理（Mark-Compact），这个标记过程仍然与标记-清除算法里的是一样的，但后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动，然后直接清理掉端边界以外的内存。你可以参考下图：

全停顿

由于JavaScript是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的JavaScript脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。我们把这种行为叫做全停顿（Stop-The-World）。

在V8新生代的垃圾回收中，因其空间较小，且存活对象较少，所以全停顿的影响不大，但老生代就不一样了。如果在执行垃圾回收的过程中，占用主线程时间过久，就像上面图片展示的那样，花费了200毫秒，在这200毫秒内，主线程是不能做其他事情的，这将会造成页面的卡顿现象。

为了降低老生代的垃圾回收而造成的卡顿，V8将标记过程分为一个个的子标记过程，同时让垃圾回收标记和JavaScript应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法。如下图所示：
使用增量标记算法，可以把一个完整的垃圾回收任务拆分为很多小的任务，这些小的任务执行时间比较短，可以穿插在其他的JavaScript任务中间执行，这样当执行上述动画效果时，就不会让用户因为垃圾回收任务而感受到页面的卡顿了。