《前端JavaScript面试技巧》学习笔记（3） 作用域和闭包

题目:

1: 说一下对变量提升的理解
2: 说明 this 的几种不同使用场景
3: 创建 10 个 < a > 标签,点击的时候弹出响应的序列号
4: 如何理解作用域
5: 实际开发中闭包的应用

知识点

执行上下文

• 范围: 一段< script >或者一个函数中
• 全局: 变量定义, 函数声明
• 函数: 变量定义, 函数声明, this, arguments
• PS:注意函数声明和函数表达式的区别

<script>
console.log(a); // undefind
var a = 100; 

fn('jiangdeng'); //jiangdeng 20
function fn(name) {
    // var age = undefind;
    age = 20;
    console.log(name,age);
    var age; //会被提到此函数内的顶部
}
<script>

• 解析 : 一个 < script > 标签内的所有代码,在一个< script >中定义一个全局的上下文;在执行第一行之前,首先会把所有的变量声明,函数声明拿出来;先把 var a 拿到上面来,这个时候还没给它赋值成100,先用undefind来代替一下;然后第五行有一个函数声明,把整个函数拿到上面来; 在执行这块的时候先做了两件事,把 a 的声明拿上来 并通过undefined赋值来占位,然后把函数拿到上面来;
• 注意: 写代码的时候要先声明,然后执行

---

函数声明方式

//fn(); 可以执行;执行的时候会把声明的函数提到前面去
function fn(){
    //函数声明
    console.log('函数声明的方式,函数可以前置执行')
}

//fn1(); 不能执行,走到 var fn1的时候fn1不是一个函数,这个时候fn1提到前面去就是 var fn1 = undefind;
var fn1 = function(){
    //函数表达式
    console.log('函数表达式的方式,函数不能前置执行')
}

console.log(a);
var a = 100; //会报错,原因同上
//相当于 var a = undefind;
//然后执行console.log(a)的时候 a 等于 undefind;>报错
//最后 a = 100;

// 用函数声明的方式相当于把fn拿到前面去了;
fn('jiangdeng'); //jiangdeng
function fn(name,age) {
    console.log(name,age);
}

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

• 在函数里面也是一样的,在执行之前,后面的 var age 会被提前到前面去;

---

this

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

var a = {
    name:'A',
    fn:function () {
        console.log(this.name)
    }
}
a.fn();//  "A"; this === a
a.fn.call({name:'B'}) //  "B"; this === {name:"B"}
var fn1 = a.fn;
fn1(); //  undefind; this === window;作为普通函数执行 这个时候的 this 是 window

回答问题:说明 this 的几种不同使用场景?

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行 这个时候的 this 是 window
• call apply bind

---

代码演示

• 构造函数中的this

function Foo(name,age) {
    this.name = name;
    this.age = age;
    return this;
}
var f = new Foo('jiangdeng',22);  

• 对象属性中的this

var obj = {
    name : 'A',
    printName : function(){
    console.log(this.name)
    }
}
//把函数作为对象属性来执行
obj.printName() // this指向obj这个对象

• 普通函数

function fn() {
    console.log(this) // this === window
}
fn() 

• call apply bind

function fn(name,age) {
    alert(name);
    console.log(this);
}
var fn1 = fn.call({a:100},'jiangdeng',22); //this === {a:100};

• bind ()创建一个函数的实例,其this值会绑定到传给bind()函数的值)

var fn = function(name,age){
    alert(name);
    console.log(this);
}.bind({a:100});
fn('jiangdeng',22)

作用域

• 没有块级作用域 (大括号是没办法约束里面的变量的)
• 只有函数和全局作用域

//没有块级作用域
if (true) {
    var a = 1000; //在括号里面和在括号外面声明变量没有区别
}
console.log(a)

//函数和全局作用域
var a = 1000;
function fn(){
    var a = 2000;
    console.log(a)
}
console.log(a) // 1000
fn() // 2000

作用域链

var a = 1000;
function fn(){
    var b = 2000;
    //当前作用域没有定义的变量,即自由变量
    console.log(a)
    console.log(b)
}
fn() //1000,2000

