js的一些理解

简介: js的一些理解

防抖和节流

背景:浏览器的事件机制在触发时,会不断调用绑定在事件上的回调函数,极大地浪费资源;为了优化性能,需要对这类事件进行调用次数的限制,对此我们就可以采用 防抖 和 节流来减少调用频率

防抖

事件触发时延迟n 秒后再执行,若在 n 秒内被重复触发则重新计时,使得多次频繁触发只有最后一次生效,如防抖在连续的事件,只需触发一次回调的场景有输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时

节流

n 秒内只执行一次,触后n秒内将不能被再次触发,使得函数执行频率直接稀释,如节流在间隔一段时间执行一次回调的场景有搜索框的搜索联想功能

对象继承的方式

定义:继承可以使得子类具有父类别的各种属性和方法,而不需要再次编写相同的代码

方式

原型链继承:将父类的实例挂载到子类的原型上,根据原型链的指向,子类的实例还可以使用到父类的方法和属性

优点:子类的实例也是父类的实例 两者属性都可以继承;父类新增原型方法或属性,子类都能访问的到

缺点:多个实例的原型对象共享内存,修改一个会影响另一个;无法实现多继承

构造函数继承:在子类构造函数中调用父类构造函数(复制父类的实例属性给子类),通过在子类构造函数中使用call()方法改变this指向

优点:可以实现多继承(call多个父类对象)

缺点:方法都在构造函数中定义,只能继承父类的实例属性和方法,不能继承原型上的属性和方法;无法实现函数复用,每个子类都有父类实例函数的副本,影响性能

组合继承:同时使用原型链继承和构造函数继承的操作:通过原型链继承原型属性和方法,通过构造函数继承父类属性

优点:结合了原型链继承和构造函数继承得优点

缺点:要调用两次构造函数,增加了性能开销

寄生组合继承:通过寄生方式砍掉父类的实例属性, 通过Object.create方法把父类的原型对象挂载在子类的原型对象上,在调用两次父类构造函数时,无需初始化两次实例的方法/属性,避免了组合继承的缺点

优点:只调用了一次父类构造函数,并且因此避免了在父类的原型上面创建不必要的、多余的属性,而且原型链能保持不变

es6的class继承

class通过extends关键字实现继承使得继承更加清晰和方便,父类的所有属性和方法都会自动被子类继承

constructor方法:创建的每一个class类,都会有一个constructor()方法,该方法是一种用于创建和初始化class创建的对象的特殊方法--构造函数方法

super关键字:当做函数使用时表示父类构造函数,但返回的是之类实例对象,内部this指向子类实例;作为对象时在普通方法中,指向父类的原型对象;在静态方法中,指向父类。

es6继承和es5继承的区别:es5实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this));es6实质是先将父类实例对象的属性和方法,加到this上面(所以必须先调用super方法),然后再用子类的构造函数修改this

目录
相关文章
|
7月前
|
JavaScript 前端开发
js详解1
js详解1
44 2
|
4月前
|
JavaScript
什么是js?
什么是js?
278 0
|
6月前
|
JavaScript 前端开发
什么是js
什么是js
583 4
|
6月前
|
XML JavaScript 前端开发
JS是什么
JS是什么
231 0
|
7月前
|
XML JavaScript 前端开发
js的一些总结
js的一些总结
44 1
|
7月前
|
JavaScript 前端开发 Go
octokit.js
octokit.js
54 1
|
JavaScript
|
7月前
|
JavaScript
this的使用(js的问题)
this的使用(js的问题)
22 0
|
7月前
|
前端开发 JavaScript API
toastify-js
toastify-js
56 0
|
JavaScript
metainfo.js
metainfo.js
100 1
下一篇
DataWorks