我理解的js中预解释

浏览器在执行代码前,先找带var和带function的地方,把带var的声明且赋予初始值undefined,把带function的声明且定义。

带var关键字预解释

让我们先看下这段代码执行的结果:

alert(n);//弹出undefined
var n = 10;

弹出的结果是undefined,为何不是10?让我们再看下面这段代码执行的结果:

alert(n);
n = 10;

运行报如下错误:

为何这次会报错,原因是代码在运行的时候,没有声明这个变量n;通过这两段代码的比较,我们发现带var关键字和不带var关键字声明的变量是有区别的,带var声明的变量在代码执行之前,似乎浏览器已经给了它们一个初始值undefined,因此我们将代码执行前,浏览器引擎自动扫描带var关键字和带function关键字(后面会提到)声明的变量和定义的函数的这个过程称为预解释。

带function关键字预解释

让我们看下如下代码执行的结果:

fn();//弹出hello
function fn(){
    alert(‘hello‘);
}

执行结果弹出hello,fn能够正常执行,原因是在代码执行前fn被预解释了,在预解释时已经将fn定义(defined)了,我们又有疑问了,为何第一段代码执行结果不弹出10,而是undefined,再次引入了另一个概念JavaScript中的声明和定义。

JavaScript中的声明(declare)和定义(defined)

我们通常用var关键来声明变量,用function关键字来定义函数,只不过function关键字声明和定义函数是同时执行的,而var它只能声明变量,并不具备定义的功能。

如下是用var关键字声明的变量:

var n;//声明了一个变量n
var m = 10;//声明了一个变量m,并且将10赋值给它

如下是用function关键字定义的函数:

//定义了一个函数fn
function fn(){
    alert(‘hello‘);
}

带var关键字和带function关键字预解释的区别

其实它俩的区别就是带var关键字预解释时只预解释声明部分(因为它本身不具备定义的能力),而带function关键字在预解释时声明和定义同时被预解释。这时我们再回头分析下第一段代码,分析如下:

无节操(坑爹)的预解释

为何说它无节操,请看下面的代码(火狐除外):

alert(n);
fn();
if(false) {
    var n = 10;
    function fn(){
        alert(‘hello‘);
    }
}

第一行代码执行会弹出undefined,第二行代码执行会弹出hello;是因为n和fn在代码执行前被预解释了,即使if条件判断为false,执着的浏览器引擎也会将带var关键字声明的变量n和带function关键定义的fn扫描到。

*预解释忽略重新声明,不忽略重新定义

这个地方因为相对比较绕而且不太好理解,所以加了一个星号,请看如下代码:

alert(n);
var n = 10;
var n = 9;
var n;
alert(n);

这段代码执行结果是什么,我们来分析一下:

继续上代码,请分析如下执行结果:

fn();
function fn() {
    alert(‘1‘);
}
fn();
function fn() {
    alert(‘2‘);
}
fn();

代码分析图如下:

带function定义的函数预解释分析

时间: 2024-08-01 19:10:18

我理解的js中预解释的相关文章

深入理解Three.js中正交摄像机OrthographicCamera

前言 在深入理解Three.js中透视投影照相机PerspectiveCamera那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解Three.js中另一种常用的摄像机正交摄像机OrthographicCamera,这篇文章将会详细的讲解正交摄像机的工作原理和其对应参数的用法,当然,为了能够让读者更加直观的理解正交摄像机,我会制作一个与正交摄像机相关的demo来直观的让读者感受正交摄像机的魅力. 原理说明 深入理解Three.js中透视投影照相机Persp

从两个角度理解为什么 JS 中没有函数重载

函数重载是指在同一作用域内,可以有一组具有相同函数名,不同参数列表(参数个数.类型.顺序)的函数,这组函数被称为重载函数.重载函数通常用来声明一组功能相似的函数,这样做减少了函数名的数量,避免了名字空间的污染,对于程序的可读性有很大的好处. 但是在 JS 如果不通过一些方法是无法实现重载的,可以从以下两个角度去理解. 1. 方法签名 方法签名指的是函数的名称加形参列表,并且通过函数的名称或者形参列表都可以区分出是不同的函数. JS 中通过形参是没有办法区分出不同的函数的,只能通过函数的名称区分出

深入理解 Node.js 中 EventEmitter源码分析(3.0.0版本)

events模块对外提供了一个 EventEmitter 对象,即:events.EventEmitter. EventEmitter 是NodeJS的核心模块events中的类,用于对NodeJS中的事件进行统一管理,使用events可以对特定的API事件进行添加,触发和移除等.我们可以通过 require('events')来访问该模块. 比如如下代码: // 引入 events 模块 const events = require('events'); console.log(events)

理解 Node.js 中 Stream(流)

Stream(流) 是 Node.js 中处理流式数据的抽象接口. stream 模块用于构建实现了流接口的对象. Node.js 提供了多种流对象. 例如,对 HTTP 服务器的request请求和 process.stdout(标准输出), 都是流的实例. 流可以是可读的.可写的.或者可读可写的. 所有的流都是 EventEmitter 的实例. Stream 的4种类型 1. Readable - 可读的流(fs.createReadStream()) 2. Writable - 可写的流

理解d3.js中的Update、Enter、Exit

什么是 Update.Enter.Exit? svg.selectAll("rect") //选择svg内所有的矩形 .data(dataset) //绑定数组 .enter() //指定选择集的enter部分 .append("rect") //添加足够数量的矩形元素 这段代码使用的情况是当以下情况出现的时候: 假设,在 body 中有三个 p 元素,有一数组 [3, 6, 9],则可以将数组中的每一项分别与一个 p 元素绑定在一起.但是,有一个问题:当数组的长度

js中预加载图片

由于网页的一些图片加载都需要很长时间,所以为了缓解图片加载慢的问题,页面可以先预加载图片,代码如下: /*预加载图片*/var imgList = []; var imgArr = ["bg02.gif","video_btm.jpg"]; for(var i=0;i<imgArr.length;i++){ var img = new Image(); img.src = imgArr[i]; imgList.push(img); }

理解 Backbone.js中的bind和bindAll

http://blog.bigbinary.com/2011/08/18/understanding-bind-and-bindall-in-backbone.html http://wenzhixin.net.cn/2013/11/01/understanding_bind_bindall http://chaoskeh.com/blog/use-underscore-bindall-carefully.html

预解释的初级理解

1.当浏览器加载html页面的时候,提供一个全局js代码执行的环境,即全局作用域 2.预解释:在当前作用域中,js代码执行之前浏览器会首先把var定义,把function定义且赋值(遇到function开一个内存空间地址,里面存函数内容的字符串) 3.预解释只发生在当前作用域,,如开始在window下预解释 函数执行的时候才会对函数中预解释因为作用域变了 4.js中内存的分类:栈内存和堆内存,栈内存用来提供js执行的环境(全局作用域 私有作用域),堆内存是存储引用数据类型的值(对象的键值对,函数

[js]js栈内存的全局/私有作用域,代码预解释

js代码如何执行的 浏览器提供执行环境: 全局作用域(提供js执行环境, 栈内存) --> 执行js需要预解释 - 带var : 提前声明 - 带function关键字的: 提前声明+定义 js中的栈内存(对应全局/私有作用域)和堆内存 <script> // 基本: num str boollen null undefied // 引用: [] {} \^$\ Date var num = 12; var obj = {name: "maotai", age: 22