前端系列之---javascript作用域和闭包

知识点

执行上下文

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

全局：变量定义、函数声明   <script>

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

console.log(a);//undefined
var a = 100;

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

 

在上面这段<script>中。执行前，先把变量定义拿出来，变量a拿出来并赋值undefined；函数声明fn拿出来，把函数体赋值给fn。所以执行到第一行的时候a是undefined。

在函数内部。先把变量定义age拿出来，赋值成undefined；this复制成fn对象，arguments复制成【name】。但是函数内第一行紧接着赋值成20了，所以age是20，name是zhangsan

 

函数声明和函数表达式区别

Function fuc（）{} 函数声明

Var func = function（）{} 函数表达式

fn();//不会报错
function fn() {
    //函数声明
}

fn1();//会报错
var fn1 = function () {
    //函数表达式
}

 

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

 

作为构造函数执行

作为对象属性执行

作为普通函数执行

Call apply bind

作用域

Js没有块级作用域，只有函数作用域和全局作用域

所以在块里面声明的变量和在块外面声明的一样，所以尽量不要在块里面声明变量。

函数里面声明的变量在函数外面是访问不到的，是受保护的。

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

 

作用域链

var a =100;
function fn() {
    var b = 200;
    //当前作用域没有定义的变量，叫自由变量
    console.log(a); //函数作用域内并没有定义变量a，去它的父级作用域找，父级作用域指函数定义时的作用域，

    console.log(b);
}
fn();

 

var a =100;
function F1() {
    var b=200;
    function F2() {
        var c =300;
        console.log(a);
        console.log(b);
        console.log(c);
    }
    F2();
}
F1();

 

闭包

function F1() {
    var a =100;
    //返回一个函数
    return function () {
        console.log(a);
    }
}
//得到一个函数
var f1 =F1();
var a =200;
f1();

 

 

使用场景：函数作为返回值

函数作为参数传递

//1.函数作为返回值
//2.函数作为参数传递

function F1() {
    var a =100;
    //返回一个函数
    return function () {
        console.log(a);
    }
}
//得到一个函数
var f1 =F1();
function F2(fn) {
    var a =200;
    fn();
}
F2(f1); //100

 

 

说一下对变量提升的理解

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

创建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)

}

 

如何理解作用域

自由变量

作用域链，即自由变量的查找

闭包的两个场景

实际开发闭包的应用

stringObject.indexOf(searchvalue,fromindex)

//闭包实际使用中主要用于封装变量，收敛权限
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