js原型链,继承和promis的基本理解

el/2023/10/1 3:35:12

List item

一、原型链

开局一张图
在这里插入图片描述

  1. prototype
    每个函数都有一个prototype属性,被称为显示原型

2._ proto _
每个实例对象都会有_ proto _属性,其被称为隐式原型

每一个实例对象的隐式原型_ proto _属性指向自身构造函数的显式原型prototype

  1. constructor
    每个prototype原型都有一个constructor属性,指向它关联的构造函数。

  2. 原型链
    获取对象属性时,如果对象本身没有这个属性,那就会去他的原型__proto__上去找,如果还查不到,就去找原型的原型,一直找到最顶层(Object.prototype)为止。Object.prototype对象也有__proto__属性值为null。

二、继承

1、原型链继承
    
    重点:让新实例的原型等于父类的实例。
    特点:1、实例可继承的属性有:实例的构造函数的属性,父类构造函数属性,父类原型的属性。(新实例不会继承父类实例的属性!)
    缺点:1、新实例无法向父类构造函数传参。
       2、继承单一。
       3、所有新实例都会共享父类实例的属性。(原型上的属性是共享的,一个实例修改了原型属性,另一个实例的原型属性也会被修改!)
2、借用构造函数继承
    
    重点:用.call()和.apply()将父类构造函数引入子类函数(在子类函数中做了父类函数的自执行(复制))
    特点:1、只继承了父类构造函数的属性,没有继承父类原型的属性。
       2、解决了原型链继承缺点1、2、3。
       3、可以继承多个构造函数属性(call多个)。
       4、在子实例中可向父实例传参。
    缺点:1、只能继承父类构造函数的属性。
       2、无法实现构造函数的复用。(每次用每次都要重新调用)
       3、每个新实例都有父类构造函数的副本,臃肿。

3、组合继承(组合原型链继承和借用构造函数继承)(常用)
    
    重点:结合了两种模式的优点,传参和复用
    特点:1、可以继承父类原型上的属性,可以传参,可复用。
       2、每个新实例引入的构造函数属性是私有的。
    缺点:调用了两次父类构造函数(耗内存),子类的构造函数会代替原型上的那个父类构造函数。

4、原型式继承
    
    重点:用一个函数包装一个对象,然后返回这个函数的调用,这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
    特点:类似于复制一个对象,用函数来包装。
    缺点:1、所有实例都会继承原型上的属性。
       2、无法实现复用。(新实例属性都是后面添加的)
  
  5、寄生式继承
    
    重点:就是给原型式继承外面套了个壳子。
    优点:没有创建自定义类型,因为只是套了个壳子返回对象(这个),这个函数顺理成章就成了创建的新对象。
    缺点:没用到原型,无法复用。
    
  6、寄生组合式继承(常用)
    寄生:在函数内返回对象然后调用
    组合:1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数,可传参 
    
    重点:修复了组合继承的问题

继承这些知识点与其说是对象的继承,更像是函数的功能用法,如何用函数做到复用,组合,这些和使用继承的思考是一样的。上述几个继承的方法都可以手动修复他们的缺点,但就是多了这个手动修复就变成了另一种继承模式。
    这些继承模式的学习重点是学它们的思想,不然你会在coding书本上的例子的时候,会觉得明明可以直接继承为什么还要搞这么麻烦。就像原型式继承它用函数复制了内部对象的一个副本,这样不仅可以继承内部对象的属性,还能把函数(对象,来源内部对象的返回)随意调用,给它们添加属性,改个参数就可以改变原型对象,而这些新增的属性也不会相互影响。
    
ES6中的 class继承:
父类(基类)

子类

extends 关键字

//class 相当于es5中构造函数
//class中定义方法时,前后不能加function,全部定义在class的protopyte属性中
//class中定义的所有方法是不可枚举的
//class中只能定义方法,不能定义对象,变量等
//class和方法内默认都是严格模式
//es5中constructor为隐式属性//父类
class People{constructor(name='wang',age='27'){this.name = name;this.age = age;}eat(){console.log(`${this.name} ${this.age} eat food`)}
}
//子类 通过extends 继承父类
class Woman extends People{ constructor(name = 'ren',age = '27'){ //继承父类属性super(name, age); } eat(){ //继承父类方法super.eat() } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

三、promise

语法:new promise(function(resolve,reject) {…执行者})

一般来讲,有以下的名词约定:

promise(首字母小写)对象指的是“Promise实例对象”

Promise首字母大写且单数形式,表示“Promise构造函数”

Promises首字母大写且复数形式,用于指代“Promises规范”

什么是Promise?
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
从语法上说,promise 是一个对象,从它可以获取异步操作的的最终状态(成功或失败)。
Promise是一个构造函数,对外提供统一的 API,自己身上有all、reject、resolve等方法,原型上有then、catch等方法。
Promise的两个特点
Promise对象的状态不受外界影响

1)pending 初始状态

2)fulfilled 成功状态

3)rejected 失败状态

Promise 有以上三种状态,只有异步操作的结果可以决定当前是哪一种状态,其他任何操作都无法改变这个状态

