因为实验室项目要用,所以最近在学习OpenLayers,但是从来没有做过前端呀,坑爹的,硬着头皮上吧
反正正好借这个机会学习一下JS,本来对这门语言也挺感兴趣的,多多少少写过一下JS代码了,差不多学一些里面的特殊概念了
以前一直觉得闭包这个词太神秘,所以先选这个概念了
参考资料:《JavaScript高级程序设计》
博客:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures(主要是这一篇,代码来源)
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html
http://coolshell.cn/articles/6731.html
代码里面有注释,就不写太多了。
<!--闭包是指有权访问另一个函数作用域的变量的函数--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--<a href="#" id="size-12">12</a>--> <!--<a href="#" id="size-14">14</a>--> <!--<a href="#" id="size-16">16</a>--> <script language="JavaScript"> // function makeFunc(){ // var name = "Mozilla"; // function displayName(){ // alert(name); // } // return displayName; // } // var myFunc = makeFunc(); // myFunc(); // function makeAdder(x){ // return function(y){ // return x+y; // }; // } // var add5 =makeAdder(5); // var add10=makeAdder(10); // document.writeln(add5(2)); // document.writeln(add10(2)); //闭包允许将函数与其所操作的某些数据(环境)关连起来。这显然类似于面向对象编程。 //在面对象编程中,对象允许我们将某些数据(对象的属性)与一个或者多个方法相关联。 // function makeSizer(size){ // return function() { // document.body.style.fontSize = size + 'px'; // }; // } // var size12 = makeSizer(12); // var size14 = makeSizer(14); // var size16 = makeSizer(16); // // document.getElementById('size-12').onclick=size12; // document.getElementById('size-14').onclick=size14; // document.getElementById('size-16').onclick=size16; //完成面向对象中的私有化 // var Counter = (function(){ // var privateCounter = 0; // function changeBy(val){ // privateCounter+=val; // } // return { // increment:function(){ // changeBy(1); // }, // decrement: function () { // changeBy(-1); // }, // value:function(){ // return privateCounter; // } // } // })(); // alert(Counter.value()); // Counter.increment(); // Counter.increment(); // alert(Counter.value()); // Counter.decrement(); // alert(Counter.value()); //如果不是因为某些特殊任务而需要闭包,在没有必要的情况下,在其它函数中创建函数是不明智的, // 因为闭包对脚本性能具有负面影响,包括处理速度和内存消耗。 //例如,在创建新的对象或者类时,方法通常应该关联于对象的原型,而不是定义到对象的构造器中。 // 原因是这将导致每次构造器被调用,方法都会被重新赋值一次(也就是说,为每一个对象的创建)。 </script> </body> </html>