22-扩展

最新推荐文章于 2024-11-02 12:42:04 发布

金霖海

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量225

点赞数

分类专栏：前端2 文章标签： es6 ecmascript javascript 前端

本文链接：https://blog.csdn.net/qq_33396183/article/details/132490418

版权

前端2 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

一进程与线程;同步与异步任务;宏任务与微任务

一、进程与线程

一个程序只有一个进程，一个进程包含多个线程，单线程和多线程

二、同步与异步任务

同步任务：是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。按顺序执行，可以看做单线程，javascript脚本语言是单线程,避免页面标签杂乱无序。
异步任务：执行顺序是不确定的，由触发条件决定，什么时间执行也是不确定的。

异步任务分类：

setTimeout/setInterval
axios的异步请求
Promise的异步处理机制

三、宏任务与微任务

异步任务分为宏任务和微任务

先执行微任务，再执行宏任务。

setTimeout/setInterval属于宏任务
Promise属于微任务

四、案例

(1).同步与异步任务，输出顺序

(2).Promise的异步处理机制

概念：Promise属于微任务，定时器setTimeout/setInterval是宏任务。先微任务，后宏任务。

程序的执行过程

先执行同步任务

再执行异步任务(先微任务,后宏任务)

二 H5自定义属性

html5中我们可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放

案例

    <!-- 
        标签的自定义属性
        html5中我们可以使用data-前缀设置标签的自定义属性,并保存数据
    -->
    <div id="div1" data-username="admin" data-index="1" data-msg="hello"></div>
    <button id="btn">按钮</button>
    <script>
        const obtn = document.querySelector("#btn")
        const oDiv = document.querySelector("#div1")
        obtn.onclick = function(){
            // 获取到标签上的自定义属性,结果是一个对象
            const obj = oDiv.dataset
            console.log(obj);
            //对象点属性拿到属性的值
            console.log(obj.username);
            console.log(obj.index);
            console.log(obj.msg);
        }
    </script>

三原型和原型链

原型概念

再es5和es6的面向对象编程中，所有的类都会产生原型对象。

当程序运行的时候，类的原型对象就确定了,这个类以及这个类的所有对象共享这个原型

要操作原型对象，我们有两种方案：

通过对象属性__propto__来获取原型
通过类名.prototype这个属性来获取原型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fQlbz241-1692931023320)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230629163535230.png)]

    <!-- 
        一 认识原型
        1.什么是原型,它在什么时候产生
        2.原型跟类和对象有什么关系
        3.对象的方法存储在哪里?
        4.怎么获取原型
        二 原型在项目中有什么用
           给类的对象添加共有的属性或方法 
     -->
    <script>
        class Student{

           constructor(name){
            this.name = name
           }
           eat(){
            console.log("吃饭");
           }
        }

        //获取原型的第一种方式
        console.log(Student.prototype);

        //创建student对象
        const stu1 = new Student("赵日天")
        const stu2 = new Student("李杀神")
       
        //获取原型的第二种方式
        console.log(stu1.__proto__);
        console.log(stu2.__proto__);

        //在原型上添加属性或方法
        stu1.__proto__.sex = "男"
        stu1.__proto__.run = function(){
            //哪个对象调用这个方法,this就是哪个对象
            console.log(this.name+"跑步");
        }


        console.log(stu1);
        console.log(stu2);

        //输出对象属性的值
        console.log(stu1.sex);
        console.log(stu2.sex);
        //调用对象的方法
        stu1.run()
        stu2.run()
    </script>

类、或者对象可以直接操作原型，将一些公共属性和行为放在原型对象身上。

原型链

    <!-- 
        原型链
     -->
    <script>
        class Student {
            constructor(name) {
                this.name = name
            }
            eat() {
                console.log("吃饭");
            }
        }


        class Person{
            constructor(age){
                this.age = age
            }
            study(){
                console.log("学习");
            }
        }


        //创建student对象
        const stu1 = new Student("赵日天")
        //创建Person对象
        const p1 = new Person(20)

        //修改stu1的原型指向
        stu1.__proto__ = p1

        //输出学生对象
        console.log(stu1);
        console.log(p1);

        //输出对象的属性
        console.log(stu1.name);
        console.log(stu1.age);
        stu1.study()
    </script>

总结：

当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，如果在Object原型中依然没有找到，则返回undefined。

练习：

创建一个Global类，并创建global对象。

创建Dog和Cat类,他们分别有看家lookHome和抓老鼠catchMouse的方法

创建dog和cat对象,并把这两个对象添加到global的原型上

通过global对象分别调用lookHome和catchMouse方法

四网络编程基础

1、软件结构

