Javascript基础知识点整理二：作用域和闭包

IFE     2019年03月21日     分类：   前端知识体系     标签：   javascript     浏览量：   1600

1. 作用域

• js有全局作用域、函数作用域、块级作用域(ES6)

if (true) {
  var firstname = "Foo";
}
console.log(firstname);// Foo
if(true){
  let lastname = "Bar"
}
console.log(lastname); // lastname is not defined

• 自由变量，指当前作用域没有定义的变量
• 作用域链，即自由变量的查找：当前作用域查找不到会去父级作用域查找
• 作用域是词法作用域，函数的父级作用域是函数定义时就确定了

2. 变量提升

• 在script和各个函数中 变量定义、函数声明 会被提前
• 全局：变量定义、函数声明会被提前
• 函数：变量定义、函数声明、this、arguments会被提前

console.log("fn1")//undefined
console.log(fn) // ƒ fn() {//声明}
function fn () {
  //声明
}
var fn1 = function () {
  //表达式
}

3. this的使用场景

this要在执行时才能确认值，定义时无法确认
使用场景：

• 作为构造函数执行——this指向new出来的对象
• 作为对象属性执行——this指向这个对象
• 作为普通函数执行(this=window)——this指向全局对象
• call apply bind——this为指定的对象
• 作为一个DOM事件处理函数——当函数被用作事件处理函数时，它的this指向触发事件的元素

4. 闭包

• 闭包：闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

• 使用场景：函数作为返回值、函数作为参数传递。

• 作用：封装变量，收敛权限。
• 副作用：外部函数返回后，外部函数执行环境的作用域链会被销毁，但它的活动对象仍然会留在内存中！直到匿名函数被销毁后，外部函数的活动对象才会被销毁！导致闭包只能取得外部包含函数中任何变量的最后一个值（因为直到外部函数执行环境被销毁，匿名函数还在引用外部函数的活动对象）

应用一：创建10个a标签点击执行alert第几个

var i;
for (i = 0; i < 10; i++) {
  (function (i) { //这里声明了10个函数
    //函数作用域
    var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click', function (e) {
      e.preventDefault();
      alert(i); //i是自由变量，要去父作用域获取值
    })
    document.body.appendChild(a);
  })(i);
}

应用二：判断first load

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的值

登陆后才可以评论