谈谈我对JavaScript原型和闭包系列理解(随手笔记6)


Posted in Javascript onDecember 20, 2015

相关阅读:谈谈我对JavaScript原型和闭包系列理解(随手笔记8)   谈谈我对JavaScript原型和闭包系列理解(随手笔记9)

什么是闭包

闭包是什么?闭包是Closure,这是静态语言所不具有的一个新特性。但是闭包也不是什么复杂到不可理解的东西,简而言之,闭包就是:

• 闭包就是函数的局部变量集合,只是这些局部变量在函数返回后会继续存在。

• 闭包就是就是函数的“堆栈”在函数返回后并不释放,我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配

• 当在一个函数内定义另外一个函数就会产生闭包

什么是原型?

原型是一个对象,其他对象可以通过它实现属性继承。

任何一个对象都可以成为原型么?

哪些对象有原型

所有的对象在默认的情况下都有一个原型,因为原型本身也是对象,所以每个原型自身又有一个原型(只有一种例外,默认的对象原型在原型链的顶端).

执行上下文

每次当控制器转到ECMAScript可执行代码的时候,即会进入到一个执行上下文。

执行上下文(简称-EC)是一个抽象概念,ECMA-262标准用这个概念同可执行代码(executable code)概念进行区分。

标准规范没有从技术实现的角度准确定义EC的类型和结构;这应该是具体实现ECMAScript引擎时要考虑的问题。

活动的执行上下文在逻辑上组成一个堆栈。堆栈底部永远都是全局上下文(global context),堆栈顶部是当前(活动的)执行上下文。堆栈在EC类型的变量(various kingds of EC)被推入或弹出的同时被修改。

--------------------------------------------------------------------------------

情况一: 在一段js代码拿过来真正一句一句运行之前,浏览器已经做了一些“准备工作”,其中就包括对变量的声明,而不是赋值。变量赋值时在赋值语句执行的时候进行的。

情况二: 在“准备工作”阶段,this是直接赋值的。

 console.log(this) //Window

情况三: 函数: 函数表达式和函数声明

console.log(f1); //function f1() {}
function f1() {} //函数声明
console.log(f2); //undefined
var f2 = function() {}; //函数表达式

“准备工作”总结:

•变量、函数表达式————变量声明,默认赋值为undefined

 •this————赋值

 •函数声明————赋值

这三种数据的准备情况我们称之为“执行上下文”或者“执行上下文环境”。

--------------------------------------------------------------------------------

javascript在执行一个代码段之前,都会进行这些“准备工作”来生成执行上下文。这个“代码段”分为三种情况--全局代码、函数代码、Eval代码。

//全局代码段
<script type="text/javascript">
 //代码段...
</script>
//函数代码段
function fn(x) {
 console.log(x + 5);
}
var fn = new Function("x", "console.log(x + 5)");
//Eval代码段
eval('var x = 10');
(function foo() {
 eval('var y = 20');
})();
alert(x); //10
alert(y); //"y" is not defined
//因为eval涉及到安全问题(脚本注入),所以尽量不用。

--------------------------------------------------------------------------------

在函数中,除了“准备工作”的几种情况,还会有其他数据

function fn(x) {
 console.log(arguments); //[10]
 conosole.log(x); //10
}
fn(10);

以上代码展示了在函数体的语句执行之前,arguments变量和函数参数都已经被赋值。

函数每被调用一次,都会产生一个新的上下文执行环境。因为不同调用那个就可能产生不同的参数。

函数在定义的时候(不是调用)就已经确定了函数体内部自由变量的作用域。

var a = 10;
function fn() {
 console.log(a); //a是自由变量
}     //函数创建时,就确定了a要取值的作用域
function bar(f) {
 var a = 20;
 f(); //打印"10",而不是"20"
}
bar(fn);

总结:

全局代码的上下文环境数据内容为:

 •普通变量(包括函数表达式),如:var a = 10 | ===> 声明(默认赋值undefined)

 •函数声明,如function fn() {} | ===> 赋值

 •this | ===> 赋值

函数体

 •参数 | ===> 赋值

 •arguments | ===> 赋值

 •自由变量的取值作用域 | ====> 赋值 

通俗的定义:

在执行代码之前,把将要用到的所有变量都事先拿出来,有的直接赋值了,有的先用undefined占个位。

以上内容是小编给大家分享的JavaScript原型和闭包系列理解(随手笔记6)的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
JQuery拖拽元素改变大小尺寸实现代码
Dec 10 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
JS触摸与手势事件详解
May 09 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 #Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 #Javascript
js获取本机操作系统类型的两种方法
Dec 19 #Javascript
javascript精确统计网站访问量实例代码
Dec 19 #Javascript
js实现图片轮播效果
Dec 19 #Javascript
js实现图片上传并正常显示
Dec 19 #Javascript
thinkphp实现无限分类(使用递归)
Dec 19 #Javascript
You might like
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
Thinkphp3.2.3分页使用实例解析
2016/07/28 PHP
PHP实现的支付宝支付功能示例
2019/03/26 PHP
基于jQuery的消息提示插件 DivAlert之旅(二)
2010/04/01 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
2010/08/27 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
基于jQuery实现交互体验社会化分享代码附源码下载
2016/01/04 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
angular2模块和共享模块详解
2018/04/08 Javascript
js验证账户名是否重复
2020/05/26 Javascript
详解Python3中yield生成器的用法
2015/08/20 Python
Python 错误和异常代码详解
2018/01/29 Python
Python星号*与**用法分析
2018/02/02 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
班级道德讲堂实施方案
2014/02/24 职场文书
合伙经营协议书
2014/04/18 职场文书
党员志愿者活动方案
2014/08/28 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python