谈谈我对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 MD4
Dec 20 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
jquery 淡入淡出效果的简单实现
Feb 07 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
Nov 02 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
深入理解 JS 垃圾回收
Jun 03 Javascript
JS错误处理与调试操作实例分析
Apr 13 Javascript
vue 限制input只能输入正数的操作
Aug 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常用函数汇总
2014/12/17 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
element-ui 表格实现单元格可编辑的示例
2018/02/26 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
用Python进行TCP网络编程的教程
2015/04/29 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
Python正则表达式知识汇总
2017/09/22 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
如何在python中判断变量的类型
2020/07/29 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python 内存管理机制全面分析
2021/01/16 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
年度献血先进个人事迹材料
2014/02/14 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
消防宣传口号
2014/06/16 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
聊一聊python常用的编程模块
2021/05/14 Python
Python列表的索引与切片
2022/04/07 Python