网站制作苏州企业,合肥网站开发招聘,不锈钢网架公司,幸运28网站建设1. 前言
闭包是 JavaScript 中一种非常重要的概念#xff0c;它允许函数访问其外部作用域中的变量#xff0c;即使在函数被返回或者在其原始定义的作用域之外执行时仍然可以访问这些变量。
在讲解闭包之前我们得弄清楚下面的概念#xff1a;
作用域链#xff1a; JavaSc…1. 前言
闭包是 JavaScript 中一种非常重要的概念它允许函数访问其外部作用域中的变量即使在函数被返回或者在其原始定义的作用域之外执行时仍然可以访问这些变量。
在讲解闭包之前我们得弄清楚下面的概念
作用域链 JavaScript 中的作用域是通过词法作用域也称为静态作用域来确定的即函数在定义时所处的作用域决定了它能够访问的变量。当一个函数被创建时也会创建一个作用域链其中包含了函数自身的作用域以及所有包含外部作用域中的变量对象。内部函数 在 JavaScript 中函数可以嵌套定义即在一个函数内部可以再定义一个函数。当内部函数被返回或者在其定义的作用域之外执行时它既可以访问外部变量也可以访问内部变量。引用外部变量 当内部函数引用外部函数的变量时JavaScript 引擎会将这些变量保存在闭包中。这意味着即使外部函数执行完毕其内部函数仍然可以访问和操作外部函数的变量。
2. 闭包
2.1. 变量的作用域
按照常理来说我们在上一级作用域是无法访问下一级作用域的局部变量的。例如
function fn(){ var n 1;
}fn();
console.log(n); // n not defined在这里我们调用了 fn 函数认为变量 n 定义后就能在外部被访问但是我们得到了一个错误。所以正常来讲在外部是访问不了内部的局部变量的。但是闭包使得这个问题变为了可能。
2.2. 如何从外部访问局部变量
但是有时候我们确实想获取内部的局部变量该怎么办呢首先我们在内部定义一个函数如下
function outer(){ var n 1; function inner() {console.log(n);}inner();
}outer();
运行上面的代码我们可以看到控制台会输出 1所以内部的函数能访问内部定义的局部变量这是没有问题的
此时如果我们将这个内部的函数交给外部让外部来调用这个函数那么是不是就能访问到内部的局部变量了呢答案是可行的
function outer(){ var n 1; function inner() {console.log(n);}return inner;
}let inner outer();
inner();运行上面的代码我们也能看到控制台输出 1这验证了我们的猜想。
2.3. 闭包的使用场景
闭包的使用场景有很多但凡你要传递的参数是一个函数你就使用到了闭包。比如
function exec(fn) {fn();
}function outer() {let n 0;function inner() {console.log(n);}window.exec(inner);
}由上面的代码我们可以看到 exec 函数执行了传进来的函数在 inner 函数中我们输出了局部变量 n所以在 exec 函数中我们访问到了 outer 函数中的局部变量。
有些时候你可能连你使用到了闭包都不知道下面是使用闭包的例子
let n 0;
window.setTimeout(() console.log(n), 1000);window.setInterval(() console.log(n), 1000);
此外在我们常使用的防抖节流中也使用到了闭包。
2.4. 注意
1由于闭包会使得函数中的变量都被保存在内存中内存消耗很大所以不能滥用闭包否则会造成网页的性能问题在IE中可能导致内存泄露。解决方法是在退出函数之前将不使用的局部变量全部删除。
2闭包会在父函数外部改变父函数内部变量的值。所以如果你把父函数当作对象使用把闭包当作它的公用方法把内部变量当作它的私有属性这时一定要小心不要随便改变父函数内部变量的值。
2.5. 思考
var name 李华;var object { name : 小明,getName : function(){ return function(){ return this.name; };}
};console.log(object.getName()()); // 李华var name 李华;var object { name : 小明,getName : function(){ var that this; // 闭包保存了 this 的引用因为 this 会变而 that 在这不会return function(){ return that.name; };}
};console.log(object.getName()()); // 小明
