前端面试总结04-作用域与闭包

作用域：

全局作用域

函数作用域

块级作用域（es6新增）

自由变量：

1.一个变量在当前作用域没有定义，但被使用了

2.向上级作用域，一层一层依次寻找，直到找到为止

3.如果到全局作用域都没找到，则报错xx is not defined

闭包：

1.闭包是一种作用域应用的特殊情况，有两种表现：

（1：函数作为参数被传递

function create(){

let a =100;

return function(){

console.log(a)

}

}

let fn = create();

let a = 200;

fn()//结果是100

(2：函数作为参数被传递：

function print(fn){

let a =200;

fn();

}

let a = 100;

function fn(){

console.log(a)

}

print(fn);//结果是100;

 

this使用场景：

（1：作为普通函数：

function fn1(){

console.log(this)

}

fn1;//输出为windows

(2:使用call apply bind 改变this指向

fn1.call({x:100})//此时this指向{x:100}

const fn2 = fn1.bind({x:200});

fn2();//此时需要调用后生效this指向{x:200}

(3：作为对象方法被调用：

const zhangsan={

name:'张三‘,

sayHi(){

console.log(this);

},

wait(){

setTimeout(function(){

console.log(this);//this此时指向window

})

},

waitAgain(){

setTimeout(()=>{

console.log(this);//此时使用的是箭头函数，故this此时指向当前对象

})

}

}

（4：在class方法中调用

class People{

constructor(name){

this.name=name;

this.age=20;

}

sayHi(){

console.log(this)

}

}

const zhangsan = new People('张三')；

zhangsan.sayHi()//此时this指向zhangsan对象

（5：箭头函数

 

实际开发中闭包的应用：

1.隐藏数据

2.简单做一个cache工具

//闭包隐藏数据，只提供api

function createCache(){

const data={};

return{

set:function(key,value){

data[key]=value;

},

set:function(key){

return data[key]

}

}

}

const c = createCache();

c.set('a',100);

console.log(c.get('a'));

 

手写bind

//这里是因为this.__proto__===Function.prototype

Function.prototype.bind1 = funtion(){

//将参数拆解成数组

const args = Array.prototype.slice.call(arguments);

//获取this即args中的第一项

const t =args.shift();

//fn1.bind(...)中的fn1

const self=this;

//返回函数

return function(){

return self.apply(t,args);

}

}