前端基础:1-2 面向对象 + Promise

面向对象

对象是什么?为什么要面向对象?

通过代码抽象,进而藐视某个种类物体的方式

特点:逻辑上迁移更加灵活、代码复用性更高、高度的模块化
对象的理解
  • 对象是对于单个物体的简单抽象
  • 对象是容器,封装了属性 & 方法
    • 属性:对象状态
    • 方法:对象的能力 & 行为
//简单对象
const O = {name:'zhangsan',changeName: name => `新的${name}`
}
//函数对象
function O(){this.name = '张三'this.changeName = name => `新的${name}`
}

构造函数 - 生成对象 => 实例

  • 需要一个模板
  • 类即对象模板
  • js本质并不是基于类,而是基于构造函数(创建对象的特殊函数)+原型链
function Course() {this.name = 'zhangsan';this.changeName = name => `新的${name}`
}
const course = new Course(args);

Course本质就是构造函数

  • 函数体内使用的this,指向要生成的实例
  • 生成对象用new来实例化
  • 可以初始化传参
如果构造函数不初始化,可以使用具有相同功能吗? --无法具有
如果在项目中需要使用,且不希望外界感知的情况下,如何拿到实例后的对象? => 单例模式 (编写底层api代码时,尽量做到不让外部去感知区分内部类型)
function Course(){const _isClass = this instanceof Courseif(!_isClass){return new Course()}this.name = 'zhangsan'this.changeName = name => `新的${name}`
}
//使用
const course = Course()
思考:new是什么?/ new的原理? / new时候做了什么?
function Course(){}
const course = new Course()
  • 结构上:创建了一个空对象,作为返回的对象实例
  • 属性上:将生成空对象的原型对象指向了构造函数的prototype属性(course._ proto _=== Course.prototype)
  • 关系上:将当前对象实例赋给了内部的this
  • 生命周期上:执行了构造函数的初始化代码
function usernew(obj,...args){const newObj = Object.create(obj.prototype)const result = obj.apply(newObj,args)return typeof result === 'object' ? result : newObj
}
追问:实例属性影响 —— 独立的
function Course(teacher, leader) {this.teacher = teacher;this.leader = leader;
}
const course1 = new Course('张三', '王五'); // course1.leader => 王五
const course2 = new Course('李四', '赵六'); // course2.leader => 赵六
course2.teacher = 'xxxx'; // course1.teacher => 李四
constructor是什么?
 function Course(teacher, leader) {this.teacher = teacher;this.leader = leader;}const course = new Course('张三', '李四');
  • 每个对象在创建时,会自动拥有一个构造函数属性constructor

  • constructor源自原型对象,指向了构造函数的引用

  • 实例获得了模版的属性 => (大胆点)继承了类的属性

在这里插入图片描述

继承

js如何实现继承

在原型对象的所有属性方法,都可以被实例所共享
    function Game() {this.name = 'lol';}Game.prototype.getName = function() {return this.name;}// LOLfunction LOL() {};LOL.prototype = new Game();LOL.prototype.constructor = LOL;const game = new LOL();// 本质:重写了原型对象方式,将父对象的属性方法,作为自对象原型对象的属性方法,同时重写构造函数
追问:原型链直接继承有什么缺点
    function Game() {this.name = 'lol';this.skin = ['s'];}Game.prototype.getName = function() {return this.name;}// LOLfunction LOL() {};LOL.prototype = new Game();LOL.prototype.constructor = LOL;const game1 = new LOL();const game2 = new LOL();game1.skin.push('ss');// 本质:重写了原型对象方式,将父对象的属性方法,作为自对象原型对象的属性方法,同时重写构造函数
    1. 父类属性一旦赋值给到子类的原型属性,此时属性属于子类的共享属性了
    1. 实例化子类时,无法向父类进行传参

解决方法:构造函数继承

经典继承:在子类的构造函数内部调用父类的构造函数
    function Game(arg) {this.name = 'lol';this.skin = ['s'];}Game.prototype.getName = function() {return this.name;}function LOL(arg) {Game.call(this, arg);}const game3 = new LOL('arg');// 解决了共享属性问题 + 子向父传参的问题

追问:原型链上的共享方法无法被读取继承,如何解决?

组合继承
    function Game(arg) {this.name = 'lol';this.skin = ['s'];}Game.prototype.getName = function() {return this.name;}function LOL(arg) {Game.call(this, arg);}LOL.prototype = new Game();LOL.prototype.constructor = LOL;const game4 = new LOL('arg');

追问:组合继承方式就没有缺点吗? 问题在于:无论何种场景,都会调用两次父类的构造函数

解决方案:寄生组合继承
    function Game(arg) {this.name = 'lol';this.skin = ['s'];}Game.prototype.getName = function() {return this.name;}function LOL(arg) {Game.call(this, arg);}LOL.prototype = Object.create(Game.prototype);LOL.prototype.constructor = LOL;const game5 = new LOL('arg');

拔高:如何实现多重继承?

    function Game(arg) {this.name = 'lol';this.skin = ['s'];}Game.prototype.getName = function() {return this.name;}function Store() {this.shop = 'steam';}Game.prototype.getPlatform = function() {return this.shop;}function LOL(arg) {Game.call(this, arg);Store.call(this, arg);}LOL.prototype = Object.create(Game.prototype);Object.assign(Store.prototype,LOL.prototype);LOL.prototype.constructor = LOL;

浏览器原理

在这里插入图片描述

Promise - 可以处理回调地狱

    1. promise状态 - pending | fulfilled | rejected
      executor: new Promise的时候立即执行,接收两个参数 resolve | reject
    1. promise默认状态?状态是如何流转的? - 默认:pending 状态流转:pending => fufilled | pending => rejected
      内部维护成功value:undefined | thenable | promise
      内部维护失败变量reason
    1. promise返回值? - then方法:接收onFulfilled 和 onRejected
      如果then时,promise已经成功,执行onFulfilled,参数value
      如果then时,promise已经失败,执行onRejected,参数reson
      如果then中有异常,执行onRejected
Promise 方法
  1. Promise.all 全部执行完成
  2. Promise.race 有一个执行完成
