谈谈我对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时Form表单元素ID和name命名大忌
Mar 06 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue使用axios时关于this的指向问题详解
Dec 22 Javascript
纯js封装的ajax功能函数与用法示例
May 14 Javascript
微信小程序使用字体图标的方法
May 23 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远程采集图片详细教程
2014/07/01 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript 模拟用户单击事件
2009/12/31 Javascript
JQuery实现鼠标移动到图片上显示边框效果
2014/01/09 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
vue中组件的过渡动画及实现代码
2018/11/21 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
OpenLayers3加载常用控件使用方法详解
2020/09/25 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
python dict.get()和dict['key']的区别详解
2016/06/30 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
详解python算法常用技巧与内置库
2020/10/17 Python
俄罗斯眼镜网: optikaworld
2016/07/31 全球购物
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
安全生产检查通报
2014/01/29 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
学生会辞职信
2015/03/02 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android