谈谈我对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 相关文章推荐
getElementById在任意一款浏览器中都可以用吗的疑问回复
May 13 Javascript
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
js添加table的行和列 具体实现方法
Jul 22 Javascript
jQuery 中国省市两级联动选择附图
May 14 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
SelecT下拉框选中和取值的解决方法
Nov 22 Javascript
微信小程序数据存储与取值详解
Jan 30 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
JS阻止事件冒泡的方法详解
Aug 26 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
php循环检测目录是否存在并创建(循环创建目录)
2011/01/06 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
2007/04/12 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
JavaScript不使用prototype和new实现继承机制
2014/12/29 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
2016/08/15 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Python控制Firefox方法总结
2019/06/03 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
大学生的四年学习自我评价
2013/12/13 职场文书
端午节粽子促销活动方案
2014/02/02 职场文书
全国爱眼日活动总结
2015/02/27 职场文书
2015年社区环境卫生工作总结
2015/04/21 职场文书
丧事主持词
2015/07/02 职场文书
详解Django中 render() 函数的使用方法
2021/04/22 Python