Promise的状态一旦改变,就不会再变,任何时候都可以得到这个结果,状态不可以逆,只能由 pending变成fulfilled或者由pending变成rejected

使用 new 来创建一个promise对象。

Promise接受一个「函数」作为参数,该函数的两个参数分别是resolve和reject。这两个函数就是就是「回调函数」

resolve函数的作用:在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;

reject函数的作用:在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

const promise = new Promise((resolve, reject) => {// do something here ...if (success) {resolve(value); // fulfilled} else {reject(error); // rejected}
});

resolve作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
promise有三个状态:
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变,就会触发then()里的响应函数处理后续步骤;
promise状态一经改变,不会再变。
Promise对象的状态改变,只有两种可能:
从pending变为fulfilled
从pending变为rejected。

.then()
1、接收两个函数作为参数,分别代表fulfilled(成功)和rejected(失败)
2、.then()返回一个新的Promise实例,所以它可以链式调用
3、当前面的Promise状态改变时,.then()根据其最终状态,选择特定的状态响应函数执行
4、状态响应函数可以返回新的promise,或其他值,不返回值也可以我们可以认为它返回了一个null;
5、如果返回新的promise,那么下一级.then()会在新的promise状态改变之后执行
6、如果返回其他任何值,则会立即执行下一级.then()

.then()里面有.then()的情况
1、因为.then()返回的还是Promise实例
2、会等里面的then()执行完,再执行外面的


http://www.ngui.cc/el/2883519.html

相关文章

Vue做项目必备(节省80%时间,持久更新,不讲武德)

目录 1.iconfont 2. sass版本问题 3.屏幕高宽度自适应 4. 跨域 5. 拦截器 6.项目插件安装 7.登录鉴权(单路由) 8.插件引入、持久化、字体图标、富文本、时间戳 9. 跳转、返回、前进和后退 10.echarts图表的使用 11. vue组件中引入js文件(放scr…

IT行业接项目的方法总结(接私活可用)

首先了解下众包和外包的区别: 外包: 外包是将项目承包给外包公司,由外包公司的程序员进行开发; 众包: 众包是将项目承包给多个独立的开发者,他们不隶属于任何公司,用自己的业余时间接私活&a…

H5音乐标签实现网页自动播放和隐藏

网页播放音乐如果不能自动播放&#xff0c;用iframe放在body最下面。即可运行。 <iframe src "no.mp3" allow "autoplay" hidden />

P7面试题库(某企业面试题库)

注意&#xff1a;加粗的字体为速记的文本&#xff08;核心点&#xff09; 1、 响应式布局如何实现 响应式布局可以让网站同时适配不同分辨率和不同的手机端&#xff0c;让客户有更好的体验。 方案一&#xff1a;百分比布局 利用对属性设置百分比来适配不同屏幕&#xff0c;注意…

如何学会自主学习?(精品)

阶段性反馈机制&#xff08;如何持之以恒、让自己发疯&#xff09; 反馈机制是王者荣耀的核心武器&#xff0c;击杀野怪获得金币&#xff0c;击杀敌人之后的画面、音效刺激大脑&#xff0c;不断地努力&#xff0c;获得奖励是我们不断的玩这个游戏的主要原因&#xff0c;也是人…

js 文字转码 escape,encodeURI,encodeURIComponent(marksheng)

js对文字进行转码的3个函数&#xff1a;escape,encodeURI,encodeURIComponent&#xff0c;相应3个解码函数&#xff1a;unescape,decodeURI,decodeURIComponent 1、 传递参数时需要使用encodeURIComponent&#xff0c;这样组合的url才不会被#等特殊字符截断。 …

前端面试录音整理(私人版)

一、恒天财富 自我介绍顺序&#xff1a;姓名&#xff0c;年龄&#xff0c;来自哪里&#xff0c;工作年限&#xff0c;供职了几家公司&#xff0c;分别供职时长&#xff0c;任职期间做过的项目&#xff0c;用到的技术栈&#xff0c;工作方式&#xff0c;学习方式&#xff0c;性格…

js之购物车代码逻辑

<template><div class"about"><div><table style"width: 1000px;"><tr><!-- <th><h1>购物车</h1></th> --></tr><tr><th><input type"checkbox" change"…

关于ARM指令的英文全称(方便记忆|巧记汇编指令)

有些见名知意的我就不写了。 B-----Branch 意义为分支&#xff0c;也就是跳转 BLX-----Branch with Link and exchange 意义为带返回和状态切换的跳转 CMN-----Compare Negative 比较反值 CDP-----Common Data Operations 协处理器数据操作 LDM-----Load Mutiple 加载多个…

ESP8266上传数据到乐联网简单教程

此篇文章不做考虑了&#xff0c;后面会改&#xff01; 本文提供最快上手ESP8266连接服务器上传数据的方法&#xff1a; 首先是对于ESP8266的理解&#xff0c;它有几个模式&#xff0c;但是对于我这种初学者来说最简单的模式就是AT指令集了&#xff0c;那么我们首先从ESP8266的…