谈谈我对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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
js 自定义的联动下拉框
Feb 07 Javascript
返回上一页并自动刷新的JavaScript代码
Feb 19 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 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实现通过ftp上传文件
2015/06/19 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript实现自己的DOM选择器原理及代码
2013/03/04 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JS处理json日期格式化问题
2015/10/01 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
常见的在Python中实现单例模式的三种方法
2015/04/08 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Python简单I/O操作示例
2019/03/18 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
车辆工程专业求职信
2014/04/28 职场文书
抵押贷款承诺书
2014/05/30 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技