C/S结构：全称为Client/Server结构，是指客户端和服务器结构。常见程序有ＱＱ、迅雷等软件。

B/S结构：全称为Browser/Server结构，是指浏览器和服务器结构。常见浏览器有谷歌、火狐等。

两种架构各有优势，但是无论哪种架构，都离不开网络的支持。网络编程，就是在一定的协议下，实现两台计算机的通信的程序。

C/S:客户端/服务器结构,用户需要在设备上安装专门软件才可以使用
B/S:浏览器/服务器结构,用户不需要安装专门的软件,直接通过浏览器使用

2、网络编程三要素

a、协议

**网络通信协议：**通信协议是计算机必须遵守的规则，只有遵守这些规则，计算机之间才能进行通信。这就好比在道路中行驶的汽车一定要遵守交通规则一样，协议中对数据的传输格式、传输速率、传输步骤等做了统一规定，通信双方必须同时遵守，最终完成数据交换。

b、IP地址

IP地址：指互联网协议地址（Internet Protocol Address），俗称IP。IP地址用来给一个网络中的计算机设备做唯一的编号。假如我们把“个人电脑”比作“一台电话”的话，那么“IP地址”就相当于“电话号码”。

根据类型分：

IPv4：是一个32位的二进制数，通常被分为4个字节，表示成 a.b.c.d 的形式，例如 192.168.65.100 。其中a、b、c、d都是0~255之间的十进制整数，那么最多可以表示42亿个。

IPv6：由于互联网的蓬勃发展，IP地址的需求量愈来愈大，但是网络地址资源有限，使得IP的分配越发紧张。有资料显示，全球IPv4地址在2011年2月分配完毕。

为了扩大地址空间，拟通过IPv6重新定义地址空间，采用128位地址长度，每16个字节一组，分成8组十六进制数，表示成 ABCD:EF01:2345:6789:ABCD:EF01:2345:6789 ，号称可以为全世界的每一粒沙子编上一个网址，这样就解决了网络地址资源数量不够的问题。

常用命令

查看本机IP地址，在控制台输入：ipconfig
检查网络是否连通，在控制台输入：
    ping 空格 IP地址 
    ping 220.181.57.216
特殊的IP地址：
		192.172.8.3是路由器分配给我的本机ip
		127.0.0.1操作系统给电脑分配的ip
		localhost是127.0.0.1的别名

c、端口号

网络的通信，本质上是两个进程（应用程序）的通信。每台计算机都有很多的进程，那么在网络通信时，如何区分这些进程呢？

如果说IP地址可以唯一标识网络中的设备，那么端口号就可以唯一标识设备中的进程（应用程序）了。

端口号：用两个字节表示的整数，它的取值范围是0~65535。其中，0~1023之间的端口号用于一些知名的网 络服务和应用，普通的应用程序需要使用1024以上的端口号。如果端口号被另外一个服务或应用所占用，会 导致当前程序启动失败。

利用协议 + IP地址 + 端口号三元组合，就可以标识网络中的进程了，那么进程间的通信就可以利用这个标识与其它进程进行交互。

3、http协议

http是超文本传输协议,它是请求响应模式

https是http+ssl证书加密后协议

1 HTTP请求

浏览器地址栏输入服务器接口地址，浏览会给后端发送HTTP请求。

http请求，默认包含四部分信息

请求行

请求网址: http://127.0.0.1:3001/users
请求方法: GET
远程地址: 127.0.0.1:3001

请求头

//浏览器告诉服务器，浏览器可以接受什么数据
Accept: text/html,application/xhtml+xml,application/xml
//浏览器支持哪些压缩格式
Accept-Encoding: gzip, deflate, br
//浏览器目前的语言环境
Accept-Language: zh-CN,zh;q=0.9
//连接状态
Connection: keep-alive
//前端浏览器默认发送后端凭证
Cookie: SECKEY_ABVK=IE60kJEZFEiFwb06xArgyaXwqEWW0rVJTXK90U6amJo%3D;
//服务器ip:端口
Host: 127.0.0.1:3001
//浏览器信息
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

空行

空行是一个空白的内容，它将请求头数据和用户数据分开

请求体

前端用post请求来传输数据，数据会封装到请求体

2 HTTP响应

服务器只要接收到了请求,就要给出响应。

响应行

状态码：200
状态描述：OK

响应头

Content-Type:后端返回给前端数据是什么格式，浏览器会根据当前文件类型决定如何解析
Date：服务器响应日期。
Content-length:服务器返回前端数据多大。
Server:服务器是什么类型

空行

空行是为了分割响应头和消息体内容

消息体

后端响应的数据

4 状态码

2xx:请求已经成功

4xx：前端访问路径有问题

5xx：服务器内部出现错误

金霖海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录