JS难点同步异步和作用域与闭包及原型和原型链详解

2024-10-01 02:04:20

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是顶级构造函数, 它自己是自己的构造函数, 同时自己是自己的实例对象(通俗来说, 就是它自己创建了自己)

完整原型示意图:

以上就是JS难点同步异步的作用域与闭包原型及原型链详解的详细内容，更多关于JS同步异步作用域与闭包原型及原型链的资料请关注我们其它相关文章！

详解JavaScript原型与原型链

正如一些面向对象语言中所实现的那样,在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复.实现类型检查与实现更加清晰地代码结构.在JavaScript中,继承是通过原型链实现的.了解JavaScript的继承与原型链之前首先需要了解JavaScript中对象创建的方式. 在JavaScript中创建对象 JavaScript中对象创建的方式有两种:工厂方法(Factory Functions).构造器方法(Constructor Functions) . 工
五句话帮你轻松搞定js原型链

原型链是一种机制,指的是JavaScript每个对象包括原型对象都有一个内置的[[proto]]属性指向创建它的函数对象的原型对象,即prototype属性. 作用:原型链的存在,主要是为了实现对象的继承. 一. 记住以下5句话,轻松搞定js原型链 Function 和 Object 都是构造函数所有的构造函数都是Function new出来的(Function自己new了自己):所有的原型对象都是Object new出来的(Object new了自己的原型对象) 每一个构造函数都有一个pro
一文秒懂JavaScript构造函数、实例、原型对象以及原型链

1概述 ES6, 全称 ECMAScript 6.0 ,2015.06 发版.在ES6之前,对象不是基于类创建的,而是用一种称为构造函数的特殊函数来定义对象和它们的特征. 2构造函数构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面. // 利用构造函数创建对象 function Person(uname, age) { this.uname = uname; this.age
图解JS原型和原型链实现原理

在我初学 JS 语言的继承机制原型和原型链的时候,我一直理解不了这种设计机制,再加上之前原有对 Java继承的理解,在学习 JS 继承机制的设计上踩了一个大坑,很多知识点前期都是死记硬背,无法真正的理解它的设计思想. JS 中的继承机制思想可以说是学习 JS 的一个核心思想,更可以说是 JS 中的一个命脉,往往这些复杂.抽象的继承关系,以及专业术语.代名词确成为了困扰初学者的绊脚石.当我真正理解它的设计思想时,其实并没有那么复杂,而且觉得非常简单. 在写这篇 JS 的原型和原型链的文章之前,我在
带你理解JavaScript 原型原型链

目录一.原型.原型链相等关系理解二:原型.原型链的意思何在看完这篇文章,你会发现,原型.原型链原来如此简单! 上面经典的原型链相等图,根据下文的学习,你会轻易掌握. 一.原型.原型链相等关系理解首先我们要清楚明白两个概念: js分为函数对象和普通对象,每个对象都有__proto__属性,但是只有函数对象才有prototype属性 Object.Function都是js内置的函数, 类似的还有我们常用到的Array.RegExp.Date.Boolean.Number.String 这两
彻底理解JavaScript的原型与原型链

目录前言基础铺垫 prototype contructor属性 __proto__ 原型链提高总结后语前言原型与原型链知识历来都是面试中考察的重点,说难不算太难,但要完全理解还是得下一定的功夫.先来看一道面试题开开胃口吧: function User() {} User.prototype.sayHello = function() {} var u1 = new User(); var u2 = new User(); console.log(u1.sayHello === u2
JavaScript 原型与原型链详情

目录 1.prototype(显式原型) 2.__proto__(隐式原型) 3.constructor(构造函数) 4.new的原理 5.原型链 5.1 原型链的作用 5.2 构造函数的__proto__是什么呢? 6.总结前言: JavaScript常被描述为一种「基于原型的语言」--每个对象都拥有一个「原型对象」,对象以其原型为模板.从原型继承属性和放法.原型对象也可能拥有原型,并从中继承属性和方法,一层一层以此类推.这种关系常被称为「原型链」,它解释了为何一个对象会拥有定义在其他对象中
浅谈JS的原型和原型链

1.原型prototype javascript中所有函数都具有这个属性,所有具有prototype属性的对象都是一个函数.prototype的作用是向对象添加一个方法/属性. function persion(){} persion.prototype.name = "xiaoming" console.log(persion.prototype)//{name: "xiaoming", constructor: ƒ} 2.原型指针:__proto__ 如果将上面
一篇文章让你搞懂JavaScript 原型和原型链

本文由葡萄城技术团队原创并首发转载请注明出处:葡萄城官网与多数面向对象的开发语言有所不同,虽然JavaScript没有引入类似类的概念(ES6已经引入了class语法糖),但它仍然能够大量的使用对象,那么如何将所有对象联系起来就成了问题.于是就有了本文中我们要讲到的原型和原型链的概念. 原型和原型链作为深入学习JavaScript最重要的概念之一,如果掌握它了后,弄清楚例如:JavaScript的继承,new关键字的原来.封装及优化等概念将变得不在话下,那么下面我们开始关于原型和原型链的介绍
全面解析js中的原型,原型对象,原型链

理解原型我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法.看如下例子: function Person(){ } Person.prototype.name = 'ccc' Person.prototype.age = 18 Person.prototype.sayName = function (){ console.log(this.name); } var person1 = ne