JavaScript闭包详解：原理、this指向陷阱与性能优化

JavaScript闭包的基本原理

闭包的核心定义在于：内部函数能够访问并读取其所在外部函数作用域内的变量，即它捕获了创建时所在的上下文环境。

function hello(){
var char = "hello,world";
function print(){
console.log(char);
    };
return print();
}

在此示例中，print函数引用了外部hello函数的char变量，从而实现了对外部变量的访问与返回。

hello,world

这种能力在某种程度上依赖于JavaScript的作用域机制。通常情况下，我们无法直接访问局部变量char，除非在声明时遗漏了var关键字导致其变为全局变量。

function hello(){
char = "hello,world";
function print(){
console.log(char);
    };
return print();
}

上述情况仅因缺少了var关键字声明。

此时hello函数便形成了一个闭包。闭包是一种特殊的对象，由两部分组成：函数本身以及创建该函数时的环境。该环境包含闭包创建时在作用域中的所有局部变量。

闭包中this指向的陷阱与解决

JavaScript闭包与this关键字的交互

在闭包中读取this和arguments对象时，可能会出现意外行为，需要特别注意。

function hello(){
this.char = "hello,world";
function output(){
char = "I'm no hello world";
console.log(this.char);
    };
return output();
}

上述示例并非最佳说明，为此我们引用《JavaScript高级程序设计》中的一个经典案例来进一步阐释该问题。

var name = "The window";
var object = {
 name: "My Object",
getNameFunc: function(){
 return function(){
 return this.name;
 }
 }
};
object.getNameFunc()()

这种写法虽然可行，但存在this指向丢失的问题。解决方法是保存一个临时变量that（或self），如前文《关于JavaScript的this的一些知识》中所述。

var name = "The window";
var object = {
name: "My Object",
getNameFunc: function(){
 var that = this;
 return function(){
 return that.name;
 }
 }
};
object.getNameFunc()()

利用闭包实现变量读写与状态保持

值得注意的是，如果变量处理不当，闭包内的函数还可以修改外部变量。

function hello(){
var char = "hello,world";
return{
set: function(string){
return char = string;
        },
print: function(){
console.log(char)
        }
    }
}
var say = hello();
say.set('new hello,world')
say.print() // 输出 new hello world

闭包对性能的影响与最佳实践

根据MDC（Mozilla Developer Center）的建议：

除非有特殊任务需求，否则在非必要情况下，在其他函数内部创建函数是不明智的，因为闭包会对脚本性能产生负面影响，包括处理速度和内存消耗。

文档还指出：

在创建新对象或类时，方法通常应关联到对象的原型（prototype），而不是定义在对象的构造函数中。原因是这会导致每次调用构造函数时，方法都会被重新赋值一次（即为每个对象实例创建新的方法副本）。