JS难点同步异步和作用域与闭包及原型和原型链详解-编程学习网

JS三座大山

同步异步

前端中只有两个操作是异步的:

定时器异步执行;
ajax异步请求

编译器解析+执行代码原理:

1.编译器从上往下逐一解析代码

2.判断代码是同步还是异步

同步：立即执行
异步：不执行。放入事件队列池

3.等所有同步执行完毕开始执行异步

同步异步区别

api : 异步有回调，同步没有回调

性能：异步性能好（不阻塞线程）同步会阻塞线程

顺序：同步有序执行，异步无序执行

另:回调函数：如果一个函数的参数是一个函数，那么这个参数函数叫做回调函数

作用域、闭包

函数作用域链

只有 var 声明的变量认的是函数作用域
只有函数才能开辟新的函数作用域
默认全局区域，我们称之为0级作用域，在0级上声明的函数，会开一个新的作用域，我们称之为1级作用域
在1级里声明的函数，开辟的函数开辟作用域，我们就2级作用域，以此类推像这样的作用域
像一个链条一样称之为作用域链

在这里插入图片描述

块作用域

1.一个 {} 就是一个块级作用域，let 认块级作用域

2.对于let而言，默认的全局也称之为0级块作用域，然后除了对象以外，大括号开辟新的块作用域，0级上开辟的就是1级，1级里开辟的就是2级以此类推

3.跟我们之前学的函数作用域链是一样的，只不过函数作用域只有函数开辟函数作用域，块作用是大括号开辟块作用域，var认函数作用域，let认块级作用域

闭包

闭包就是一个函数, 能够读取其他函数内部变量的函数

代码示例:


    function foo () {
      // foo的内部变量
      let num = 10
      // 这个inner就叫闭包
      function inner() {
        console.log(num)
      }
    }

闭包有什么用呢？

闭包相当于是沟通外界和函数内部的桥梁
也就是使用闭包就可以让外界访问到函数内部的变量了

闭包和直接返回值有差别

直接返回值，其实本质上只是返回这个值的数据，后面的更改跟函数内部的变量没有任何关系

所以用闭包，就能让外界间接的访问到函数内部的变量

闭包的几种写法

简单来说：只要符合闭包特征的都算闭包

闭包：是一个函数，一个能让外界访问函数内部变量的函数

闭包作用1：延长变量生命周期

生命周期：指从声明到销毁的周期

全局变量生命周期从网页打开到网页结束

局部变量生命周期从它所在的作用域开始到结束

正是因为闭包能延长变量的生命周期，所以外界依然能一直访问局部变量

所以大量使用闭包，可能会导致内存泄漏

内存泄漏：一个数据后面已经不需要用了，但是它还占着内存空间，没有被回收

解决办法：

把闭包赋值为null即可
赋值为null，就代表这个数据没有“人”引用了，没人引用了那么就会被标记为“垃圾”，然后会被GC在合适的时候回收
GC：垃圾回收机制
chrome浏览器用了这个机制

闭包作用2：限制访问

把变量变为局部变量外界就无法直接访问

它只能通过我们写的闭包（桥梁）来间接访问，这样做我们就可以对闭包里面做一些限制，这样就起到了限制访问的目的

闭包调用注意事项

注意：

产生闭包的外层函数调用多少次，就会产生多少个闭包，那么到时候操作的是不同的数据，

如果产生闭包的外层函数调用1次，那么就只产生1个闭包，到时候操作的数据还是同一个

闭包解决用var导致下标错误的问题


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    li {
      width: 30px;
      height: 30px;
      background-color: yellow;
      line-height: 30px;
      text-align: center;
      float: left;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <script>
    // 以前有let吗？没有，所以我们看用var如何解决下标问题
    // 找到所有的li
    var lis = document.getElementsByTagName('li')
    for (var i = 0; i < lis.length; i++) {
      // 现在这里的i，只有1个变量，所以最终点击的时候，大家访问的都是一个i
      // 而i最终值是5，所以无论点谁都是5
      // 解决办法：我有5个li就要有5个变量，变量的值分别是0,1,2,3,4
      // 如何才能产生5个不一样的变量？就要开辟函数作用域
      (function () {
        // 因为这个循环会产生5个自执行函数
        // 就意味着有5个不同的index变量
        // 然后它的值需要分别是0,1,2,3,4，而i的值刚好是0,1,2,3,4
        // 所以把i赋值给index即可
        var index = i
        // 给每个li加点击事件
        lis[i].onclick = function () {
          alert(index)
        }
      })()
    }
  </script>
</body>

</html>

投票机


    // 要做一个能投票，能得到当前票数的功能
    function votor() {
      // 有一个变量，用来存票数
      let ticket = 0
      return {
        getTicket: function () {
          console.log('当前票数为：' + ticket)
        },
        // 投票
        add: function () {
          ticket++
        }
      }
    }
    let tp = votor()
    tp.add()
    tp.add()
    tp.add()
    tp.add()
    tp.getTicket()

闭包两个面试题


		// 思考题 1：
        window.name = "The Window"; 
        let object = {
            name: "My Object",  
            getNameFunc: function () { 
                return function () {
                    return this.name;
                };
            }
        };
        console.log(object.getNameFunc()());  
                 // 思考题 2：
        window.name = "The Window";
        let object = {
            name: "My Object",  
            getNameFunc: function () { 
                let that = this; 
                return function () {
                    return that.name;
                };
            }
        };
        console.log(object.getNameFunc() ());

原型、原型链

原型对象

作用:

构造函数中共有的属性和方法添加到原型对象中，可以节省内存

原型链

无论任何一个对象开始出发, 按照 proto 开始向上查找, 最终都能找到 Object.prototype, 这个使用 __proto__串联起来的对象链状结构, 叫做原型链

完整原型链图

示意图前置知识:

每一个对象都有__proto__属性, 指向所属构造函数的原型对象;

每一个对象都有prototype属性, 是一个对象;

函数也是对象;

当一个对象, 没有准确的构造函数来实例化的时候, 我们都看作是内置构造函数

Object 的实例;Object的protype是顶级原型对象, 他的__protype__指向是null;

Function是顶级构造函数, 它自己是自己的构造函数, 同时自己是自己的实例对象(通俗来说, 就是它自己创建了自己)

完整原型示意图: