JS代码执行机制

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS代码执行机制相关的知识,希望对你有一定的参考价值。

JS代码从编译到执行

  我们写出一段JS代码,JS的引擎并不是按照我们书写的顺序从上到下顺序编译并且执行的,首先是按照自己的规则对我们的代码先进行编译,然后从上到下执行编译的代码。

  在全局作用域中,JS首先会对我们的函数进行声明,然后就是我们经常听到的变量提升机制,然后才是按照我们书写代码的顺序,来进行编译,然后在执行编译的代码。

  看如下代码:

function fn(){
    console.log(a);
}
fn();
var a = "value";

  非常常见的一个面试题fn函数执行输出undefined,我们按照上面说的JS编译执行的机制来模拟编译后的代码:

function fn(){
    console.log(a);
}
var a = undefined;
fn();
a = "value";

  然后按照编译出来的顺序自上而下的来执行我们的代码,可以看出当fn函数执行时a还没有进行赋值,此时的a为undefined。

  在函数作用域中的编译顺序为:首先对函数的存在的参数进行声明,然后是内部的函数,在然后是变量,然后在顺序编译我们书写的代码,假如有如下的代码:

function wrap(a,b){
    var c = "c";
    var str = a+b+c;
    function pirint(){
        console.log(str)
    }
    print();
}
wrap("a","b");

  很标准的一段代码,wrap函数内部模拟编译的代码为:

var a = undefind;
a = "a";
var b = undefined;
b = "b";
function _print(){
    console.log(str);
}
var c = undefined;
var str = undefined;
c = "c";
str = a+b+c;
_print();

  弄清JS的执行机制可能并不会让我书写数功能更加强大的代码,但是可以让我们写出更加优雅的代码,其次在做一些笔试题的时候也可以让我们更加的得心应手,在高的墙都是由一块块砖一粒粒细沙垒成的,代码也是一样在复杂的代码也都是以基础的代码作为根基的。

JS基本使用

  代码无论怎么写,基础的知识都是不变的。

  1."."操作符的左边永远是一个对象,右边就是属性(属性值也有可能还是一个对象),结果就是这个属性的属性值。

  2."()"永远都是对一个方法的调用。

  3."()"里面永远都是参数,如果里面的参数是一个表达式,则先执行表达式,然后将表达式执行的结果作为参数。

  例如我们经常使用的JQ的链式操作:$("#demo").html().css();$、html、css都是一个方法名字,而每一个方法都会返回一个对象,从而来实现方便我们开发的链式操作。

以上是关于JS代码执行机制的主要内容,如果未能解决你的问题,请参考以下文章

JS引擎的执行机制

js对代码解析机制

16JS执行机制

angularJS使用ocLazyLoad实现js延迟加载

JS解析机制

谷歌浏览器调试jsp 引入代码片段,如何调试代码片段中的js