谈谈我对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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
jQuery对JSON数据进行排序输出的方法
Jun 24 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
Oct 05 Javascript
基于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
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
Javascript和Java获取各种form表单信息的简单实例
2014/02/14 Javascript
node.js中的fs.lchownSync方法使用说明
2014/12/16 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
Angular.JS读取数据库数据调用完整实例
2019/07/02 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
Python实现快速排序和插入排序算法及自定义排序的示例
2016/02/16 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python之消除前缀重命名的方法
2018/10/21 Python
基于树莓派的语音对话机器人
2019/06/17 Python
简单了解django索引的相关知识
2019/07/17 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
python集合能干吗
2020/07/19 Python
Django权限控制的使用
2021/01/07 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
司机岗位职责
2013/11/15 职场文书
少先队中队工作总结
2015/08/14 职场文书