JavaScript闭包实例讲解

这带来的好处是内部函数可以访问定义它们的外部函数的参数和变量。

首先，我们来构造一个简单的对象。


代码如下:

var testObj = {
    value: 10,
    add: function(inc){
        this.value += (typeof inc === "number") ? inc : 1;
    }
};

testObj.add();
testObj.value; // 11

testObj.add(2);   
testObj.value; // 13

这样写就有一个问题，value值不能保证不会被非法修改，可以按如下的方法进行修改。


代码如下:

var testObj = (function(){
    var value = 10;
    return {
        add: function(inc){
            value += (typeof inc === "number") ? inc : 1;
        },
        getValue: function(){
            return value;
        }
    };
})();

testObj.add();
testObj.getValue(); // 11

testObj.add(2);
testObj.getValue(); // 13

我们可以通用调用一个函数的形式去初始化testObj，该函数会返回一个对象字面量，函数里定义了一个value变量，该变量对add和getValue方法总是可用的，但函数的作用域使得它对其他的程序来说是不可见的。同时，我们还可以得出一个结论，内部函数拥有比它的外部函数更长的生命周期。

我们再继续看一个构造函数调用的例子。


代码如下:

var MyObj = function(str){
    this.status = str;
};

MyObj.prototype.getStatus = function(){
    return this.status;
};

var obj = new MyObj("javascript");
obj.getStatus(); // "javascript"

这样写并没有错，但是会有一点“多此一举”，为什么要用一个getStatus方法去访问一个本可以直接访问到的属性呢？如果status是私有属性，那当然才有意义。


代码如下:

var obj = function(status){
    return {
        getStatus: function(){
            return status;
        }
    };
};

var myObj = obj("javascript");
myObj.getStatus(); // "javascript"

这里当我们调用obj的时候，它返回包含getStatus方法的一个新对象，该对象的一个引用保存在myObj中，即使obj已经返回了，但getStatus方法仍然享有访问obj对象的status属性的特权。getStatus方法并不是访问该参数的一个副本，它访问的就是该参数本身。这是可能的，因为该函数可以访问它被创建时所处的上下文环境，这被称为闭包。

赞 (0)

