Javascripts闭包最简洁的理解

原创已于 2024-07-01 21:08:41 修改 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #html5

于 2021-08-30 17:28:29 首次发布

编程语言专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了JavaScript中的闭包概念，通过实例解析了闭包的工作原理。文章指出，闭包的关键在于函数内部可以访问外部作用域的变量，但外部无法直接修改内部变量。在代码1中，由于函数返回的内部函数引用了外部的`this`，导致`this`在调用时指向全局对象`window`。通过使用`call`方法或保存`this`的引用（如`that`），可以改变`this`的指向，从而得到预期的结果。文章提供了关于如何正确使用闭包以维持变量状态的实用技巧。

讲得比较好的一个：

https://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html

总结：

闭包就是能够读取其他函数内部变量的函数。

闭包的作用：

一是前面提到的可以读取函数内部的变量
二是让这些变量的值始终保持在内存中

使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

对于思考题的解释：
代码1：

　　var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

返回：The Window

原因：this指向是根据上下文来的。getNameFunc里面的function()感知不到父函数getNameFunc里面的对象，所以，this指向了全局对象window。

另外：由于call可指定上下文object，alert(object.getNameFunc().call(object))也会返回My Object。因为object.getNameFunc()返回的是一个函数function(){return this.name;}。

其实代码1改成如下，返回的就是My Object了：

　　var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　return this.name;

　　　　}

　　};

　　alert(object.getNameFunc());

也就是思考题代码2中实现的效果：

var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());