前端进阶之——闭包和this指向

一、闭包

1、概念

闭包是指有权访问另一个函数作用域中的变量的函数, 是一种特殊的函数，创建闭包的常见形式是在一个函数内部创建并返回另一个函数。

2、示例

function f(){
	var name="zhangsan";
	function s(){  // 此时这个函数s就是一个闭包
         console.log("abb",name);
	}
	return s;
}

var ff=f();
ff();

3、闭包的优缺点

优点：

• 避免全局变量的污染
• 能够读取函数内部的变量
• 可以在内存中维护一个变量

缺点：

• 闭包会常驻内存，会增大内存使用量，导致一定程度上的内存泄露。
• 在游览器中因为回收机制无法回收闭包的函数以及闭包函数中储存的数据，会使游览器占用更多的性能开销

4、常见闭包使用场景

• 防抖节流
• 定时器 
• vue2中的eventbus
• vue3中的hook

二、this指向

1、概念

在js中，this的意思为“这个;当前”，是一个指针型变量，它动态指向当前函数的运行环境。

在不同的场景中调用同一个函数，this的指向也可能会发生变化，但是它永远指向其所在函数的真实调用者；如果没有调用者，就指向全局对象window。

普通函数：关于this，谁调用就指向谁，没有调用者，就指向全局对象window。
箭头函数：箭头函数的this指向于函数作用域所用的对象。

2、示例

• 函数直接调用 - this指向是window

function foo() {
    console.log('函数内部this', this);
}

foo()

• 隐式绑定 - this的指向是调用堆栈的上一级 

function fn() {
    console.log('隐式绑定', this.a)
}

const obj = {
     a: 1,
     fn
}

obj.fn = fn;
obj.fn(); // 这样调用的话fn函数内的this会指向obj
let fn1 = obj.fn;
fn1(); // 会报错underfined，因为this已经改变指向为window了

1. 在执行函数时，函数背上一级调用，上下文指向上一级

2. 直接变成了公共函数的话，指向window

 3、call、apply、bind的区别

当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用 bind() 方法。而 apply/call 则会立即执行函数

call语法：call([thisObj[,arg1[, arg2[,   [,.argN]]]]])

call定义：调用一个对象的一个方法，以另一个对象替换当前对象。

var func = function( a, b, c ){
    alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
};
func.call( null, 1, 2, 3 )

apply语法：apply([thisObj[,argArray]]) 

 apply定义：应用某一对象的一个方法，用另一个对象替换当前对象。

var func = function( a, b, c ){
    alert ( [ a, b, c ] ); // 输出 [ 1, 2, 3 ]
};
func.apply( null, [ 1, 2, 3 ] )