javascript闭包和立即执行函数的作用

一、闭包——closure

  先看一个闭包的例子。我们想实现一个计数器,最简单的方法就是定义一个全局变量,计数的时候将其加1。但是全局变量有风险,哪里都有可能不小心改掉它。那局部变量呢,

它只在函数内部有效,函数调用完后它就没了,而且全局没法使用。那我们用想让计数器全局使用,又不想让这个变量被随便修改怎么办。这就需要闭包了:

function count(){
    var i=0;
    return function () {
        return ++i;
    }
}

  这个例子实现了一个简单的计数器。函数"count()"定义了一个局部变量“i”,并返回一个内部匿名函数。因为是内部函数,所以它可以访问其外部函数的局部变量“i”,并且将其加1并返回。让我们看下怎么使用这个计数器。

c1 = count();
console.log(c1());  //print1
console.log(c1());  //print2
console.log(c1());  //print3

c2 = count();
console.log(c2());  //print1

 每次调用“count()”函数后就会生成一个计数器,而且不同的计数器之间不干扰。因为两次调用同一个函数,创建的栈是不同的,因此栈内的局部变量是不同的。上例中,我们生成了全局计数器“c1”和“c2”,他们都是不带参数的函数,即“count()”中返回的匿名函数。此后每次调用计数器,比如“c1()”,计数器就会自增1并返回。但是由于“count()”函数已经调用完毕,我们将无法通过任何其他办法去修改“count()”中变量“i”的值。这就是闭包最实用的功能,就是将你想操作的变量或对象隐藏起来,只允许特定的方法才能访问它

二、立即执行函数

  n年前看到jQuery的源码时,很好奇它的最外层结构是这样的(现在已经不一样了):var jQuery = (function(){……})();

  作为前端小白的我,实在想不通这是为什么,好好定义一个函数,为啥还要调用它。大家知道javascript在es6之前并不严格支持面向对象。js的对象其实就是一个map,比如下面的例子:

var car = {
    speed:0,
    start:function(){ this.speed=40; },
    getspeed:function(){ return this.speed; }
};
car.start();
console.log(car.getspeed()); //print 40

  这个对象有其成员变量“speed”及成员函数“start”和“getspeed”,但是它的成员变量没有私有化,同时它也没有办法被继承。要实现对象的继承,你可以使用构造函数和原型继承。但怎么才能将成员变量私有化来实现对象的封装呢(而且有时候我们也不想那么麻烦使用原型)?有心的读者看了上面闭包的介绍,肯定马上有想法了。对,使用闭包!

function car() {
    var speed = 0;
    return { //返回的是一个对象
        start:function() {
            speed = 50;
        },
	getspeed:function () {
	     return speed;
        }
    }
}

var car1 = car();
car1.start();
console.log(car1.getspeed()); //print 50

  说了那么多,跟立即执行函数有什么关系呢。你再仔细看看上面的例子,你有了闭包函数来帮你创建“car”对象,这个函数就类似于工厂方法,它可以根据你的需要创建多个不同的对象。不过开发的时候经常遇到这样的情况,就是我们希望对象只有一份,比如jQuery库的对象,它必须确保整个程序只有一份,多了也没有。在后端开发模式中,这叫单例模式,可以通过私有化构造函数来实现,那么在js里呢?

  既然函数没法私有化,那么唯一的办法就是让这个工厂方法能且只能被调用一次。不能多次调用,那这个函数一定要是匿名函数;而且能被调用一次,那就必须在声明的时候立马执行。这时候,我们就可以邀请立即执行函数出场了:

 var car = (function () {
    var speed = 0;
    return {
        start:function () {
            speed=60;
        },
        getspeed:function () {
	     return speed;
        }
    }
})();

car.start();
console.log(car.getspeed()); //print 60

  很多人一开始会看错,认为对象“car”是一个函数,其实它是这个匿名的工厂方法执行完返回的对象,该对象拥有“start”和“getspeed”两个成员函数,而这两个函数所需要访问的“speed”变量对外不可见。同时你无法再次调用这个匿名的工厂方法来创建一个相同的对象。是不是很神奇?一个单例的,有着私有成员的对象就这么建好了。

  立即执行函数还有一种写法就是:

var car = (function () {
	……
}());

  

本篇文章的出处:http://www.bjhee.com/js-closure-iif.html 

时间: 2024-10-05 04:45:29

javascript闭包和立即执行函数的作用的相关文章

javascript中的立即执行函数(function(){…})()

javascript中的立即执行函数(function(){…})() 深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){…})()包住业务代码,使用jquery时比较常见. ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要

深入理解javascript中的立即执行函数(function(){…})()

这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是用(function(){-})()包住业务代码,使用jquery时比较常见,需要的朋友可以参考下http://www.jb51.net/article/50967.htm javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function()

javascript中的立即执行函数

javascript中的立即执行函数$(function(){ alert();}()) Highcharts的中的 series:[{ name: '今日在线人数', color: 'pink', data: (function(){ )()) }] #执行效果一样$( document ).ready(function() { console.log( "ready!" ); }); 和 $(function() { console.log( "ready!"

JavaScript初阶(三)--------函数、闭包、立即执行函数

函数 有时候我们的代码重复了很多次,编程里面称为耦合,但是编程要讲究高内聚,弱耦合.为了将重复多的聚在一起就出现了函数. 定义 函数基本要素:函数声明(function),函数名称,参数(形参,实参),返回值. 1.首先函数命名方式采用小驼峰式写法,即第一个单词小写,后面的单词首字母大写,如 function oneNumber(){} 2.函数表达方式里面有函数表达式,匿名函数表达式 var a = function lala() {}//函数表达式 var b = function () {

【转】深入理解javascript中的立即执行函数(function(){…})()

javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法,最初我以为是一个括号包裹匿名函数,再在后面加个括号调用函数,最后达到函数定义后立即执行的目的,后来发现加括号的原因并非如此.要理解立即执行函数,需要先理解一些函数的基本概念.

JavaScript 闭包系列二 --- 匿名函数及函数的闭包

一. 匿名函数 1. 函数的定义,可分为三种 1) 函数声明方式 function double(x) {    return 2*x;} 2)Function构造函数,把参数列表和函数体都作为字符串,不方便,不建议使用 var double = new Function('x', 'return 2*x;'); 3)函数表达式方式 var double = function(x) {    return 2*x;} 该形式中,等号右边是一个匿名函数,创建函数完毕后,将该函数赋给了变量doubl

记录闭包和立即执行函数

闭包: http://www.runoob.com/js/js-function-closures.html 立即执行函数: IIFE(Immediately Invoked Function Expression) http://benalman.com/news/2010/11/immediately-invoked-function-expression/#iife

javascript中的自执行函数

学习es6的时候遇到了自执行函数,感觉有必要写下来,一方面加深自己的记忆,另一方面还能分享给大家. 什么是自执行函数? 自执行函数就是为了不污染全局变量命名空间的一中匿名函数,相当于自己创建了一个作用域,下面我来说一下它的原理: function foo() {...} // 这是定义,Declaration:定义只是让解释器知道其存在,但是不会运行. foo(); // 这是语句,Statement:解释器遇到语句是会运行它的. 上面的函数就是传统的函数,它写起来有点啰嗦,而且会污染全局命名空

javascript基础之自执行函数

1.匿名函数的定义方式 如下 var temp = function(){} 2.自执行函数 (function(){             内容    })        () 不带参数 (function(){        console.log('zizhixing')    })() 带参数传参数 (function(name){        console.log(name)    })('chucanshu') 3.字符串常用方法和属性 obj.trim()   #去除字符两边