JS作用域和闭包-执行上下文

一题目：

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

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

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

4.如何理解作用域

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

二知识点：

1.执行上下文

a:范围：一段<script>或者一个函数

b:全局：变量定义、函数声明

c:函数：变量定义、函数声明、this、arguments

console.log(a) // undefind
var a=100

fn('zhangsan')  //zhangsan 20

function fn(name){
	var age=20
	console.log(name,age)
	var age
}

2.this

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

 1 var a={
 2     name: "AA",
 3     fn:function(){
 4         console.log(this.name)
 5     }
 6 }
 7 a.fn() // this === a
 8 a.fn.call({name:"bb"}) // this==={name:"bb"}
 9 a.fn.apply({name:"cc"}) // this === {name: "cc"}
10 var fn11=a.fn
11 fn11()  // this === window

a:作为构造函数执行

b:作为对象属性执行

c:作为普通函数执行

d:call apply bind

 1 // 构造函数执行
 2 function Foo(name){
 3     this.name=name
 4 }
 5 var f=new Foo('zhangsan')
 6 console.log(f)
 7 
 8 
 9 // 对象属性执行
10 var obj={
11     name:'I am chinese',
12     printname:function(){
13         console.log(this.name)
14     }
15 }
16 obj.printname()
17 
18 
19 // 普通对象执行
20 function fn(){
21     console.log(this)
22 }
23 //fn() // window
24 
25 // call apply bind
26 function fn1(name,age){
27     console.log('name',name)
28     console.log('age',age)
29     console.log(this)
30 }
31 fn1.call({name:'aa',age:22},'lisi',32)
32 fn1.apply({name:'bb',age:23},['wangwu',33])
33 
34 var fn2=function(name,age){
35     console.log('name',name)
36     console.log('age',age)
37     console.log(this)
38 }.bind({name:'ahahah'})
39 fn2('2323',23)

3.作用域

a：没有块级作用域

b：只有函数和全局作用域

// 没有块级作用域
if(1){
    var a=100
}
console.log(a)

// 函数和全局作用域
var b =200
function fn(){
    var b=300
    console.log('fn',b)
}
console.log('global',b)
fn()

4.作用域链

直接上代码

 1 var a=1
 2 function fn1(){
 3     var b =2
 4     function fn2(){
 5         var c=3
 6         function fn3(){
 7             var d=4
 8             // 当前作用域没有定义的变量，即：“自由变量”
 9             // 会向父级作用域查找，一直找到window
10             console.log(a)
11             console.log(b)
12             console.log(c)
13             console.log(d)
14             // console.log(e)
15         }
16         fn3()
17     }
18     fn2()
19 }
20 fn1()

5.闭包

使用场景：1.函数作为返回值。2.函数作为参数传递

 1 // 函数作为返回值
 2 function fn(){
 3     var a=100
 4     return function(){
 5         console.log(a) // 向父级作用域中寻找，函数定义时的作用域
 6     }
 7 }
 8 var a=300
 9 var fn1=fn()
10 fn1() // 打印100
11 
12 // 函数作用参数
13 var fn2=fn()
14 function fn3(fn){
15     var a=400
16     fn()
17 }
18 fn3(fn2)

三解答题目：

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

a:变量定义

b:函数声明

个人理解：变量定义和函数声明在当前作用域会被提升到先声明变量和函数。但是函数表达式不会提升

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

构造函数--对象属性--普通函数--call--apply-bind

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

 1 // 这是一个错误的写法
 2 var a,i
 3 for (i = 0; i < 10; i++) {
 4   a=document.createElement('a')
 5   a.innerHTML=i+'<br>'
 6   a.addEventListener('click',function(e){
 7     e.preventDefault()
 8     console.log(i)
 9   })
10   document.body.appendChild(a)
11 }

 1 // 这是正确的写法
 2 var i,a
 3 for(i=1;i<10;i++){
 4   (function(i){
 5     a=document.createElement('a')
 6     a.innerHTML=i+'sdds<br>'
 7     a.addEventListener('click',function(e){
 8       e.preventDefault()
 9       console.log(i)
10     })
11     document.body.appendChild(a)
12   })(i)
13 }

4.如何理解作用域

a:自由变量

b:作用域链，即自由变量的茶轴

c:闭包的两个场景

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

 1 // 闭包实际应用中主要用于封装变量，收敛权限
 2 function IsFirstLoad(){
 3   var _list = []
 4   return function(i){
 5     if(_list.indexOf(i)>-1){
 6       return false
 7     } else {
 8       _list.push(i)
 9       return true
10     }
11   }
12 }
13 
14 var test=IsFirstLoad()
15 console.log(test(10))  // true
16 console.log(test(10))  // false
17 console.log(test(20))  //true

JS作用域和闭包-执行上下文

猜你喜欢