您的位置：首页 > 编程技术 > js  >  谈谈我对JavaScript原型和闭包系列理解(随手笔记6)

谈谈我对JavaScript原型和闭包系列理解(随手笔记6)

 更新时间：2015年12月21日 10:01  点击：1300

什么是闭包

闭包是什么？闭包是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)的全部叙述，希望大家喜欢。

[!--infotagslink--]

相关文章

  • 使用PHP+JavaScript将HTML页面转换为图片的实例分享

    这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19

  • 关于JavaScript中name的意义冲突示例介绍

    在昨天的《Javascript权威指南》学习笔记之十：ECMAScript 5 增强的对象模型一文中，对于一段代码的调试出现了一个奇怪现象，现将源代码贴在下面： 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31

  • C#和JavaScript实现交互的方法

    最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现，故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25

  • javascript自定义的addClass()方法

    复制代码 代码如下: //element:需要添加新样式的元素，value：新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31

  • JavaScript中的this关键字使用方法总结

    在javascritp中，不一定只有对象方法的上下文中才有this， 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象，这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15

  • javascript的事件触发器介绍的实现

    事件触发器从字面意思上可以很好的理解，就是用来触发事件的，但是有些没有用过的朋友可能就会迷惑了，事件不是通常都由用户在页面上的实际操作来触发的吗？这个观点不完全正确，因为有些事件必须由程序来实现，如自定义事件，jQue...2014-06-07

  • 详解javascript数组去重问题

    首先，我想到的是另建一个结果数组，用来存储原始数组中不重复的数据。遍历原始数组依次跟结果数组中的元素进行比较，检测是否重复。于是乎，我写出了如下代码A： Array.prototype.clearRepetitionA = function(){ var resul...2015-11-08

  • JavaScript中逗号运算符介绍及使用示例

    有一道js面试题，题目是这样的：下列代码的执行结果是什么，为什么？ 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10，这道题主要考察JavaScript的逗...2015-03-15

  • JavaScript预解析,对象详解

    这篇文章主要介绍了JavaScript预解析,对象的的相关资料，小编觉得这篇文章写的还不错，需要的朋友可以参考下，希望能够给你带来帮助...2021-11-10

  • JavaScript学习笔记整理_setTimeout的应用

    下面小编就为大家带来一篇JavaScript学习笔记整理_setTimeout的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-03

  • Javascript类型转换的规则实例解析

    这篇文章主要介绍了Javascript类型转换的规则实例解析，涉及到javascript类型转换相关知识，对本文感兴趣的朋友一起学习吧...2016-02-27

  • 详解JavaScript操作HTML DOM的基本方式

    通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被构造为对象的树： 通过可编程的对象模型，Java...2015-10-23

  • ActiveX控件与Javascript之间的交互示例

    1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名，通过<object>标签里的id属性设定,如下； 复制...2014-06-07

  • JavaScript获取浏览器信息的方法

    Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24

  • 学习JavaScript设计模式之装饰者模式

    这篇文章主要为大家介绍了JavaScript设计模式中的装饰者模式，对JavaScript设计模式感兴趣的小伙伴们可以参考一下...2016-01-21

  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍

    下面小编就为大家带来一篇JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-05-20

  • javascript设计模式之解释器模式详解

    神马是“解释器模式”？先翻开《GOF》看看Definition：给定一个语言，定义它的文法的一种表示，并定义一个解释器，这个解释器使用该表示来解释语言中的句子。在开篇之前还是要科普几个概念： 抽象语法树： 解释器模式并未解释如...2014-06-07

  • 跟我学习javascript的最新标准ES6

    虽然ES6都还没真正发布，但已经有用ES6重写的程序了，各种关于ES789的提议已经开始了，这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快，但我们不停下学习的步伐，就不会被潮流丢下的，下面来领略下ES6中新特性，一堵新生代JS...2015-11-24

  • JavaScript操作URL的相关内容集锦

    ---恢复内容开始---1.location.href.....（1）self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 （2）this.locati...2015-10-30

  • 基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式

    前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如 Java，C++等传统的面向对象的语言中， 私有成员是实现封装的一个重要途径。但在 JavaScript 中，确没有在语法特性上对私有成员提供支持， 这也使得开发人员使...2015-10-30