前端笔试面试题之JavaScript学习3

JavaScript作用域和闭包1.执行上下文2.this3.作用域4.作用域链5.闭包6.面试题1.说一下对变量提升的理解2.说明this几种不同的使用场景3.创建10个``标签，点击的时候弹出来对应的序号4.如何理解作用域5.实际开发中闭包的应用

JavaScript作用域和闭包

1.执行上下文

js 是解释型语言不是编译型语言，所以有些错误在编写程序时不会报错，什么时候执行什么时候报错。 范围：一段script标签或者一个函数之内都会生成一个上下文 全局：变量定义，函数声明 //执行之前，一段script标签会生成全局上下文 函数：变量定义，函数声明，this，arguments //函数执行之前会生成函数上下文 注意：‘函数声明’和‘函数表达式’的区别

console.log(a);//undefined var a=100 fn('zhangsan') //'zhangsan' 20 function fn(name){ age=20; console.log(name,age); var age; }

2.this

this要在执行时才能确认值，定义时无法确认

var a={ name:"A", fn:function(){ console.log(this.name) } } a.fn() //this===a a.fn.call({name:B}) //this==={name:'B'} var fn1=a.fn; fn1() //this===window 使用场景 ①作为构造函数执行 function Foo(name){ //this={}; this.name=name; //return this } var f=new Foo('zhangsan') ②作为对象属性执行 var obj={ name:'A', printName:function(){ console.log(this.name) } } obj.printName(); ③作为普通函数执行 function fn(){ console.log(this) //this===window } fn() ④call apply bind function fn1(name,age){ alert(name); console.log(this) //this===window } fn1.call({x:100},'zhangsan',20) fn1.apply({x:100},['zhangsan',20]) var fn2=function(name,age){ alert(name); console.log(this) //this==={x:100} }.bind({x:100})//bind只能用函数表达式，函数声明不可用，会报错 fn2('zhangsan',200)

3.作用域

①没有块级作用域 if(true){ var name='zhangsan' } console.log(name)//'zhangsan' ②只有全局和函数作用域 var a=100; function fn(){ var a=200； console.log('fn',a) } console.log('global',a) fn()

4.作用域链

var a=100 function fn(){ var b=200 //当前作用域没有定义的变量，即'自由变量' console.log(a) console.log(b) } fn() var a=100; function F1(){ var b=200; function F2(){ var c=300; console.log(a);//a是自由变量 console.log(b);//b是自由变量 console.log(c); } F2() } F1();

注意：函数的父级作用域是函数定义时候的作用域，不是函数执行时候的作用域,也就是说那个作用域定义了这个函数，这个函数的父级作用域就是谁，跟函数执行没有关系，函数自由变量要到父级作用域中找，就形成了作用域链。

5.闭包

实际开发中闭包的应用：封装变量，收敛权限

function F1(){ var a=100; //返回一个函数(函数作为返回值) return function(){ console.log(a);//自由变量，父作用域寻找 } } //f1得到一个函数 var f1=F1(); var a=200; f1();//100= 闭包使用场景 ①函数作为返回值 ②函数作为参数传递(函数自由变量要到父级作用域中找) function F1(){ var a=100; return function(){ console.log(a); } } var f1=F1(); function F2(fn){ var a=200 fn();(自由变量要到声明定义时的父作用域中找，和执行的作用域没有关系) } F2(f1);//100

6.面试题

1.说一下对变量提升的理解

①变量的定义 ②函数的声明（注意和函数表达式的区别）

2.说明this几种不同的使用场景

参考上文this

3.创建10个<a>标签，点击的时候弹出来对应的序号

var i; for(i=0;i<10;i++){ (function(i){ var a=document.createElement('a'); a.innerHTML=i+'<br>'; a.addEventListener('click',function(e){ e.preventDefault(); alert(i); }) document.body.appendChild(a); })(i);//相当于创建了10个函数 }

4.如何理解作用域

①自由变量 ②作用域链，即自由变量的查找 ③闭包的两个场景

5.实际开发中闭包的应用

//闭包实际应用中主要用于封装变量，收敛权限 function isFirstLoad(){ var _list=[]; return function(id){ if(_list.indexOf(id)>=0){ return false; }else{ _list.push(id); return true; } } } //使用 var firstLoad=isFirstLoad(); firstLoad(10); firstLoad(10); firstLoad(20); //你在 isFirstLoad 函数外面，根本不可能修改掉_list的值