1、函数的执行顺序
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
fn1();
//不会报错,对于通过function fn()这种写法来定义的函数，永远都会被最先初始化
function fn1() {
alert("fn1");
}
fn2();
//使用如下方式定义函数，不会被先执行，如果在之前调用该函数就会报错
/**
* 以下函数的定义方式是现在内存中创建了一块区域，之后通过一个fn2的变量
* 指向这块区域，这块区域的函数开始是没有名称的 ，这种函数就叫做匿名函数(也就是闭包)
*/
var fn2 = function() {
alert("fn2");
}
</script>
</head>
<body>
</body>
</html>
2、作用域链
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 在js中当进行函数的调用，会为每一个函数增加一个属性SCOPE，通过这个属性来指向一块内存
* 这块内存中包含有所有的上下文使用的变量，当在某个函数中调用了新函数之后，新函数依然
* 会有一个作用域来执行原有的函数的SCOPE和自己新增加的SCOPE，这样就形成一个链式结构
* 这就是js中的作用域链
*/
var color = "red";
var showColor = function() {
alert(this.color);
}
function changeColor() {
var anotherColor = "blue";
function swapColor() {
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
}
swapColor();
}
changeColor();
showColor();
</script>
</head>
<body>
</body>
</html>
以下是内存模型分析图
3、比较方法的例子
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/**
* 通过以下操作带来最大的好处是，compareObjectFunction的作用域变大了
* 当compareObjectFunction结束之后，prop这个变量依然存在
*/
function compareObjectFunction(prop) {
//匿名函数
return function(obj1,obj2) {
if(obj1[prop]>obj2[prop]) return 1;
else if(obj1[prop]<obj2[prop]) return -1;
else return 0;
}
}
var o1 = {name:"Leon",age:23};
var o2 = {name:"Ada",age:28};
//此时就是基于name来进行比较
/*
* 在java或者c++中，以下代码执行完成之后，需要进行内存的释放
* 此时对于java和c++这些静态语言而言，prop会被释放
* 但是在js中，这个作用域却被放大了
*/
var compare = compareObjectFunction("age");
//此时就比较了o1和o2
/*
* 在js中，prop在这里依然可以被访问，这种通过返回函数来扩大函数的作用域的方法
* 就是闭包
*/
var rel = compare(o1,o2);
alert(rel);
</script>
</head>
<body>
</body>
</html>
4、闭包中的var变量
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function fn1() {
//创建了一个数组
var fns = new Array();
//i这个变量是保存在fn1这个作用域中的
for(var i=0;i<10;i++) {
//数组中方的值是一组函数
fns[i] = function() {return i;}
}
return fns;
}
var fs = fn1();
for(var i=0;i<fs.length;i++) {
//此时通过闭包来调用所有函数，当输出i的时候,首先在自己的作用域查找(没有找到),没有则会去上一级的作用域中查找
//这个时候i的值已经10，所以连续输出了10个10
document.write(fs[i]()+"<br/>");
}
</script>
</head>
<body>
</body>
</html>
5、解决4中闭包var问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function fn1() {
//创建了一个数组
var fns = new Array();
//i这个变量是保存在fn1这个作用域中的
for(var i=0;i<10;i++) {
//num这个变量是保存在fns这个tf这个作用域，每一个闭包的num都是不一样
//所以此时所消耗的内存特别的大
var tf = function(num) {
fns[num] = function() {
return num;
}
}
tf(i);
}
return fns;
}
var fs = fn1();
for(var i=0;i<fs.length;i++) {
//每一个fs都是在不同作用域链中，num也是保存在不同的作用域中，所以输出0-9
document.write(fs[i]()+"<br/>");
}
</script>
</head>
<body>
</body>
</html>
6、闭包中的this
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
var name = "window";
var person = {
name:"zhangsan",
age:23,
say:function() {
alert(this.name); //zhangsan
return function() {
return this.name; //window
}
}
}
/*
* 当完成person.say()之后，这个函数就调用结束了，在这个函数调用结束之前
* this是指向person,但是在调用匿名函数的时候，this就指向window，所以
* 得到的结果是window
*
*/
alert(person.say()());
</script>
</head>
<body>
</body>
</html>
7、解决6中闭包this问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
var name = "window";
var person = {
name:"zhangsan",
age:23,
say:function() {
//that就指向person
var that = this;
return function() {
return that.name;
}
}
}
/*
* 此时that是指向person的，所以调用that.name就是person中name
*
*/
alert(person.say()());
</script>
</head>
<body>
</body>
</html>
8、js的块作用域
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
for(var i=0;i<10;i++) {
}
//在js中没有块作用域，不管是使用循环还是判断之后，这个变量会一直存在
/*
* 所以当在全局使用某个变量进行循环或者判断之后，这个变量可能会影响
* 到函数中的变量，所以在特殊情况不要使用全局变量，而且使用全局变量
* 在作用域链的最上层，访问是最慢的
*/
var i;//此时会认为是无效语句，除非使用var i = 0;
alert(i); //10
</script>
</head>
<body>
</body>
</html>
9、使用闭包解决块作用域问题
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
/*
* 在一个团队进行开发时，可能会涉及到定义同名的全局变量，所以在开发中
* 一定养成如下习惯，将全局变量的代码放到一个匿名函数，并且马上调用
* 匿名函数，这样也可以执行全局变量的代码，但是这些变量就被控制在开发
* 人员想要控制的作用域中了
*/
//在function的{}后不能直接调用，一定要加上括号
// function(){
// for(var i=0;i<10;i++) {
//
// }
// }();
(function(){
for(var i=0;i<10;i++) {
}
})();
function fn() {
alert(i);
}
fn();
</script>
</head>
<body>
</body>
</html>
10、js中的私有变量
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
function Person(name) {
/**
* 此时就没有办法直接访问name这个属性，因为没有this.name
* 要访问name只能通过this.getName,this.setName
* 但是使用这种方式创建私有变量带来的问题是，每个对象都存储大量的函数
* 解决的办法是通过静态私有变量来解决
*/
this.setName = function(value) {
name = value;
}
this.getName = function() {
return name;
}
}
var p = new Person("aa");
alert(p.getName());
p.setName("bb");
alert(p.getName());
</script>
</head>
<body>
</body>
</html>
11、通过闭包实现静态私有变量
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js01_hello</title>
<meta name="author" content="Administrator" />
<script type="text/javascript">
var Person;
(function(){
//name正在函数结束之后就消失，在外面是无法引用的
var name = "";
Person = function(value){
name = value;
}
Person.prototype.setName = function(value) {
name = value;
}
Person.prototype.getName = function() {
return name;
}
})();
var p1 = new Person("aa");
alert(p1.getName());
p1.setName("bb");
alert(p1.getName());
</script>
</head>
<body>
</body>
</html>
js基本上讲完了，可能有些地方写的不是很清楚，因为也是看视频而写的博客记录，不是原创
相关推荐
javascript闭包详解 javascript闭包详解 javascript闭包详解
在深入讨论JavaScript闭包之前，首先需要了解JavaScript的变量作用域。在JavaScript中，变量的作用域分为两种：全局变量和局部变量。全局变量是在函数外部定义的变量，可以在JavaScript程序的任何地方被访问。局部...
资源名称：javaｓｃｒｉｐｔ闭包详解 中文word版 内容简介： Javaｓｃｒｉｐｔ中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C 的程序员来说是一个新的...
### JavaScript闭包与垃圾回收机制详解 #### 一、闭包 ##### 1.1 闭包是什么？ 闭包（Closure）是JavaScript中一个非常重要的概念，它涉及到函数及其相关的词法作用域。简单来说，闭包就是能够访问其自身作用域...
### JavaScript闭包详解 #### 一、闭包概念与特性 **闭包**是JavaScript语言的一个重要特性，它使得函数可以访问并操作其外部作用域内的变量，即使该函数在其外部作用域之外被调用。要理解闭包，首先需要了解...
JavaScript中的闭包是一种重要的编程概念，它涉及到函数、作用域和变量持久化。闭包本质上是函数能够记住并访问其词法作用域内的变量，即使该函数已经执行完毕且其外部作用域不再存在。这种特性使得闭包成为...
JavaScript中的闭包是一种高级特性，它允许一个函数访问并操作其外部作用域的变量，即使在外部函数已经执行完毕后。这种机制的核心在于，当内部函数引用了外部函数的变量时，JavaScript会保持对外部作用域的引用，...
详解JavaScript闭包问题 闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分，JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作，闭包在主流JavaScript库...
JavaScript中的闭包是一种强大的语言特性，它允许函数访问和操作其词法作用域内的变量，即使在其外部作用域中调用该函数。闭包是函数及其相关的引用环境组合在一起形成的实体，它使得局部变量在函数执行完毕后依然...
### JavaScript闭包详解 #### 一、闭包概念与特性 **闭包**是JavaScript中最强大的特性之一，它指的是一个函数及其相关的引用环境的组合。简单来说，闭包就是一个能够记住并访问其自身作用域以外变量的函数。这种...
JavaScript，简称JS，是一种广泛应用于Web开发的轻量级、解释型编程语言，以其灵活性和交互性在网页设计中占据核心地位。本教程将深入探讨JavaScript的各个方面，旨在为初学者提供一个全面的学习路径，同时也适合有...
JavaScript是Web开发中的核心语言，其重要特性包括同步与异步处理、作用域与闭包、以及原型和原型链。这些概念是理解JS高级特性的基石。 **同步与异步的区别** 在JavaScript中，同步执行意味着代码按照顺序依次运行...
根据提供的文件信息，我们可以从标题、描述、标签以及部分内容中提取和总结JavaScript闭包相关的知识点。以下是对这些信息的详细解读： ### 闭包的定义与理解 JavaScript闭包是函数和声明该函数的词法环境的组合。...
本文结合 ECMA 262 规范详解了闭包的内部工作机制，让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中，真正领会到闭包的实质。
### JS匿名函数、闭包详解 #### 一、匿名函数概览 **匿名函数**，又称**拉姆达函数**，是一种在JavaScript中常见的函数形式，这类函数没有名称，因此不能像命名函数那样通过名称来调用。匿名函数通常作为临时使用...
### JavaScript闭包技术详解 #### 一、闭包的基本概念 **闭包**是JavaScript中一个重要的概念，它涉及到函数的执行环境、作用域链等关键要素。简单来说，闭包是一个函数及其相关的引用环境的组合。具体而言，当一...
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。 闭包有三个特性： 1.函数嵌套函数; 2.函数内部可以引用外部的参数和变量; 3.参数和变量不会被垃圾回收机制回收。 ...
- 引入了闭包（Closures），提供了内联函数和匿名函数的功能，增强了函数式编程能力。 - 错误报告提升，增加了错误处理的灵活性。 - 优化了性能，提高了运行效率。 **2. php-js-ext扩展** `php-js-ext` 是一个专门...
本文实例讲述了js闭包用法。分享给大家供大家参考，具体如下： 引言 在公司中需要写一个js脚本来进行网站的统计，实现类似百度统计或者站长统计的功能，在实现的过程中自己感觉写的代码还是可以的，因为之前的js代码...