javascript 闭包详解

 这篇文章主要详细介绍了javascript 闭包的相关资料,十分详尽,需要的朋友可以参考下

 
 

javascript 闭包是一个很有趣的东东。看了些相关资料http://www.jb51.net/article/29472.htm,对其印象最深刻的是:实现了public 和private。

创建一个非匿名闭包最简单的语法是:

 

代码如下:

var obj = (function(){//各种代码 });

 

闭包最经典的例子:

 

代码如下:

var makeCounter = (function () {
var i = 1;
this.test=function(){
console.log(i);
i++;
}
return this;
});
var obj = makeCounter();
obj.test(); // 1
obj.test(); // 2
var obj1 = makeCounter();
obj1.test(); // 1
obj1.test(); // 2

 

private 与 public :

 

代码如下:

var makeCounter= (function () {
var i = 1;
//这货是private的
function log(){
console.log(i);
i++;
}
//这货是public的
this.test(){
log();
}
return this;
});
var obj = makeCounter();
obj.test(); // 1
obj.test(); // 2
obj.log(); //undefined

 

自执行函数:

  第一次看到这样的代码时的感觉是:好高级;

 

代码如下:

var obj = (function(window){
//各种代码
}(window));

 

  然后google了下,发现他们经常都会这样写:

 

代码如下:

var obj= (function () {
var i = 1;
this.test=function(){
console.log(i);
i++;
}
return this;
}());
obj.test(); // 1
obj.test(); // 2

 

最简单的理解,程序员偷懒把两步写成了一步。

 

代码如下:

//这是一个函数。它应该这样用obj()
var makeCounter = function () {
//各种代码
}
//这是一个对象。它类似于 var obj = makeCounter();
var obj = (function () {
//各种代码
}());

 

  它也可以有参数:

 

代码如下:

var output = "new test";
var obj = (function (msg) {
this.test = function(){
console.log(msg);
}
return this;
}(output));
obj.test();

 

  它还可以更复杂更高级点:

 

代码如下:

var output = "new test";
var obj = (function (obj, msg) {
//这货也是私有的。类似obj.i(!=obj.i),却又不是obj.i(因为外部不可访问)。
var i = 1;
//private
function log() {
console.log(i + " : " + msg);
i++;
}
//public
obj.test = function () {
log();
}
return obj;
}(obj, output));
obj.test(); // 1 : new test
obj.i = 100;
//i没被改变
obj.test(); // 2 : new test

 

初次见面,留下了很深刻的印象。闭包的使用,实现了状态,属性的保持;避免了全局变量满屏飞舞;结束了变量老是被重定义,重赋值的尴尬局面。它还可以将一个对象分部到多个js文件。实在是太好了。

上面所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2024-10-24 18:46:05

javascript 闭包详解的相关文章

javascript 闭包详解_javascript技巧

看了一下网上闭包的概念及文章,对于这个问题,自己做一个梳理吧. 问:闭包是什么? 答:闭包是指在 JavaScript 中,内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后. 这个是我自身第一次碰到闭包的问题 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>闭包循环问题</title> <

JavaScript闭包详解_基础知识

在上一篇文章我们对预解释作了概述,在写这篇博文前打算写几个经典案例,考虑到那些案例综合性比较强,也就循序渐进的有了这篇博文,这样对于学习和深入JavaScript也更加容易入手. 序 一同事去面试,面试官问了一道题:你写一个闭包我看下?于是同事火速写出如下代码: 复制代码 代码如下: function fn(){     alert('Hello JavaScript Closure!!!');//妈蛋,E文本来就不好,找翻译才把闭包单词写出来 } fn(); 然后面试官摇摇头说道:"这怎么能叫

JavaScript闭包详解

一.什么是闭包? "官方"的解释是:所谓"闭包",指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 相信很少有人能直接看懂这句话,因为他描述的太学术.我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的.看下面这段代码:  function a(){  var i=0;  function b(){  alert(++i);  }  retur

javascript中的作用域和闭包详解_javascript技巧

一.JavaScript作用域 JavaScript变量实际上只有两种作用域,全局变量和函数的内部变量.在函数内部任何一个地方定义的变量(var scope)其作用域都是整个函数体. 全局变量:指的是window对象下的对象属性. 作用域划分:基于上下文,以函数进行划分的,而不是由块划分的. 强调两点: 1. 在同一作用域中,JavaScript是允许变量的重复定义,并且后一个定义将覆盖前一个定义. 2. 函数内部如果不加关键字var而定义的变量,默认为全局变量. var scope="glob

Python闭包详解

闭包(closure)是函数式编程的重要的语法结构.函数式编程是一种编程范式 (而面向过程编程和面向对象编程也都是编程范式).在面向过程编程中,我们见到过函数(function):在面向对象编程中,我们见过对象(object).函数和对象的根本目的是以某种逻辑方式组织代码,并提高代码的可重复使用性(reusability).闭包也是一种组织代码的结构,它同样提高了代码的可重复使用性. 不同的语言实现闭包的方式不同.Python以函数对象为基础,为闭包这一语法结构提供支持的 (我们在特殊方法与多范

JS高级调试技巧:捕获和分析 JavaScript Error详解_javascript技巧

反正只要 JavaScript 出错后刷新不复现,那用户就可以通过刷新解决问题,浏览器不会崩溃,当没有发生过好了.这种假设在 Single Page App 流行之前还是成立的.现在的 Single Page App 运行一段时间后状态复杂无比,用户可能进行了若干输入操作才来到这里的,说刷新就刷新啊?之前的操作岂不要完全重做?所以我们还是有必要捕获和分析这些异常信息的,然后我们就可以修改代码避免影响用户体验. 捕获异常的方式 我们自己写的 throw new Error() 想要捕获当然可以捕获

JavaScript 继承详解 第一篇_javascript技巧

面向对象与基于对象 几乎每个开发人员都有面向对象语言(比如C++.C#.Java)的开发经验. 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例. 类定义了一类事物公共的行为和方法:而实例则是类的一个具体实现. 我们还知道,面向对象编程有三个重要的概念 - 封装.继承和多态. 但是在JavaScript的世界中,所有的这一切特性似乎都不存在. 因为JavaScript本身不是面向对象的语言,而是基于对象的语言. 这里面就有一些有趣的特性,比如JavaScript中所有事物都是对象, 包

JavaScript 继承详解(五)_javascript技巧

在本章中,我们将分析John Resig关于JavaScript继承的一个实现 - Simple JavaScript Inheritance.  John Resig作为jQuery的创始人而声名在外.是<Pro JavaScript Techniques>的作者,而且Resig将会在今年秋天推出一本书<JavaScript Secrets>,非常期待. 调用方式 调用方式非常优雅: 注意:代码中的Class.extend._super都是自定义的对象,我们会在后面的代码分析中详

JavaScript 继承详解(六)_javascript技巧

在本章中,我们将分析Prototypejs中关于JavaScript继承的实现. Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖. 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的群众基础. 不过当年Prototypejs中的关于继承的实现相当的简单,源代码就寥寥几行,我们来看下. 早期Prototypejs中继承的实现 源码: var Class = { // Class.create仅仅返回另外一个函