JavaScript闭包实例讲解_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方法并不是访问该参数的一个副本,它访问的就是该参数本身。这是可能的,因为该函数可以访问它被创建时所处的上下文环境,这被称为闭包。

时间: 2024-09-23 16:40:14

JavaScript闭包实例讲解_javascript技巧的相关文章

浅析javascript闭包 实例分析_javascript技巧

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

JavaScript动态创建div等元素实例讲解_javascript技巧

本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下 效果图: 为了节省时间,就直接贴代码了! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascr

javascript表单控件实例讲解_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

javascript跑马灯抽奖实例讲解_javascript技巧

本文实例讲解了javascript跑马灯抽奖特效,特别适合用于抽奖活动,分享给大家供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style> #box{ width:720px; margin:0 auto; margin-top:20p

Web安全测试之XSS实例讲解_javascript技巧

Web安全测试之XSS XSS 全称(Cross Site Scripting) 跨站脚本攻击, 是Web程序中最常见的漏洞.指攻击者在网页中嵌入客户端脚本(例如JavaScript), 当用户浏览此网页时,脚本就会在用户的浏览器上执行,从而达到攻击者的目的.  比如获取用户的Cookie,导航到恶意网站,携带木马等. 作为测试人员,需要了解XSS的原理,攻击场景,如何修复. 才能有效的防止XSS的发生. 阅读目录 XSS 是如何发生的 HTML Encode XSS 攻击场景 XSS漏洞的修复

javascript闭包的理解_javascript技巧

1.首先我们要知道变量作用域链 变量的作用域分两种:全局变量和局部变量.没有定义到任何函数中的变量为全局变量,在函数中定义的变量为局部变量,注意在函数内部定义变量时一定要使用var关键字,不带var关键字的变量为全局变量. javascript中每一段代码都有与之关联的作用域链,这个作用域链是一个对象列表或者链表,定义了这段代码"作用域"中的变量.顶层代码的作用域由全局变量组成:不包含嵌套的函数的作用域链有两个对象:一个是定义的函数参数和局部变量的对象,一个是全局变量对象:而嵌套函数的

简单的JS时钟实例讲解_javascript技巧

本文实例介绍了JS时钟实现代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title>Document</title> <script type="text/javascript"> function startTime

js表单验证实例讲解_javascript技巧

本文实例为大家分享了js表单验证,供大家参考,具体内容如下 JavaScript 可用来在数据被送往服务器前对HTML 表单中的这些输入数据进行验证. 被JavaScript 验证的这些典型的表单数据有: 1).用户是否已填写表单中的必填项目? 2).用户输入的邮件地址是否合法? 3).用户是否已输入合法的日期? 4).用户是否在数据域 (numeric field) 中输入了文本?  gspan.html <html> <head> <title>表单验证实例<

javascript 闭包详解_javascript技巧

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