- 说一下对变量提升的理解
- 说明this几种不同的使用场景
- 创建10个
<a>标签,点击的时候弹出来对应的序号 - 如何理解作用域
- 实际开发中闭包的应用
执行上下文
//Demo
console.log(a) //undefined
var a = 100
fn('greentea') //'greentea' 20
function fn(name){
age = 20
console.log(name,age)
var age
}
- 范围:一段<script>或者一个函数
- 全局:变量定义,函数声明
- 函数:变量定义,函数声明,this,arguments
执行上下文,也就是将变量定义和函数声明在代码执行前就提前的拿出来,定义的定义,声明的声明,但是变量因为没赋值,所以a是undefined.fn函数已经声明过了,因此可以尽管去执行它.在它的函数中,也会执行上下文,同理,唯一注意的是,函数中的参数也相当于定义.
关于函数声明和函数表达式
fn()
function fn(){
}
fn1() //报错
var fn1 = function (){
}
两者最大的区别是函数表达式相当于变量定义,因此fn1 = undefined,在执行fn1()时,肯定会报错.
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
this的几种情况
- 作为构造函数执行
- 作为对象属性执行
- 作为普通函数执行
- call apply bind
call apply bind的区别
function fn1(name,age){
alert(name)
console.log(this)
}
fn1.call({x:100},'zhangsan',20)
fn1.apply({x:100},['zhangsan',20])
var fn2 = function (name,age){
console.log(this)
}.bind({y:200})
fn2('greentea',20)
this在函数中时,指向的是window,但是,当用call,apply,bind以后,传入的对象是this.
作用域和作用域链
首先,明确一点,JS无块级作用域
var a = 100
function fn(){
var b = 200
//当前作用域没有定义的变量,即'自由变量'
console.log(a)
console.log(b)
}
fn()
作用域链的概念就是当前作用域下没有这个变量或函数的时候,那么它会向它的父级作用域查找,如果没有会向父级的父级的作用域找....还有重要的一点就是,函数的父级作用域是在这个函数定义的时候,这个函数的父级作用域就已经确定了,而不是在这个函数执行的时候确定的.
闭包
function F1(){
var a = 100
//返回一个函数(函数作为返回值)
return function(){
console.log(a)
}
}
//f1得到一个函数
var f1 = F1()
var a = 200
f1() //100
在这段代码中,最后的结果是100,f1执行的函数是在F1中返回的匿名函数,这个匿名函数是在F1定义的,因此这个匿名函数的变量应该从它定义的父级中去找.
闭包的使用场景:
1.函数作为返回值
2.函数作为参数传递
function F1(){
var a = 100
//返回一个函数(函数作为返回值)
return function(){
console.log(a)
}
}
//f1得到一个函数
var f1 = F1()
function F2(fn){
var a = 200
fn()
}
F2(f1) //和上面同理,关键是找对了函数定义时的父级作用域
下面是一个例子
//举一个错误的例子
var i,a
for (i = 0; i < 10; i++) {
a = document.createElement('a')
a.innerHTML = i + '<br>'
a.addEventListener('click',function(e){
e.preventDefault()
alert(i)
})
document.body.appendChild(a)
}
//正确的例子
var i,a
for (i = 0; i < 10; i++) {
(function(i){
a = document.createElement('a')
a.innerHTML = i + '<br>'
a.addEventListener('click',function(e){
e.preventDefault()
alert(i)
})
document.body.appendChild(a)
})(i)
}
关于闭包的一个应用例子
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) //true
firstload(10) //false
firstload(20) //true
firstload(20) //false
你在isFirstLoad函数外,不能修改掉_list的值