相关推荐

  • js闭包的用途详解

    我们来看看闭包的用途.事实上,通过使用闭包,我们可以做很多事情.比如模拟面向对象的代码风格:更优雅,更简洁的表达出代码:在某些方面提升代码的执行效率. 1 匿名自执行函数 我们知道所有的变量,如果不加上var关键字,则默认的会添加到全局对象的属性上去,这样的临时变量加入全局对象有很多坏处, 比如:别的函数可能误用这些变量:造成全局对象过于庞大,影响访问速度(因为变量的取值是需要从原型链上遍历的). 除了每次使用变量都是用var关键字外,我们在实际情况下经常遇到这样一种情况,即有的函数只需要执行一

  • Javascript学习笔记之 函数篇（三） : 闭包和引用

    Javascript 中一个最重要的特性就是闭包的使用.因为闭包的使用,当前作用域总可以访问外部的作用域.因为 Javascript 没有块级作用域,只有函数作用域,所以闭包的使用与函数是紧密相关的. 模拟私有变量 复制代码 代码如下: function Counter(start) {     var count = start;     return {         increment: function() {             count++;         },      

  • JavaScript必知必会(九）function 说起 闭包问题

    JavaScript必知必会(九）function 说起 闭包问题

    function 函数格式 function getPrototyNames(o,/*optional*/ a) { a = a || []; for(var p in o) { a.push(p); } return a; } caller func.caller 返回函数调用者 function callfunc() { if(callfunc.caller) { alert(callfunc.caller.toString()); }else { alert("没有函数调用");

  • Javascript的闭包详解

    前言:还是一篇入门文章.Javascript中有几个非常重要的语言特性--对象.原型继承.闭包.其中闭包 对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性.本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包. 注:本文是入门文章,例子素材整理于网络,如果你是高手,欢迎针对文章提出技术性建议和意见.本文讨论的是Javascript,不想做语言对比,如果您对Javascript天生不适,请自行绕道. 什么是闭

  • JavaScript中的闭包(Closure)详细介绍

    JavaScript中的闭包(Closure)详细介绍

    闭包是JavaScript中一个重要的特性,其最大的作用在于保存函数运行过程中的信息.在JavaScript中,闭包的诸多特性源自函数调用过程中的作用域链上. 函数调用对象与变量的作用域链 对于JavaScript中的每一次函数调用,JavaScript都会创建一个局部对象以储存在该函数中定义的局部变量:如果在该函数内部还有一个嵌套定义的函数(nested function),那么JavaScript会在已经定义的局部对象之上再定义一个嵌套局部对象.对于一个函数,其内部有多少层的嵌套函数定义,也

  • js闭包实例汇总

    Js闭包 闭包前要了解的知识 1. 函数作用域 (1).Js语言特殊之处在于函数内部可以直接读取全局变量 复制代码 代码如下: <script type="text/javascript"> var n=100; function parent(){   alert(n); } parent();//100 </script> 如果在php里 复制代码 代码如下: <?php $n=100; function parent(){   echo $n; }

  • javascript闭包传参和事件的循环绑定示例探讨

    今天看到一个javascript的题目,按常理循环绑定事件,但是得到的结果却不是想要的. 复制代码 代码如下: <a href="#">text</a> <br> <a href="#">link</a> <script> var as = document.getElementsByTagName('a'); for ( var i = as.length; i--; ) { as[i].on

  • JavaScript闭包实例讲解

    这带来的好处是内部函数可以访问定义它们的外部函数的参数和变量. 首先,我们来构造一个简单的对象. 复制代码 代码如下: var testObj = {    value: 10,    add: function(inc){        this.value += (typeof inc === "number") ? inc : 1;    }}; testObj.add();testObj.value; // 11 testObj.add(2);    testObj.value

  • javascript兼容性(实例讲解)

    1.事件冒泡: //取消冒泡 if(e.stopPropagation){ e.stopPropagation();//w3c定义的APIbiaozhun }else{ e.cancelBubble=true;//兼容IE 6,7,8浏览器 } 2.获取某个元素的CSS属性值: //获取某个元素的CSS属性值 function getStyle(element,stylename){ if(element.currentStyle){ //IE return element.currentSty

  • JavaScript MutationObserver实例讲解

    目录 前言 一.MutationObserver 二.MutationObserver实例对象方法 1. observe(node,config) 2. disconnect() 3. takeRecords() 三.案列 前言 为什么突然写MutationObserver呢?最近在写页面水印的时候用到了MutationObserver方法,两者之间有什么联系呢?不用MutationObserver情况下,使用网站的人员可以随意修改DOM就可以把系统作者的版权标识(水印)去掉,然后使用无水印的网

  • 学习javascript面向对象 实例讲解面向对象选项卡

    学习javascript面向对象 实例讲解面向对象选项卡

    本文实例讲解了最简单的面向对象选项卡实现方法,分享给大家供大家参考,具体内容如下 效果图: 1.功能说明 点击三个按钮分别显示对应的选项卡 2.html代码说明 <div class="box" id="box"> <ul class="list"> <li class="in_active">第一张选项卡</li> <li class="in">

  • JavaScript闭包实例详解

    一.充电 1.一切(引用类型)都是对象,对象是属性的集合. 2.函数是一种对象,但是函数却不像数组一样--你可以说数组是对象的一种,因为数组就像是对象的一个子集一样.但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑. function Fn() {this.name = '王福朋';this.year = 1988;} var fn1 = new Fn(); var obj = { a: 10, b: 20 };等价于var obj

  • 浅析javascript闭包 实例分析

    官方解释 "闭包"是一个拥有许多变量和绑定了这些变量的环境表达式(通常是一个函数),因而这些变量也是环境表达式的一部分. 通俗解释 Javascript中所有的函数都是一个闭包.不过一般来说,嵌套的function产生的闭包更为强大,也是大部分时候我们所说的"闭包".看如下代码: 复制代码 代码如下: <script type="text/javascript"> <!-- //外层函数a function a(){ //临时变

  • Javascript操作表单实例讲解（下）

    Javascript操作表单实例讲解（下）

    在上篇文章给大家介绍了js操作表单实例讲解(下)的相关知识,本文接着给大家介绍Javascript操作表单实例讲解(下),具体详情如下所示: 一.文本域 <input type="text" /> ----------------------------- 操作文本域的值 value 属性 设置或者获取值 ----------------------------- 二.单选按钮和多选按钮 <input type="radio" /> <

  • JavaScript 中的执行上下文和执行栈实例讲解

    JavaScript 中的执行上下文和执行栈实例讲解

    JavaScript - 原理系列 ​ 在日常开发中,每当我们接手一个现有项目后,我们总喜欢先去看看别人写的代码.每当我们看到别人写出很酷的代码的时候,我们总会感慨!写出这么优美而又简洁的代码的兄弟到底是怎么养成的呢? ​ 我要怎样才能达到和大佬一样的水平呢!好了,废话不多说,让我们切入今天的主题. 一.执行上下文 ​ 简而言之,[执行上下文]就是JavaScript 代码被解析和执行时所在环境的抽象概念, 在JavaScript 中运行任何的代码都是在它的执行上下文中运行. ​ 在运行Java

  • 原生javascript实现文件异步上传的实例讲解

    原生javascript实现文件异步上传的实例讲解

    效果图: 代码:(demo33.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label>

  • javascript表单控件实例讲解

    本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下 实例一:遍历表单的所有控件 <script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<e

随机推荐