手写promise
    const PENDING = 'PENDING';const FULFILLED = 'FULFILLED';const REJECTED = 'REJECTED';class Promise {constructor(executor) {// 1. 默认状态 - PENDINGthis.status = PENDING;// 2. 内部维护的变量值this.value = undefined;this.reason = undefined;// 成功的回调let resolve = value => {// 单向流转if (this.status === PENDING) {this.status = FULFILLED;this.value = value;}}// 失败的回调let reject = reason => {// 单向流转if (this.status === PENDING) {this.status = REJECTED;this.reason = reason;}}try {executor(resolve, reject);} catch (error) {reject(error);}}then(onFulfilled, onRejected) {if (this.status === FULFILLED) {onFulfilled(this.value);}if (this.status === REJECTED) {onRejected(this.reason);}}}// 追问:异步怎么办?const PENDING = 'PENDING';const FULFILLED = 'FULFILLED';const REJECTED = 'REJECTED';class Promise {constructor(executor) {// 1. 默认状态 - PENDINGthis.status = PENDING;// 2. 内部维护的变量值this.value = undefined;this.reason = undefined;// 存放回调this.onResolvedCallbacks = [];this.onRejectedCallbacks = [];// 成功的回调let resolve = value => {// 单向流转if (this.status === PENDING) {this.status = FULFILLED;this.value = value;this.onResolvedCallbacks.forEach(fn => fn());}}// 失败的回调let reject = reason => {// 单向流转if (this.status === PENDING) {this.status = REJECTED;this.reason = reason;this.onRejectedCallbacks.forEach(fn => fn());}}try {executor(resolve, reject);} catch (error) {reject(error);}}then(onFulfilled, onRejected) {if (this.status === FULFILLED) {onFulfilled(this.value);}if (this.status === REJECTED) {onRejected(this.reason);}if (this.status === PENDING) {// 存放队列this.onResolvedCallbacks.push(() => {onFulfilled(this.value);});this.onRejectedCallbacks.push(() => {onRejected(this.reason);});}}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/14355.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何安装 Docker

引言 - 介绍 Docker 技术的重要性和应用场景 - 简要解释 Docker 的工作原理和优势 Docker 的安装 Docker 在不同平台上的安装方法(Windows、Mac、Linux) Docker 是一个开源的容器化平台,可以帮助开发人员和运维团队更轻松地打包、交付和运行…

python 装饰器 带参数和不带参数

装饰器是Python语言中一种特殊的语法,用于在不修改原函数代码的情况下,为函数添加额外的功能或修改函数的行为。通过装饰器,我们可以在函数执行前后执行一些额外的代码,或者修改函数的参数。 要使用装饰器引入函数和参数&#xf…

Linux_应用篇(07) 系统信息与系统资源

在应用程序当中,有时往往需要去获取到一些系统相关的信息,譬如时间、日期、以及其它一些系统相关信息,本章将向大家介绍如何通过 Linux 系统调用或 C 库函数获取系统信息, 譬如获取系统时间、日期以及设置系统时间、日期等&#x…

restTemplate返回报文乱码问题

默认服务端使用UTF8编码 排查1&#xff1a; 请求前手动设置UTF-8编码解析报文 RestTemplate restTemplate new RestTemplate(); restTemplate.getMessageConverters().set(1, new StringHttpMessageConverter(StandardCharsets.UTF_8)); ResponseEntity<String> excha…

三能一体运营体系助力政企支撑水平提升

生产力的发展是现代社会孜孜不倦的追求&#xff0c;由此产生了我们熟悉的“机械化、电子化、信息化”乃至现今正在发生的“智能化”四次工业革命。这些是由技术的突破性发展带来的&#xff0c;但我们也注意到生产力发展的另一个助力&#xff0c;即生产效率的提升&#xff0c;19…

【MySQL数据库】mysql日志管理、备份与恢复

mysql日志管理、备份与恢复 MySQL数据库备份及日志一、数据库备份分类&#xff1a;如何选择逻辑备份策略 (频率)完全备份与恢复备份恢复 增量备份与恢复实现增量备份 基于时间点与位置恢复 二.MySQL日志管理 MySQL数据库备份及日志 在生产环境中&#xff0c;数据的安全性是至关…

在未来你将何去何从?

在数字化的浪潮中&#xff0c;信息技术行业无疑是推动全球经济和社会发展的重要动力。随着科技的不断迭代与进步&#xff0c;云计算、大数据、人工智能&#xff08;AI&#xff09;、物联网&#xff08;IoT&#xff09;、5G通信和区块链等技术已经深入到我们生活的每一个角落&am…

鸿蒙原生应用元服务开发-鸿蒙真机运行项目实战与注意事项

一、解压项目注意项目包不能为中文 二、用数据线将装好DevEco Studio的电脑与设置为开发者模式的鸿蒙手机相连接。 三、将项目包托进DevEco Studio 中 注意项目包文件不能有嵌套 四、查看设备运行 五、点击项目结构 六、勾选红色框圈部分 登录开发者账号 七、选择好公司 八、等…

我是如何使用 Next.js14 + Tailwindcss 重构个人项目的

前言 去年在学习 React 和 Nest 的时候&#xff0c;参考了大佬 imsyy 的项目 DailyHot&#xff0c;以此项目的灵感基于 React 开发&#xff0c;完成之后就没怎么在意。 后来发现这个项目还有点小流量&#xff0c;每天差不多 200-400 的 IP 访问量&#xff1a; 我又抽时间优…

深度学习之基于Pytorch框架手写数字识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 手写数字识别是数字图像处理领域的一个经典问题&#xff0c;也是深度学习技术的一个常用应用场…

AWS计算之Amazon Lightsail

Amazon Lightsail是亚马逊提供的一种简化的虚拟私有服务器(VPS)服务&#xff0c;旨在帮助开发人员快速、轻松地搭建和管理虚拟服务器。Lightsail提供了预配置地计算资源、网络、存储和数据传输选项&#xff0c;用户可以通过简单的界面选择所需的配置&#xff0c;轻松部署应用程…

51汇编--数码管时钟

实现一个24小时制的电子钟程序&#xff0c;在实验箱的6个数码管上显示时分秒&#xff08;用定时器0中断更新计时时间&#xff0c;时间值以压缩BCD码形式保存在内部RAM的30H31H和32H单元&#xff09;。 PC机可通过串行口发送要设置的时间给单片机&#xff08;发送的时间格式为压…

java 重写接口的default方法

在Java 8中&#xff0c;接口可以包含默认方法&#xff08;default methods&#xff09;&#xff0c;这些方法可以有默认实现。如果一个类实现了包含默认方法的接口&#xff0c;并且没有提供这个方法的实现&#xff0c;则会使用接口中的默认实现。 如果需要重写接口中的默认方法…

【MySQL精通之路】SQL优化(1)-查询优化(11)-多范围查询优化

主博客&#xff1a; 【MySQL精通之路】SQL优化(1)-查询优化-CSDN博客 上一篇&#xff1a; 【MySQL精通之路】SQL优化(1)-查询优化(10)-外部联接简化-CSDN博客 下一篇&#xff1a; 当基表很大且未存储在存储引擎的缓存中时&#xff0c;使用辅助索引上的范围扫描读取行可能会…

uniappx 获取设备唯一标识(OAID、AAID、AndroidID、IMEI等) Ba-IdCode-U

简介&#xff08;下载地址&#xff09; Ba-IdCode-U 是一款可以获取国内各大手机厂商 OAID&#xff08;开放匿名设备标识&#xff09;及海外手机平台 AAID&#xff08;安卓广告标识&#xff09;的uniapp插件。另外也支持获取 IMEI/MEID、AndroidID、WidevineID、PseudoID、GUI…

Spring Cloud Alibaba-06-Sleuth链路追踪

Lison <dreamlison163.com>, v1.0.0, 2024.4.03 Spring Cloud Alibaba-06-Sleuth链路追踪 文章目录 Spring Cloud Alibaba-06-Sleuth链路追踪为什么使用链路追踪常见链路追踪解决方案Sleuth概述概述Sleuth术语 Sleuth Zipkin 原理Sleuth原理简述Zipkin 原理简述 Sleut…

Python库之`lxml`的高级用法深度解析

Python库之lxml的高级用法深度解析 简介 lxml是一个功能强大的第三方库&#xff0c;它提供了对XML和HTML文档的高效处理能力。除了基本的解析和创建功能外&#xff0c;lxml还包含了一些高级用法&#xff0c;这些用法可以帮助开发者在处理复杂文档时更加得心应手。 高级解析技…

代码随想录——路径总和(Leetcode113)需要回顾

题目链接 递归 本题递归需要遍历整棵树&#xff0c;所以递归没有返回值 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* T…

苹果M4性能分析:进步神速?还有多少空间?

2024年初&#xff0c;苹果推出了M4处理器&#xff0c;令人意外的是&#xff0c;它的发布距离M3发布仅仅过去了半年时间。更让人惊讶的是&#xff0c;M4首次亮相于iPad Pro。这一新处理器不仅仅是M3的简单升级版本&#xff0c;而是一次全面的架构优化。本文将详细分析M4处理器的…

Vue基础(1)数据绑定

一. 文本插值 普通文本可以使用双大括号 {{ }} &#xff0c;要想插入 HTML&#xff0c;需要使用 v-html 指令。 <template><h1>Message: {{ state.msg }}</h1><p>{{ state.count 1 }}</p><p>{{ state.rawHtml }}</p><p v-html…