自由变量:当前作用域没有定义的变量,即自由变量
fn 作用域内没有定义a变量,就去它的父级作用域,即全局作用域去找 a ;
函数的父级作用域是什么? 就是函数在定义的时候父级作用域,不是在执行时候的父级作用域;

var a = 1000;
function F1() {
    var b = 2000;
    function F2() {
        var c = 3000;
        console.log(a); //a 是自由变量
        console.log(b); //b 是自由变量
        console.log(c);
    }
    F2()
}
F1() //1000 2000 3000

不要管 F1 ,F2 在什么地方执行,要看它们在哪里定义的
作用域链:一个自由变量不断的往它父级作用域找,形成一个链式结构

---

闭包

//闭包的使用场景：函数作为返回值
function F1() {
    var a = 1000;

    //返回一个函数(函数作为返回值)
    return function() {
        console.log(a) // a 是自由变量,去它的父级作用域寻找
    }
}
//f1 得到一个函数
var f1 = F1(); //F1执行后返回的是一个函数,把它赋值给f1
var a = 2000;
f1(); //1000

//补充一点知识:F1()执行返回的结果是 {console.log(a)},
//为什么不是1000呢?因为F1虽然执行了,但是里面的函数还没有执行,要想得到1000必须还得加一个(),如F1()();

• 一个函数的作用域和它的父级作用域在它定义的时候就确定好了,所以确定函数的作用域不看它执行时候的作用域,要看它定义时候的作用域 **;

闭包的使用场景:

• 函数作为返回值(如上面demo)
• 函数作为参数传递(把函数传到另一个函数中执行),跟上面类似;

function F1() {
    var a = 100;
    return function() {
        console.log(a)// a 是自由变量,去它的父级作用域寻找
    }
}
var f1 = F1();
function F2(fn) {
    var a = 200;
    //虽然fn()执行的结果(f1传入后)是返回下列注释的函数,但并没有什么卵用,因为函数的作用域不看它执行时候的作用域,看它声明定义时候的作用域
    fn() // >>function () {console.log(a)}
}
F2(f1) // 100

题目解答:

1: 说一下对变量提升的理解
考察的是对执行上下文的理解,主要内容是:

• 变量定义
• 函数声明 ,函数表达式
• 应用的场景,一是script标签内,一是构造函数中 ,变量的声明和定义都会被提前

---

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

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行 这个时候的 this 是 window
• call apply bind

//构造函数
  function Foo(name){
    this.name=name
  }
  var f=new Foo('zhangsan')
  //对象属性
  var obj={
    name:'zhangsan',
    printName:function(){
      console.log(this.name)
    }
  }
  obj.printName()
  //普通函数
  function fn(){
    console.log(this);
  }
  fn()

  //call apply bind
  function fn1(name,age){
    alert(name)
    console.log(this)
  }
  fn1.call({x:100},'zhangsan',20)

  var fn2=function (name,age){    //bind在函数声明的形式后不可用，必须是函数表达式
    alert(name)
    console.log(this)
  }.bind({y:200})
  fn2('zhangsan',20)

---

3: 创建 10 个 a 标签,点击的时候弹出响应的序列号

//这是错误的写法
var i;
for (i = 0; i < 10; i++) {
   var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function(e) {
        e.preventDefault();
        alert(i); // i 自由变量,要去父作用域去寻找
    })
    document.body.append(a);
}

错误写法的结果是每个a标签上点击的时候,弹出来的都是10
错误的原因: alert(i) 里面的 i 是一个自由变量;会去 function 的父作用域找,这个时候 i 早就成 10了 (本来是9,自增1);

//正确写法
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)
}

把 i 作为参数传进函数里面,让它作为函数的作用域中的一个变量;当 i 等于0的时候,存储这个变量,然后执行...这里相当于生成了十个函数,每次执行的参数都不同

---

4: 如何理解作用域

• 自由变量
• 作用域链 , 即自由变量的查找
• 闭包的两个场景

---

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

• 闭包实际应用中主要用于封装变量,收敛权限;
• 在下面的例子中,在isFirstLoad函数的中能用到的就只有 return 回的那一部分;而_list在外面是无法修改到的

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