博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript闭包
阅读量:7256 次
发布时间:2019-06-29

本文共 3838 字,大约阅读时间需要 12 分钟。

闭包的定义:

闭包是函数和声明该函数的词法作用域的组合。

先看如下例子:

function makeFn(){    var name = "Mirror";    function showName(){        alert(name)    }        return showName;}var myFn = makeFn();myFn();  // "Mirror"

javascript 中的函数会形成闭包。闭包是由函数以及创建该函数的词法环境组合组成。这个环境包含了这个闭包创建时所能访问的所有局部变量。在以上的例子中,myFn是执行makeFn时创建的showName函数实例的引用,而showName实例仍可访问其词法作用域中的变量,既可以访问到name。 由此,当myFn 被调用时,name仍可被访问。

再看一个更有意思的例子:

function makeAdder(x){    return function( y ){        return x + y     }}var add5 = makeAdder( 5 );    var add10 = makeAdder( 10 );console.log( add5(2) )  // 7 console.log( add10(2) )   // 12

以上示例中,我们定义了makeAdder(x) 函数,它接收一个参数x ,并返回一个新的函数。返回的函数接受一个参数y,并返回 x+y的值。

本质上讲,makeAdder 是一个工厂函数 -- 它创建了将指定的值和它的参数相加求和的函数。上面的add5add10都是闭包。它们共享相同的函数定义,但是保存了不同的词法环境。在add5的环境中,x为5,而在add10中,x则是10。

实用的闭包:

闭包允许将函数与其所操作的某些数据(环境)关联起来。这显然类似于面向对象编程。在面向对象编程中,对象允许我们将某些数据(对象的属性)与一个或者多个方法相关联。

通常,使用只有一个方法的对象的地方都可以使用闭包。

假如,我们想在页面上添加一些可以调整字号的按钮。一种方法是以像素为单位指定 body 元素的 font-size,然后通过相对的 em 单位设置页面中其它元素(例如header)的字号:

    

h1 标签

h2 标签

用闭包模拟私有方法:

私有方法不仅仅有利于限制对代码的访问,还提供了管理全局命名空间的强大能力,避免非核心的方法弄乱了代码的公共接口部分。

var Counter = ( function(){    var privateCounter = 0;    function changeBy(val){        privateCounter += val    };        return {        add:function(){            changeBy(1);            return privateCounter;        },        decrease:function(){            changeBy(-1);            return privateCounter;        },        value:function(){            return privateCounter;        }    }    })()

以上示例中我们只创建了一个词法环境,为三个函数所共享:Counter.addCounter.decreaseCounter.value

该共享环境创建一个立即执行的匿名函数体内。这个环境中包含两个私有项:privateCounter的变量和changeBy的函数。这两项都无法在这个匿名函数外直接访问。必须通过匿名函数返回的三个公共函数访问。

这三个公共函数是共享同一个环境的闭包。多亏javascript的词法作用域,它们都可以访问privateCounter变量和changeBy函数。

应该注意到我们定义了一个匿名函数,用来创建计算器。立即执行函数将他的值赋给了变量
Counter。我们也可以将这个函数存储在另一个变量
makeCounter中,并用它来创建多个计数器。
var makeCounter = function(){    var privateCounter = 0;    var changeBy = function(val){        privateCounter += val    };    return {        add:function(){            changeBy(1)            return privateCounter        },        decrease:function(){             changeBy(-1)             return privateCounter        },        value:function(){            return privateCounter        }    }}var Counter1 = makeCounter();var Counter2 = makeCounter();Counter1.add() // 1Counter2.decrease() // -1

两个计数器Counter1Counter2都引用自己词法作用域内的变量privateCounter。每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。然而在一个闭包内对变量的修改,不会影响到另一个闭包中的变量。

以这种方式使用闭包,提供了许多面向对象编程相关的好处——特别是数据隐藏和封装。

在循环中创建闭包:一个常见的错误

在ECMAScript2015引入let关键字以前,在循环中有一个常见的闭包创建问题。如下:

运行以上代码,会发现没有达到想要的结果。无论点击哪个按钮,弹窗提示的都是第3个按钮

原因是赋值给onclick的是闭包。三个闭包在循环中被创建,但是他们共享同一个词法作用域,在这个作用域中存在一个变量i。当onclick的回调执行时,i的值被决定。由于循环在事件触发之前早已执行完毕,变量i(被三个闭包共享)已经变成了'3'。

解决这个问题的一种方案是使用跟多的闭包:特别是使用前面所述的函数工厂:

这段代码可以如我们所期望的那样工作。所有的回调不再共享同一个环境,clickCallback函数为每一个回调创建一个新的词法环境。在这些环境中。x指向循环中的i

另一种方法实现了匿名闭包:

避免使用过多的闭包,可以用let关键词:

这个例子使用的是let而不是var,因此每个闭包都绑定了块作用域的变量,这意味着不再需要额外的闭包。

性能考量

如果不是某些特定的任务需要使用闭包,在其他函数中创建函数是不明智的,因为闭包在处理速度和内存消耗方面对脚本性能具有负面影响。

例如,在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。原因是这将导致每次构造器被调用时,方法都会被重新赋值一次(也就是,每个对象的创建)。

考虑一下示例:

function MyObject( name , message ){    this.name = name;    this.message = message.toString();    this.getName = function(){        return this.name;    };    this.getMessage = function(){        return this.message    };}
上面的代码并未利用到闭包的好处,可以修改成如下:
function MyObject(name, message) {  this.name = name.toString();  this.message = message.toString();}MyObject.prototype = {  getName: function() {    return this.name;  },  getMessage: function() {    return this.message;  }};
不建议重新定义原型。可改成如下例子:
function MyObject(name, message) {  this.name = name.toString();  this.message = message.toString();}MyObject.prototype.getName = function() {  return this.name;};MyObject.prototype.getMessage = function() {  return this.message;};

转载地址:http://mbvdm.baihongyu.com/

你可能感兴趣的文章