javascript Closures(闭包)

最新推荐文章于 2024-09-18 16:27:11 发布

fantasy0126

最新推荐文章于 2024-09-18 16:27:11 发布

阅读量514

点赞数

分类专栏： java 文章标签： closures javascript function mozilla variables object

本文链接：https://blog.csdn.net/fantasy0126/article/details/6289416

版权

java 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

function init() { var name = "Mozilla"; function displayName() { alert(name); } displayName(); } init();

function makeFunc() { var name = "Mozilla"; function displayName() { alert(name); } return displayName; } var myFunc = makeFunc(); myFunc();

A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created. In this case, myFunc is a closure that incorporates both the displayName function and the "Mozilla" string that existed when the closure was created.

function makeAdder(x) { return function(y) { return x + y; }; } var add5 = makeAdder(5); var add10 = makeAdder(10); print(add5(2)); print(add10(2));

In essence, makeAdder is a function factory — it creates functions which can add a specific value to their argument. In the above example we use our function factory to create two new functions — one that adds 5 to its argument, and one that adds 10.

add5 and add10 are both closures. They share the same function body definition, but store different environments. In add5's environment, x is 5. As far as add10 is concerned, x is 10.

body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; }

function makeSizer(size) { return function() { document.body.style.fontSize = size + 'px'; }; } var size12 = makeSizer(12); var size14 = makeSizer(14); var size16 = makeSizer(16);

function setupButtons() { document.getElementById('size-12').onclick = size12; document.getElementById('size-14').onclick = size14; document.getElementById('size-16').onclick = size16; } <a href="#" mce_href="#" id="size-12">12</a> <a href="#" mce_href="#" id="size-14">14</a> <a href="#" mce_href="#" id="size-16">16</a>

<html> <head> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; }</style> <mce:script type="text/javascript"></mce:script> </head> <body οnlοad="setupButtons()"> <a href="#" mce_href="#" id="size-12">12</a> <a href="#" mce_href="#" id="size-14">14</a> <a href="#" mce_href="#" id="size-16">16</a> 你好呀,你好啊,abcdefghisl <h1>222</h1> <h2>333</h2> </body> </html>

去掉 mce_href="#"

替换<mce:style 为<style

替换<mce:script为<script

Using closures in this way provides a number of benefits that are normally associated with object oriented programming, in particular data hiding and encapsulation.