关于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 相关文章推荐
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
微信小程序 出现错误:{"baseresponse":{"errcode":-80002,"errmsg":""}}解决办法
Feb 23 Javascript
Javascript实现信息滚动效果
May 18 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
图解javascript作用域链
May 27 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
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底层运行机制与工作原理详解
2020/07/31 PHP
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
jquery each()源代码
2011/02/14 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
学习使用AngularJS文件上传控件
2016/02/16 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
利用Node.js如何实现文件循环覆写
2019/04/05 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Zabbix实现微信报警功能
2016/10/09 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python中print和return的作用及区别解析
2019/05/05 Python
python3.6使用tkinter实现弹跳小球游戏
2019/05/09 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
基于Python2、Python3中reload()的不同用法介绍
2019/08/12 Python
python解包用法详解
2021/02/17 Python
python定义具名元组实例操作
2021/02/28 Python
德购商城:德国进口直邮商城
2017/06/13 全球购物
专科毕业生就业推荐信
2013/11/01 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
诚信考试倡议书
2014/04/15 职场文书
小学生暑假家长评语
2014/04/17 职场文书
中学生操行评语大全
2014/04/24 职场文书
党员承诺书范文
2014/05/19 职场文书
优秀的应届生自荐信
2014/05/23 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
Python实现单例模式的5种方法
2021/06/15 Python
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS