js代码解析需知

作者: 千锋HTML5学院 | 来源:发表于2020-12-08 10:09 被阅读0次

首先js引擎在读取js代码时会进行两个步骤:

第一个步骤是解释,所谓解释就是会先通篇扫描所有的Js代码,然后把所有声明提升到顶端。 第二个步骤是执行, 所谓执行就是操作一类的。

好吧,举几个好吃的栗子:

例子1:

console.log(a); //输出结果 undefined
var a = 10;
//  以上代码输出 undefined
//  原因: 变量提升( 把变量声明提升到当前执行环境的最顶端)
//  上段代码相当于:
var a;
console.log(a); //由于未赋值 所以输出undefined 
a = 10;

例2:

foo();

function foo() {
    console.log("aaa");
}
//  结果输出: aaa 
// 原理:函数声明提升 (函数声明提升直接把整个函数提到执行环境的最顶端)

// 相当于:
function foo() {
    console.log("aaa");
}

foo();
//  变量提升只提升函数名 而函数提升会提升整个函数题 注意:函数提升在变量提升上面。

例3:

foo();
var foo = function () {
    console.log("aaa");
}

// 运行结果是: foo is not a function

// 原因: 还是进行了变量提升 
// 相当于:
var foo;
console.log(foo); //undefined
foo(); //foo is not a function
foo = function () {
    console.log("aaa");
}
//  上面代码输出undefined 是因为变量提升后并没有赋值因此输出undefined

// 输出foo is not a function 原因是:js解析遇到 foo()时会默认当做函数来解析

例4:

console.log(foo);
var foo = 10;
console.log(foo);

function foo() {
    console.log(10);
}
console.log(foo);
// 输出结果:

function () { //67行输出
    console.log(10);
}
10 //69行输出
10 //72行输出/
//  原理: 
// 相当于:
function foo() {
    console.log(10);
}
var foo;
console.log(foo);
foo = 10;
console.log(foo);
console.log(foo);
// 注意: 函数提升在变量提升上面,第一个console.log(foo);为什么会输出函数题呢,原因在于 var foo; 并未有赋值只是声明,因此他会调用上面的值
// 例如:
var b = 10;
b = 10;
console.log(b); //10 输出上一个值不会输出undefined
// 但是更改后:
var b = 10;
b = 20;
console.log(b); //20 输出20不是上一个值

总结一下:

关于变量提升,一定要注意细心思考一下,还有就是要牢记,函数提升在变量提升之上;希望刚入行的小伙伴看到后能有所领悟。

相关文章

  • js代码解析需知

    首先js引擎在读取js代码时会进行两个步骤: 第一个步骤是解释,所谓解释就是会先通篇扫描所有的Js代码,然后把所有...

  • js预解析(面试哦)

    js 代码通过 js 解释器(js 引擎) 来执行的 js 解释器 来执行js 代码分为两步: 首先预解析 再 ...

  • JS预解析

    JS解释器运行JS分为两步:预解析、代码执行 预解析 JS解释器会把JS里面所有的var和function提升到当...

  • js变量提升 函数提升 作用域

    js代码解析原则 js引擎首先在读取js代码时默认执行2个步骤:1.解释(通篇扫描所有js代码,然后把所有声明(变...

  • 你不知道的异步

    异步函数 误区:把script代码放到body底部并不是异步执行js代码,仅仅是让页面优先解析然后再解析执行js代...

  • 2018-07-30

    js原生错误代码 js常见错误类型 (1)SyntaxError SyntaxError是解析代码时发生的语法错误...

  • JavaScript解析机制与闭包原理实例详解

    本文实例讲述了JavaScript解析机制与闭包原理。分享给大家供大家参考,具体如下: js解析机制: js代码解...

  • React学习笔记

    jsx语法 遇到{ } 就把里面的代码当js解析 遇到< > 就把里面的代码当html解析 声明组件 组件使用cl...

  • RN-Taro语法转换分享

    一.整体流程 文件输入-->解析-->转换-->生成-->文件输出 解析将代码解析成抽象语法树(AST),每个js...

  • node.js + vscode + typescript

    添加第三方库 node.js无法直接解析执行ts代码, 所以需要安装typescript将ts代码转换成js代码....

网友评论

    本文标题:js代码解析需知

    本文链接:https://www.haomeiwen.com/subject/ndrfgktx.html