关于JS 预解释的相关理解


Posted in Javascript onJune 28, 2016

1、JS中的内存空间分为两种:栈内存、堆内存

栈内存:提供JS代码执行的环境;存储基本数据类型的值; ->全局作用域或者私有的作用域其实都是栈内存

堆内存:存储引用数据类型的值(对象是把属性名和属性值存储进去,函数是把函数体中的代码当做字符串存储进去)

2、当浏览器加载我们HTML页面的时候,首先会提供一个供JS代码执行的环境->全局作用域(global->window)

3、在JS代码执行之前,浏览器还需要自己做一些事情:把所有带var/function关键字的进行提前的声明或者定义 ->"预解释"(变量提声)

声明(declare) -> 告诉浏览器我有这样一个东西啦,例如 var num1; function fn;

定义(defined) -> 给我们声明的变量或者函数赋值,例如 num1=12; fn=function(){}

 [重要]变量只声明没有定义,默认的值是undefined(未定义)

4、var和function在预解释阶段处理是不一样的

var -> 在预解释的时候只是提前的声明了这个变量,只有当代码执行的时候才会完成赋值操作

function -> 在预解释的时候会提前的把声明加定义都完成了(在代码执行的时候遇到定义的代码直接的跳过)

[重要]刚开始只对window下的进行预解释,fn函数中目前存储的都是字符串,所以var total没啥实际的意义,所以不进行预解释 -> "预解释是发生在当前作用域下的"

console.log(obj);//->undefined
 var obj = {name: "张珊珊", age: 10};
 function fn(num1, num2) {//代码执行到这一行的时候直接的跳过,因为在预解释的时候我们已经完成了声明加定义
var total = num1 + num2;
 console.log(total);
 }
 var num1 = 12;

 fn(num1, 100);//执行fn,把全局变量num1的值赋值给形参num1,把100赋值给形参num2

5、在全局作用域下声明的变量是全局变量

在私有作用域中声明的变量是私有变量;函数的形参也是私有的变量;

如何分辨函数中出现的变量是私有的还是全局的?

首先看是否为形参,然后看是否在私有作用域中声明过(有没有var过),两者有其一就是私有的变量,那么在当前函数中不管什么位置出现都是私有的,和全局的没有半毛钱的关系;如果两者都没有,说明不是私有的,则往其上一级作用域进行查找...

6、函数执行的时候会形成一个新的私有的作用域(栈内存),供函数体中的代码执行;

1)给形参赋值
2)私有作用域下的预解释
3)私有作用域下的代码执行

形成的新的私有的作用域还保护了里面的私有变量不受外界的影响,我们把函数的这种保护机制->"闭包

区别:带var的可以在代码执行前进行声明,而不带var的不能提前的声明

1、不管条件是否成立都要进行预解释

window预解释:var a; -> window.a;
 if (!("a" in window)) {//"a" in window -> true
 var a = "我们";
 }
console.log(a);//->undefined

2、预解释只发生在"="的左边,只把左边的进行预解释,右边的是值是不进行预解释的

匿名函数之函数表达式:把函数定义的部分当做值赋值给一个变量或者元素的事件

预解释的时候:var fn; ->fn的默认值是undefined

fn();//->undefined() Uncaught TypeError: fn is not a function JS中只有函数可以执行 && JS上面的代码如果报错了,在不进行任何的特殊处理情况下我们下面的代码都不在执行了
var fn = function () {
 console.log("ok");
 };
 fn();

预解释的时候:fn=xxxfff000
 fn();//->"ok"
 function fn() {
 console.log("ok");
 }
 fn();//->"ok"

 3、函数体中return下面的代码都不在执行了,但是下面的代码需要参加预解释;而return后面的东西是需要处理的,但是由于它是当做一个值返回的,所以不进行预解释;

var total = 300;
 function fn() {
 console.log(total);
 return function sum() {};//return是把函数中的值返回到函数的外面,这里是把function对应的内存地址返回的到函数的外面,例如:return xxxfff111;函数体中return下面的代码都不在执行了
var total = 10;
 }
 fn();

4、匿名函数的function在全局作用域下是不进行预解释的

匿名函数之自执行函数:定义和执行一起完成了

(function(num){})(100);

5、在预解释的时候,如果遇到名字重复了,只声明一次,不重复的声明,但是赋值还是要重复的进行的

在JS中变量的名字和函数的名字如果一样是算作重复的

预解释:

var fn; 声明
fn = xxxfff000; [声明]不要了+定义
fn = xxxfff111; [声明]不要了+定义
->fn=xxxfff111
 var fn = 12;//window.fn=12
 function fn() {//window.fn=function(){}
 }
 function fn() {
 }

以上就是小编为大家带来的关于JS 预解释的相关理解全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
Dec 19 Javascript
js简单抽奖代码
Jan 16 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
Jquery中基本选择器用法实例详解
May 18 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
详解Nuxt.js中使用Element-UI填坑
Sep 06 Javascript
antd form表单数据回显操作
Nov 02 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 #Javascript
浅谈js中的in-for循环
Jun 28 #Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 #Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 #Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
Jun 27 #Javascript
JavaScript事件详细讲解
Jun 27 #Javascript
JS原型链怎么理解
Jun 27 #Javascript
You might like
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
jQuery前端分页示例分享
2015/02/10 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
小程序采集录音并上传到后台
2019/11/22 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
python检测服务器是否正常
2014/02/16 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
Python tkinter 下拉日历控件代码
2020/03/04 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python生成word合同的实例方法
2021/01/12 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
Under Armour安德玛德国官网:美国高端运动科技品牌
2019/03/09 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
小学防溺水制度
2014/01/29 职场文书
项目建议书范文
2014/05/12 职场文书
南京市纪委监察局整改方案
2014/09/16 职场文书