Web | JavaScript的提升机制

作用对象: 函数和变量的声明.

作用效果: 会将其声明提升到其所在的作用域的最顶端.函数会优先于变量的声明.

//函数的提升优于变量的提升
    test();
    var a=2;
    function test(){
        console.log(a);
    }
//浏览器会将其提升为===>
    function test(){
            console.log(a);
        }
        var a;
        test();
        a=2;

如果在同一个作用域内,有相同命名的变量和函数,那么变量的声明就会被忽略掉,只要函数的声明有效.(但是变量的赋值行为依然有效)

//相同命名的变量和函数声明
        foo();
        var foo;
        function foo() {
            console.log( 1 );
        }
//浏览器解析====>
        function foo() {
            console.log( 1 );
        }
        //var foo; 被忽略无效
        foo();

//2
    function a() {}
      var a;
    console.log(typeof a)//function

//3
    var c = 1
    function c(c) {
    console.log(c)
    var c = 3
    }
    c(2)   //结果是error

借助一些小实例能够更清晰的看到提升所带来的效果

        var foo=2;
        test();
        function test(){
            foo=5;
            function foo(){
                console.log(1);
            }
        }
        console.log(foo);
//浏览器解析====>
        function test(){
            function foo(){
                console.log(1);
            }
            foo=5;
        }
        var foo;
        foo = 2;
        test();
        console.log(foo)  //==>2

需要注意的是,如果是在代码块中声明的函数,会自己转化成函数表达式,那么提升的就仅仅只是指向表达式的变量.

        //代码块中无作用域
        console.log(a);//undefined
        console.log(b);//undefined
        if(true){
            var a=0;
        }else{
            var b=2;
        }
        //代码块中的函数转化,下面函数相当于注释的样子
        console.log(test)//undefined
        if(true){
            /*var test =function (){
                console.log("if");
            }*/
            function test (){
                console.log("if");
            }
        }else{
            /*var test =function (){
                console.log("eles");
            }*/
            function test (){
                console.log("else");
            }
        }
        console.log(test)//函数

原文地址:https://www.cnblogs.com/JanChuJun/p/10140793.html

时间: 2024-10-13 02:45:40

Web | JavaScript的提升机制的相关文章

JavaScript的作用域和提升机制

你知道下面的JavaScript代码执行时会输出什么吗? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 答案是"10",吃惊吗?那么下面的可能会真的让你大吃一惊: var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); 这里浏览器会弹出"1".怎么回事?这似乎看起

javascript的垃圾收集机制

× 目录 [1]原理 [2]标记清除 [3]引用计数[4]性能问题[5]内存管理 前面的话 javascript具有自动垃圾收集机制,执行环境会负责管理代码执行过程中使用的内存.在编写javascript程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理.下面将详细介绍javascript的垃圾收集机制 原理 垃圾收集机制的原理很简单:找出那些不再继续使用的变量,然后释放其占用的内存,垃圾收集器会按照固定的时间间隔,或代码执行中预定的收集时间,周期性地执行

回归基础: JavaScript 变量提升

from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScript引擎在执行的时候,把所有变量的声明都提升到当前作用域的最前面. 当然了,函数声明也是可以被提升的.然后,函数表达式却没有提升. 原文:Back to Basics: JavaScript Hoisting 译文:回归基础: JavaScript 变量提升 变量声明是所有的编程语言中最基础部分之

Atitit.h5 web webview性能提升解决方案-----fileStrore缓存离线存储+http方案

1. 业务场景 android+webview h5 css背景图性能提升1 2. 根据标准,到目前为止,H5 一共有6种缓存机制,有些是之前已有,有些是 H5 才新加入的.1 2.1. 各种方案的比较,如下图2 3. Attilax的解决之道 file 缓存+http3 3.1. 图片的下载3 3.2. Jsbridge 4android5 3.3. http协议6 4. 参考8 1. 业务场景 android+webview h5 css背景图性能提升 图片的缓存大概儿需要500m的规模..

javascript的hoisting机制

javascript解释器中存在一种变量声明被提升(hoisting)的机制,即变量(函数)的声明会被提升到作用域的最前面.即使把声明代码写在最后面. alert(foo); //function foo(){} alert(bar); //undefined var bar = function(){}; function foo(){}; alert(foo); //function foo(){} alert(bar); //function bar(){} 从上例也能看出函数声明和函数表

我想这次我真的理解了 JavaScript 的单线程机制

今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触了单线程模型相关的东西,但当时理解得并不是很清楚和明白.所以这道面试题也没有给出一语中的的答案.重新阅读阮一峰的 <JavaScript 运行机制详解>和我之前写的<setTimeout 异步与回调>之后.我决定重新写一篇博客来更加白话的总结 JS 的单线程机制和异步. 重演历史 -

Javascript引擎单线程机制及setTimeout执行原理说明

setTimeout用法在实际项目中还是会时常遇到.比如浏览器会聪明的等到一个函数堆栈结束后才改变DOM,如果再这个函数堆栈中把页面背景先从白色设为红色,再设回白色,那么浏览器会认为DOM没有发生任何改变而忽略这两句话,因此我们可以通过setTimeout把“设回白色”函数加入下一个堆栈,那么就可以确保背景颜色发生过改变了(虽然速度很快可能无法被察觉). 总之,setTimeout增加了Javascript函数调用的灵活性,为函数执行顺序的调度提供极大便利. 然后,我们从基础的层面来看看:理解J

轻松搞定javascript预解析机制(搞定后,一切有关变态面试题都是浮云~~)

hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解析),但吃的时候还是一口一口的吃(JS逐行执行)! OK,解决下面五个问题,JS预解析就算过了~~(前提:对JS变量作用域有清晰理解) 一.JS预解析是什么? 其实就是对程序要用到的材料(变量,函数)给一个初始值,并存到一个表中(我自己虚构的),当程序运行到那一行时,就来这个表看有没有初始值,没有就

JavaScript的运行机制

1.JavaScript的单线程机制 2.任务队列(同步任务和异步任务) 3.事件和回调函数 4.定时器 5.Event Loop事件循环 一.JavaScript的单线程机制,JavaScript的使用单线程是由其主要用途有关,JavaScript是在用户互动.操作DOM元素,如果使用多线程则会带来很多问题,同时操作一个DOM进行删除和添加操作,浏览器无法选择执行那个线程? 二.任务队列,单线程机制,JavaScript的任务就是依次执行,但是CPU与IO设备(ajax网络读取数据,鼠标,键盘