1. 如何产生闭包（closure）
上图代码：
// 函数作为返回值
function create() {
const a = 100
return function () {
console.log(a)
}
}
const fn = create()
const a = 200
fn() // 100
// 函数作为参数被传递
function print(fn) {
const a = 200
fn()
}
const a = 100
function fn() {
console.log(a)
}
print(fn) // 100
函数中的自由变量，取决于函数定义的地方，跟执行的地方没关系
2. this
5大调用场景：
普通函数、
对象方法、
call apply bind
class
箭头函数
- 普通函数中的this
function fn(){
console.log(this);
}
fn(); //相当于下面的window.fn();
window.fn();
window调用了fn，所以this指向window
- 对象方法中出现this
let pox={
name:'小红',
run:function(){
console.log(this.name)//this
}
}
pox.run();// pox 小红
pox调用的run,所以run方法中的this指向pox
- call() /apply() /bind() 都可以改变this指向
let obj={name:'小明'}
let pox={
name:'小红',
run:function(){
console.log(this.name)
}
}
// 对象方法中的this.指向方法的调用者。
pox.run();// pox 小红
pox.run.call(obj)// 小明
pox.run.apply(obj);// 小明
pox.run.bind(obj)();//小明
相同点：call() /apply() /bind() 都可以改变this指向,指向第一个参数
不同点：bind()需要手动执行
function foo(){
// argument=[参数] 类数组/伪数组
let arg=arguments;
let arr=[4,5,6]
// arg.push(4) 借用数组
// Array.prototype.push.call(arg,4) // arg==[1,2,3,4]
Array.prototype.push.apply(arg,arr) // arg==[1,2,3,4,5,6]
// Array.prototype.push.bind(arg)(4) // arg==[1,2,3,4]
console.log(arg);//[1,2,3]
}
foo(1,2,3)
不同点：call第二个参数为单个数值，apply()第二个参数为数组
- class中的this指向new 后的实例对象
class Person{
constructor(name,age){
this.name=name;
this.age=age
}
say(){
console.log(`我叫${this.name}年龄是${this.age}`)
}
}
let lsy=new Person('李士乐',21);
lsy.say();// 我叫李士乐年龄是21
console.log(lsy);// {name:'李士乐',age:21}
class中的this指向new 后的实例对象
- 箭头函数中的this.指向父级上下文对象
let obj={name:'小明'}
var name='杨志' //不能用let声明，不存在变量提升
let pox={
name:'小红',
run:()=>{
console.log(this.name)//this
}
}
// 对象方法中的this.指向方法的调用者。
pox.run();// 杨志
pox.run.call(obj)// 杨志
pox.run.ally(obj);// 杨志
pox.run.bind(obj)();//杨志
class中的 this时刻指向父级的上下文对象。并且不可以被 call()/apply()/bind()修改。
- 特殊情况
对象方法中的this，指向当前对象（因为当前对象执行了方法）。
setTimeout函数中的this,相当于普通函数中的this,因为setTimeout触发的函数执行，并不是外部对象执行的。
setTimeout中函数是箭头函数，this为当前对象。因为箭头函数中的this始终是父级上下文中的this.
注意：
this取什么值，是在执行时确认的，定义时无法确认
手写bind:
// 模拟 bind
Function.prototype.bind1 = function () {
// 将参数拆解为数组
const args = Array.prototype.slice.call(arguments)
// 获取 this（数组第一项）
const t = args.shift()
// fn1.bind(...) 中的 fn1
const self = this
// 返回一个函数
return function () {
return self.apply(t, args)
}
}
function fn1(a, b, c) {
console.log('this', this)
console.log(a, b, c)
return 'this is fn1'
}
const fn2 = fn1.bind1({x: 100}, 10, 20, 30)
const res = fn2()
console.log(res)
this总结 （重要）
普通函数中调用，this指向window
对象方法中调用，this指向当前对象
call apply bind中调用， this指向被传入的对象
class中的方法中调用， this指向实例对象
箭头函数，this就是父级上下文中的this
3. 闭包的应用场景
闭包应用场景1，封装对象的私有属性和方法
隐藏数据
做一个简单的缓存工具
// 闭包隐藏数据，只提供 API
function createCache() {
const num=100
const data = {} // 闭包中的数据，被隐藏，不被外界访问
return {
num:num,
set: function (key, val) {
data[key] = val
},
get: function (key) {
return data[key]
}
}
}
const c = createCache()
console.log(c.num)//num此时就作为c私有属性
c.set('a', 100) //set此时作为c的私有方法
console.log( c.get('a') )
闭包应用场景2，闭包作用回调函数
<body>
<a href="#" id="as1">20</a>
<a href="#" id="as2">40</a>
</body>
<script>
function changeSize(size){
return function(){
document.body.style.fontSize=size+'px';
}
}
var size20=changeSize(20);
var size40=changeSize(40);
document.getElementById('as1').onclick=size20;
document.getElementById('as2').onclick=size40;
</script>
闭包应用场景3，函数节流防抖
<body>
<!-- 函数防抖是指在函数被高频触发时当停止触发后延时n秒再执行函数,
(即每次触发都清理延时函数再次开始计时)，一般用于resize scroll，mousemove -->
<!-- 函数节流 原理 函数被高频出发时延时n秒后才会再次执行，防抖主要是用户触发一次时间后，延迟一段时间触发，
而节流会规定的事件内触发一次事件 -->
</body>
<script>
// 函数节流：是确保函数特定的时间内至多执行一次。
// 函数防抖：是函数在特定的时间内不被再调用后执行。
//防抖
var debounce = function(func, delay) {
var timer = null
return function() {
var that = this;
var args = arguments;
if(timer) {
clearTimeout(timer);
}
timer = setTimeout(function() {
func.apply(that, args);
}, delay)
}
}
ipt.addEventListener('keyup', debounce(function(e){
console.log(e.target.value);
}, 400))
</script>
补充
// 闭包会造成页面性能问题 在ie中可能导致内存泄漏
function a(){
var num =10;
return function(){
return ++num;
}
}
// var inc =a();
// console.log(inc());
// console.log(inc());
// inc=null;
//也可这样写 a()获取当前函数 再调用
//因为生成的函数inc也是个闭包 这个闭包再次访问到变量num
console.log(a()());
console.log(a()());
//每个复函数调用完成，都会形成新的闭包，父函数中的变量会始终在内存中，
// 相当于缓存，小心消耗问题
4. 面试问：怎么理解闭包
一、什么是闭包：
①要理解闭包，首先理解javascript特殊的变量作用域，变量的作用于无非就是两种：全局变量，局部变量。
②javascript语言的特殊处就是函数内部可以读取外部作用域中的变量。
③我们有时候需要得到函数内的局部变量，但是在正常情况下，这是不能读取到的，这时候就需要用到闭包。在javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。闭包是指有权访问另一个函数作用域中的变量的函数。其本质是函数的作用域链中保存着外部函数变量对象的引用。
二.闭包的应用场景：
①函数作为参数被传递
②函数作为返回值被返回
③实际应用（隐藏数据）：为什么说隐藏数据了呢，因为普通用户只能通过get、set等api对数据进行查看和更改等操作，没法对data直接更改，达到所谓隐藏数据的效果；jquery就利用了这一特性，必须调用$.ajax()才能访问内部属性方法。
封装功能时(需要使用私有的属性和方法)，
函数防抖、函数节流
单例模式
三.闭包的优点：
（一）变量长期驻扎在内存中
（二）另一个就是可以重复使用变量，并且不会造成变量污染
①全局变量可以重复使用，但是容易造成变量污染。不同的地方定义了相同的全局变量,这样就会产生混乱。”
②局部变量仅在局部作用域内有效，不可以重复使用，不会造成变量污染。
③闭包结合了全局变量和局部变量的优点。可以重复使用变量，并且不会造成变量污染
四.闭包的缺点：
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
扫一扫
992
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
