百度网站域名注册,c 开发商城网站开发,大型网络规划与设计,宁波优化关键词首页排名✍️ 作者简介: 前端新手学习中。 #x1f482; 作者主页: 作者主页查看更多前端教学 #x1f393; 专栏分享#xff1a;css重难点教学 Node.js教学 从头开始学习 ajax学习 前端面试题 文章目录 什么是闭包例 如何在函数外部修改闭包中变量 什么是闭包
闭包这个东西对新… ✍️ 作者简介: 前端新手学习中。 作者主页: 作者主页查看更多前端教学 专栏分享css重难点教学 Node.js教学 从头开始学习 ajax学习 前端面试题 文章目录 什么是闭包例 如何在函数外部修改闭包中变量 什么是闭包
闭包这个东西对新人来说确实挺头疼的MDN官方表述是这样的。
闭包closure是一个函数以及其捆绑的周边环境状态lexical environment词法环境
的引用的组合。换而言之
闭包让开发者可以从内部函数访问外部函数的作用域。
在 JavaScript 中闭包会随着函数的创建而被同时创建确实不是很好理解那么我来通俗讲一下。
闭包其实就是指在函数内部定义一个函数
内部定义的函数可以访问外部函数作用域中的变量
这样就形成了一个封闭的作用域被称作闭包。
即使外部函数已经执行完毕闭包仍然可以访问这些变量。
这样我们就可以在函数外部 使用一个函数内的变量。
闭包还可以用来创建“私有”变量和方法提高代码的封装性和安全性。例 function outerFunction() {
//在函数内定义一个变量函数作用域const outerVariable 0;
//函数内部再定义一个函数并在这个函数中使用外层函数内定义的变量function innerFunction() {outerVariableconsole.log(outerVariable);}return innerFunction;
}
//在函数执行完毕后用过一遍的变量一般都会被垃圾回收机制中的标记清除算法销毁掉。
//但是由于内部函数的引用所以没被销毁通过内部函数我们可以访问到原本是函数作用域的变量这样的弊端有时会引起内存泄漏内存泄漏意思就是不需要使用的变量没有被垃圾回收机制回收。
const innerFunc outerFunction();
innerFunc(); 1
innerFunc(); 2
//由于没被销毁回收所以每次调用都会累加数量除非再调用一次外部函数重新定义。
const innerFunc2 outerFunction();
innerFunc()2; 1
innerFunc()2; 2如何在函数外部修改闭包中变量
我们这里来看一道很nice的面试题。 题目
let o (function () {var obj {a:1,b:2,
};
return {
get:function(k){return obj[k]
}
}
})()要求在不改变原代码的情况下修改obj对象中的值。
解 我们使用这种闭包的原因就是为了使用函数值并且保护函数值不被修改就算要修改函数值也要定义一个修改函数通过修改函数修改值。 但是这里面也没有修改函数 只有一个获取函数它可以返回对象内属性的值。 我们通过这个函数可以得到对象内属性的值。
console.log(o.get(a)); 可以获取到1 obj中a属性的值。我们想要修改这个对象首先要获取对象如何获取对象呢从这个函数入手 上面说了这个函数获取对象的属性没有做限制除了这些基础方法之外我们是不是还可以获取到对象原型上的方法。 可以尝试通过valueOf这个方法来获取到原对象的内容Object 实例的 valueOf() 方法将 this 值转换成对象。在所有类型中都有这个方法 一般都会被隐式调用比如
let a 1;
console.log(a) 实际上就是a.valueOf()我们可以通过这个方法通过this指向来获取原对象。
像这样
console.log(o.get(valueOf)());
//不过结果报错了 并没有获取到能看出是什么原因嘛如果不能看出。
//修改试题中的获取函数就能获取到结果现在能看出什么原因了嘛。
let o (function () {var obj {a:1,b:2,
};
return {
get:(k){return obj[k]()
}
}
})()console.log(o.get(valueOf)); { a: 1, b: 2 }
//没错原因就是this指向问题修改试题后的执行是这样的 obj[valueOf]() this指向就是obj可以拿到obj对象的内容 没修改的话return obj[valueOf] 返回来的函数就是在全局环境执行的this指向就是window所以报错 就跟Object.prototype.valueOf()一样。
//由于要求不能修改试题所以我们只能找别的方法但是这个思路是没有问题的。最终的解决方法就是自己写方法 我们的目标还是想办法通过给的get函数获取原对象我们可以这里在对象原型上自定义一个方法。
Object.defineProperty(Object.prototype,getThis,{get(){return this;},
})
//我们直接在对象的原型上定义一个方法只要调用getThis就会执行get函数 返回this。//我们只需要执行就能得到原对象 也就是return obj[getThis] 函数内返回的this就是obj这样就得到了对象。
console.log(o.get(getThis)); //{ a: 1, b: 2 }
//这时候就可以通过对象的引用特性对原对象进行随意修改了obj2o.get(getThis)
obj2.a3
obj2.b1
console.log(o.get(getThis)); //{ a: 3, b: 1 }
