js基础知识
2023-09-11 23:54:52 0 举报
AI智能生成
js基础知识
作者其他创作
大纲/内容
js
原型链
继承
1.原型链继承
child.prototype=new parent()
直接将子对象构造函数的prototype指向父对象的构造函数
缺点:引用类型的数据会被所有实例共享
2.借用构造函数
function parent(){ this.name="sss"}function child(){parent.call(this)}
在子对象的构造函数中直接调用父对象的构造函数,并通过call等方式将this指向自己
优点:1.避免了引用数据类型的数据被所有的实例共享 2.可以在子对象的构造函数中对父对象的构造函数传参
缺点:只能继承父类的实例属性和方法,不能继承原型属性或者方法
3.组合继承
function child(){ parent.call(this)}child.prototype=new parent()child.prototype.constructor=child
缺点:父对象的构造函数多调用了一次
4.原型式继承
1.ES5的object.create()方法
let child = object.create(parent)
缺点:多个子实例的引用数据类型指向同一个内存,改变其中一个,其他的也会受影响
5.寄生式继承
function child(par){
let result.= object.create(par)
result.getname= function(){return this.name}
return result}
let newchild = chlld(parent)
优缺点和原型式继承医院,但是相比较下,子实例可以添加更多的方法getname)
6.寄生组合式继承
function clone(par,child){ child.prototype = object.create(par.prototype) child.prototype.constructor = child}
parent.prototype.getname = function (){return this.name }
function child(){parent.call(this)this.name="sss"}
clone(parent,child)
child.prototype.getname2 = function(){return this.name}
let parent = new chlld()
相当于ES6的extends
最优的继承方式
数据检测方式
typeof
对象、数组、null都会被判断为object,其他的都正确
instanceof
判断该对象在其原型上是否存在一个构造函数的原型(也就是是否能找到该数据类型的原型)
只能判断引用数据类型
constructor
对象可以通过constructor访问该数据类型的原型
对于对象类型来说,如果中间改变了这个对象的原型,也不能正确判断数据类型
Object.prototype.toString.call()
所有的数据类型都可以检测,返回值是[object string]的形式
toString是Object原型上的方法,但是Array、function等类型作为object的实例都重写了toString方法,所以应该调用Object的原型上的tostring方法
new一个对象的过程
1.创建一个新对象
2.将构造函数的作用域赋给新对象(也就是将对象的__proto指向构造函数的prototype)
3.将构造函数中的this指向该对象
4.返回新对象
js的延迟加载方式
defer,这个属性会让脚本和html文档同步解析,然后在html文档解析完之后再执行脚本,可以让页面渲染不阻塞,多个defer在大多数浏览器中按顺序执行
async
这个属性会让脚本异步加载,不会阻塞html文档的解析,但是在脚本加载完之后会立即执行,如果这个时候html文档没有解析完的话会阻塞,多个async的顺序是乱的
动态创建dom
对html的文档加载事件进行监听,加载完之后动态创建script标签来引入js脚本
setTimeout延时加载
让js最后加载,将js脚本放在文档的底部,来使js文件最后执行
for...of 和for..in
for..of遍历所有带iterator接口的数据结构并返回各自的值,拿的是键值,for...in遍历对象拿的是对象的key,
for..of只遍历当前对象,而for..in还会遍历原型链,for..in主要是为了遍历对象,不适合遍历数组
异步编程的方式
1.回调函数
缺点:多个回调函数嵌套容易出现回调地狱
2.Promise
将嵌套的回调函数作为链式调用
3.generator
可以在函数的执行过程中,将执行权移交出去,还可以在外部将执行权移交回来
当遇到异步函数的时候,将执行权移交出去,当异步函数执行完再将执行权移交回来,因此gennerator函数执行异步的方式可以转换为同步的顺序来执行
这种方式的问题在于什么时候需要将执行权移交回来,因此需要有一个自动执行gennerator的机制,例如co模块来控制gennrerator的自动执行
4.async函数
async函数式generator和promise实现的一个自动执行的语法糖,内部自带执行器。当函数内部执行到await的时候,如果await语句返回一个promise那么函数会等待promise对象变为resolve后再继续向下执行,因此可以将异步的逻辑转换成同步去执行,而且这个函数可以自动执行
promise
1.promise有三种状态,pending,fulfilled,rejected,
当把任务给promise的时候,promise的状态为pending,任务完成就转为resloved,失败了就是rejected
2.promise实例只有两个过程,pending -->fulfilled,pending-->rejected,一旦从pending变为其他状态,这个状态就不能再变了
3.特点:promise对象的状态不受外界影响,它代表了一个异步操作,有三种状态,只有异步操作的结果,可以决定是哪一种状态,其他的操作都无法改变这个状态,一旦状态改变就不会再变,任何时候都能拿到这个结果,如果改变已经完成,再对promise添加回调,还是能拿到这个结果
4.缺点
无法取消promise,一旦新建就会立即执行,无法中途取消,如果不设置回调函数,内部的错误也不会反应到外部,如果处于pending状态,无法知道当前到函数执行到哪一阶段,刚开始还是快结束了
5.priomise的状态是通过resolve和reject这两个回调函数来实现,可以在异步函数执行完之后凋用这两个方法改变promise的状态,promise的原型上有一个t hen方法,可以用这个方法为两个状态注册回调函数,这个回调函数是微任务,then方法执行完之后会返回一个新的promise,这就可以让promise进行链式调用
对象创建的方式
防抖截流
防抖
事件触发后n秒再执行回调,如果在这n秒内事件又被触发,则重新计时
分支主题
场景例子:按钮提交,输入验证,搜索联想词
截流
规定单位时间内,事件的回调只会执行一次,如果同一单位时间内某事件被多次触发,也只有一次会生效
场景例子:拖拽,缩放,动画
bind的实现
ES6
装饰器
1.什么是装饰器
装饰器是最新的ECMA中的一个提案,是一种与类(class)相关的语法,
用来注释或修改类和类方法
eg:classPerson{
@readonly count=0;
}
@readonly将count设置成了已读属性
因为装饰器是最新的提案,所以浏览器还未支持装饰器,但是typescript早期
TypeScript早些时候已经支持Decorators的使用,而且提供了ES5的支持,
所以虽然Decorators是ES7才支持的新特性,但是借助Babel和TypesScript,
我们现在就可以使用它了
运行环境配置:
需要安装ts运行环境,通过ts--init初始化目录就会出现ts-config文件,在ts-config
文件中需要打开"experimentalDecorators":true,也可以直接通过某种命令写入,有
的电脑上的vscode可能需要在设置中将ts的decorators选项勾选才能正常运行,如果
提示无法运行脚本则需要以管理员在powshell中运行set-ExecutionPolicyRemoteSigned,勾选a或者y
2.装饰器模式
1.装饰器:装饰器模式(DecoratorPattern)允许向一个现有的对象添加新的功能,同时
又不改变其结构。这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装。
这种模式创建了一个装饰类,用来包装原有的类,并在保持类方法签名完整性的前提下,
提供了额外的功能。
2.目的:动态地给一个对象添加一些额外的职责。就增加功能来说,装饰器模式相比生成子类更为
灵活。
3.主要解决:一般的,我们为了扩展一个类经常使用继承方式实现,由于继承为类引入静态特征,并
且随着扩展功能的增多,子类会很膨胀。
4.使用场景:1.我们在不想增加很多子类的情况下去扩展类的话,可以使用装饰器,
2.扩展一个类的功能。
3.动态增加功能,动态撤销。
如何解决:我们将功能职责进行划分,同时继承装饰器模式
5.优点:装饰类和被装饰类可以独立发展,不会相互耦合,装饰模式是继承的一个替代模式,装饰模式
可以动态扩展一个实现类的功能。
缺点:多层装饰比较复杂
7.可代替继承
3.装饰器种类
1.函数装饰器
1.使用函数装饰器,我们可以控制函数的输入和输出。
2.定义:MethodDecorator=(target:Object,key:string,descriptor:TypedPropertyDescriptor)=>TypedPropertyDescriptor|Void;
target:被装饰的对象
key:被装饰的函数名
descriptor->被传递过来的属性的属性描述符.可以通过Object.getOwnPropertyDescriptor()方法来查看属性描述符。
3.函数装饰器核心是修改描述符(可以说装饰器的本质就是修改描述符)
简单来讲,属性描述符可以用来配置一个对象的某个属性的返回值,
get/set行为,是否可以被删除,是否可以被修改,是否可以被枚举
等特性。
4.属性描述符
value–>字面值或者函数/属性计算后的返回值。
enumerable->是否可以被枚举(是否可以在(forxinobj)循环中被枚举出来)
configurable–>属性是否可以被配置
writable->属性是否是可写的.
5.注意事项
1.装饰器在class被声明的时候被执行,而不是class实例化的时候。
2.方法装饰器(函数装饰器也叫方法装饰器),方法装饰器返回一个值
3.存储原有的描述符并且返回一个新的描述符是我们推荐的做法.这在多描述符应用的场景下非常有用。
4.设置描述符的value的时候,不要使用箭头函数。
2.属性装饰器
1.属性装饰器和方法装饰器很类似,通过属性装饰器,我们可以用来重新定义getters、setters,修改enumerable,configurable等属性。
2定义:PropertyDecorator=(target:Object,key:string)=>void;
target:属性拥有者
key:属性名
3.可以修改属性
3.class装饰器
1.class装饰器是通过操作class的构造函数,来实现对class的相关属性和方法的动态添加和修改
2.定义:ClassDecorator = (target: TFunction) => TFunction;
classDecorator只接收一个参数就是class的构造函数
分支主题
分支主题
分支主题
分支主题
分支主题
tapd中第一项
新建组合装-添加sku,模糊搜索
修改时一共涉及的地方:
1.货品档案
新增sku(同tapd)
2.设置模块
平台策略-->赠品策略(右上角编辑) ---> 新建规则 --> 赠品策略明细抽屉(执行动作右侧的添加赠品)
tapd第二项
平台货品-手动匹配-单品
一共涉及的地方
1.货品档案
平台货品-->手动匹配--单品(同tapd)
条码管理-->新建-->选择单品
2.库存货品
外部仓储货品-->匹配系统货品
3.订单未匹配
-匹配系统sku-单品
此项和tapd第四项 订单未匹配-匹配系统sku-单品 修改的是同一个地方
tapd第三项
平台货品-手动匹配-组合装
一共涉及的地方
1.货品档案
平台货品-->手动匹配--组合装(同tapd)
条码管理-->新建-->选择组合装
此项和tapd第四项 订单未匹配-匹配系统sku-组合装 修改的是同一个地方
tapd第五项
订单待处理 行内换货-添加sku
一共涉及的地方
1.订单待处理 行内换货-添加sku
2.手工建单-添加货品/添加赠品-选择单品
3.订单详情 -->商品信息(编辑)-->添加货品 /添加增品选择单品
4.订单待处理-批量添加赠品-添加赠品
tapd第六项
订单待处理-行内换货-添加组合SKU
一共涉及的地方
1.订单待处理 行内换货-添加组合sku
2.手工建单-添加货品-选择组合装
3.订单详情 -->商品信息(编辑)-->添加货品---选择组合装
tapd第七项
采购-供货关系-全部、i按下供应商、1688供应商-添加sku
无其他涉及的地方
tapd第八项
采购管理-编辑中-编辑-添加sku
一共涉及的地方
订单:批量采购
采购管理:新建、编辑、再次购买
采购建议:备货建议、缺货建议生成采购单
3.注意构造函数只会被调用一次
4.对类的相关属性和方法的动态添加和修改
4.参数装饰器
1.参数装饰器更多的是被用来标记特殊的参数,而不是修改参数,事实上参数装饰器往往用来对特殊的参数进行标记,如何再fang
2.参数装饰器要结合装饰器来使用
5.访问器装饰器
1.访问器不过是类声明中属性的读取访问器和写入访问群
2.访问器装饰器应用与访问器的属性描述符,可以用于观测、修改、替换访问器的定义
3.注意:typeScript不允许同时装饰单一成员的get和set访问器,相反,所有成员的装饰器必须应用与首个指定的访问器(根据文档顺序)。这是业务装饰器应用与属性描述符,属性描述符结合了get和set访问器而不是应用于每项声明
proxy
分支主题
子主题
0 条评论
下一页