JavaScript 预解析的4种实现方法解析

预解析:在当前作用域下，js运行之前，会把带有var和function关键字声明的变量先声明，并在内存中安排好。然后从上至下解析js语句。而且function的声明优先于var声明。

不多说，，直接上代码

正规写法：

var num=10;
  fun();
function fun(){
  console.log(num);//undefined
var num=20; }

预解析里：先将变量和函数提前，如下：

var num;
      function fun(){
        var num;
        console.log(num);//undefined
        num=20;
      }
      num=10;
      fun();

第二种

var num=10;
       function dn(){
         console.log(num);//undefined
         var num=20;
         console.log(num);//20
       }
       dn();
       //相当于以下代码
       var num;
       function dn(){
         var num;
         console.log(num);
         num =20;
         console.log(num );
       }
       num=10;
       dn();

第三种

var a =18;
       ss();
       function ss(){
         var b=9;
         console.log(a);//undefined
         console.log(b);//9
         var a='123';
       }
       //相当于以下代码
       var a;
       function ss(){
         var b;
         var a;
         b=9;

         console.log(a);
         console.log(b);
         a='123';
       }
       a=18;
       ss();

第四种

aa();
       console.log(c1);//9
       console.log(b1);//9
       console.log(a1);//报错
       function aa(){
         var a1=b1=c1=9;
         console.log(a1);//9
         console.log(b1);//9
         console.log(c1);//9
       }
       //相当于
       function aa(){
         var a1=b1=c1=9;//相当于 var a=9;b=9,c=9
         var a1;
         a1=b1=c1=9;

         console.log(a1);
         console.log(b1);
         console.log(c1)
       }
       aa();
       console.log(c1);
       console.log(b1);
       console.log(a1);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解js的作用域、预解析机制

    虽然,ES6在我们工作中应用得越来越广泛,但是还是很多项目保留着ES5的写法,所以,今天,带着大家重新巩固下ES5下的作用域及预解析机制. 概念: 作用域:域,指的是一个空间.范围.区域,作用指的是在域内可进行读写操作.一个变量的作用域是程序源代码中定义的这个变量的区域. 在ES5中,只存在全局和函数级作用域,在ES6中,引入了块级作用域,js的预解析机制大概分为两个过程:预解析和自上而下逐行解读 预解析:js解析器会先把var定义的变量.function.参数等一些东西存储进仓库里面(内存).

  • 深入理解JavaScript中的预解析

    深入理解JavaScript中的预解析

    前言 JavaScript是解释型语言是毋庸置疑的,但它是不是仅在运行时自上往下一句一句地解析的呢? 事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有"预解析"行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript"预解析",如果我的见解有误,还望指正. 在

  • js作用域和作用域链及预解析

    变量---->局部变量和全局变量, 作用域:在某个空间范围内,可以对数据进行读写操作 局部作用域和全局作用域 js中没有块级作用域-一对括号中定义的变量,这个变量可以在大括号外面使用 函数中定义的变量是局部变量 作用域链:变量的使用,从里向外,层层的搜索,搜索到了就可以直接使用了 层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错 在 JavaScript 中, 对象和函数同样也是变量. 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合. JavaScr

  • 浅谈js script标签中的预解析

    首先介绍预解析,虽然预解析字面意思很好理解,但是却是出坑出的最多的地方,也是bug经常会有的地方,利用好预解析的特性可以解决很多问题,并且提高代码的质量及数量,浏览器在解析代码前会把变量的声明和函数(整个函数体)提前到当前作用域的最顶端. 细节问题:在多对的script标签中如果有相同的函数,那它们相互之间是不会受影响的,在第二对script标签中声明变量或者是创建函数,在第一对script标签中是无法访问到的,这就说明了,javaScript的预解析只会在各自的script标签中发生,同时,第

  • 跟我学习javascript的var预解析与函数声明提升

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错.然而,JavaScript 却能够在变量和函数被声明之前使用它们.下面我们就深入了解一下其中的玄机. 先来看一段代码: (function() { console.log(noSuchVariable);//ReferenceError: noSuchVari

  • 理解 JavaScript 预解析

    事实上或某种现象证明并不是这样的,通过<JavaScript权威指南>及网上相关资料了解到,JavaScript有"预解析"行为.理解这一特性是很重要的,不然在实际开发中你可能会遇到很多无从解析的问题,甚至导致程序bug的存在.为了解析这一现象,也作为自己的一次学习总结,本文逐步引导你来认识JavaScript"预解析",如果我的见解有误,还望指正. (1)如果JavaScript仅是运行时自上往下逐句解析的,下面的代码能正确运行是可以理解的,因为我们先

  • JavaScript预解析及相关技巧分析

    本文实例讲述了JavaScript预解析及相关技巧.分享给大家供大家参考,具体如下: 变量 同样,以这两个小例子的错误对比提示开始. alert(y1); //代码段1 var y1 = 'dddd'; alert(y2); //代码段2 // alert(typeof y2); y2 = 'xxxxx'; 先思考一下,为什么一个会提示 undefined , 一个却抛出变量未定义的错..先看JavaScript的解析过程. javascript在执行过程之前,会做一件事件"预解析".

  • JavaScript 预解析的4种实现方法解析

    预解析:在当前作用域下,js运行之前,会把带有var和function关键字声明的变量先声明,并在内存中安排好.然后从上至下解析js语句.而且function的声明优先于var声明. 不多说,,直接上代码 正规写法: var num=10; fun(); function fun(){ console.log(num);//undefined var num=20; } 预解析里:先将变量和函数提前,如下: var num; function fun(){ var num; console.lo

  • JS图片预加载三种实现方法解析

    预加载基本概念:当页面打开图片提前加载,并且缓存在用户本地,需要用到时直接进行渲染:在浏览图片较多的网页(百度图库,淘宝京东等),可以有更好的用户体验: 一张图片的预加载 var img=new Image(); img.addEventListener("load",loadHandler); img.src="./img/1.jpg"; document.body.appendChild(img); console.log(img.width): functio

  • JavaScript定义函数的三种实现方法

    JavaScript定义函数的三种实现方法 [1]正常方法 function print(msg){ document.write(msg); } 对函数进行调用的几种方式: 函数名(传递给函数的参数1,传递给函数的参数2,-.) 变量 = 函数名(传递给函数的参数1,传递给函数的参数2,-.) 对于有返回值的函数调用,也可以在程序中直接使用返回的结果,例如:alert("sum=" + square(2,3)); 不指定任何函数值的函数,返回undefined. [2]构造函数方法 

  • python3 反射的四种基本方法解析

    这篇文章主要介绍了python3 反射的四种基本方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 class Person(object): def __init__(self): pass def info(self): print('我是person类中的info方法') 1.getattr()方法 这个方法是根据字符串去某个模块中寻找方法 instantiation = reflect.Person()#先实例化 f = getat

  • JavaScript中常用的几种字符串方法汇总（新手必看）

    JavaScript中常用的几种字符串方法汇总（新手必看）

    JavaScript常用的几种字符串方法 字符串是一种只读数据,只能查 常用的几种字符串方法: 1.charAt:根据指定的下标获取到对应的字符; 2.charCodeAt:根据指定的下标获取到字符对应的阿斯克码:(底部有ASCII对照表) ps:通过阿斯克码获取到字符: 3.substring:截取字符串: 4.substr:截取字符串: 5.slice:截取字符串: 6.indexOf:查找字符/子字符串在大字符串中第一次出现的位置,找到了返回下标,找不到返回-1: 7.lastIndexO

  • JavaScript箭头函数的五种使用方法及三点注意事项

    目录 使用 简略编写 结合解构赋值 结合扩展运算符 this指向的改变 绑定this 注意细节 关于构造 关于参数对象 关于yield命令 面试题 前言: 箭头函数是ES6新增的定义函数的方式,我们可以使用()=>{}来顶替以前的函数定义方式,下面从五个使用姿势与三点注意事项来刨析箭头函数. 使用 简略编写 当我们箭头函数函数只有一个参数的时候是可以将()省略,当代码块只有一行的时候可以将{}与return省略 const fn = num => num.sort(); console.log

  • JavaScript数组合并的8种常见方法小结

    目录 1.ES6 解构 2.遍历添加 3.concat 4.join & split 5.解构添加 6.splice解构 7.apply 8.call 补充:两个数组的交叉合并 总结 1.ES6 解构 [...arr, ...array] 不改原数组值,生成新的数组. 2.遍历添加 array.forEach(item => { arr.push(item) }) 遍历方法:forEach.map.filter.every.for.for in.for of等. 添加方法:push(后追加)

  • 为什么说JavaScript预解释是一种毫无节操的机制详析

    为什么说JavaScript预解释是一种毫无节操的机制详析

    前言 JavaScript是一门解释型的语言 , 想要运行JavaScript代码需要两个阶段 编译阶段: 编译阶段就是我们常说的JavaScript预解释(预处理)阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码 执行阶段: 在编译阶段JavaScript解释器借助执行环境把字节码生成机械码,并从上到下按顺序执行 本文就重点介绍预解释,框架图如下: 一.什么是预解释 在js中,带var 和function关键字的需要预解释: 那什么是预解释?就是在js

  • JavaScript 字符串操作的几种常见方法

    连接字符串 连接字符串 var str1="Javascript字符串连接"+",方法一"; var str2="方法二"; str2+="使用+=连接"; var str3="方法三"; str3+=",多字符串连接"+".同时使用多个字符连接"+",正确!"; var str4="字符串连接"; str4=str4.conc

  • javascript确认框的三种使用方法

    第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. 复制代码 代码如下: <SCRIPT LANGUAGE=javascript> function del() {   var msg = "您真的确定要删除吗?\n\n请确认!";   if (confirm(msg)==true){     return true;   }else{     return false;   } } </SCRIPT> 调用方法: 复

随机推荐