继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

JS基础面试题——作用域及闭包

SMILET
关注TA
已关注
手记 412
粉丝 80
获赞 441

这次主要用例子解释一下什么是作用域,什么是自由变量,什么是闭包,因为用一句话概括实在是概括不出来,欢迎有大神可以一句话解释的在评论区评论一下,十分感谢。

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

以下两种情况下会进行变量提示

  1. 变量定义

  2. 函数申明(要区分函数表达式和函数申明)

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

  1. 在构造函数中使用

  2. 作为对象属性时使用

  3. 作为普通函数时使用

  4. call,apply,bind

var a = {  name: 'A',  fun: function() {    console.log(this.name);
  }
};

a.fun();  //this === aa.fun.call({ name: 'B' });  //this === { name: 'B' }var fun1 = a.fun;
fun1(); //this === window

3. 创建10个a标签,点击每个弹出对应的序号

  • 错误的例子:

// 在点击a标签时每个输出的都是10var 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); //自由变量,会从父元素找i,点击时,其实i已经执行完变成了10
  });  document.body.appendChild(a);
}
  • 使用闭包改进的例子:

当然,在ES6中可以使用let

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);
}

4. 如何理解作用域

  1. 自由变量

  2. 作用域链,及自由变量的查找,找不到逐级向上找

  3. 闭包的两个场景:
    3.1 函数作为变量传递
    3.2. 函数作为返回值

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

// 判断一个数字是否出现过function isFirst() {  var _list = [];  return function(id) {    if (_list.indexOf(id) >= 0) {      return false;
    } else {
      _list.push(id);      return true;
    }
  };
}var first = isFirst();
first(10);
first(10);
first(20);



作者:石燕平_Leo
链接:https://www.jianshu.com/p/88d8879592ac

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP