JavaScript new运算符做了什么
new运算符,想必大家都不陌生,在工作当中肯定用到过。而且也是面试当中经常问的一道面试题,那你有了解过new运算符背后的原理和如何实现一个new吗?一起来复习一下吧!
知识点
new运算符的作用与原理
如何实现一个new运算符
new运算符的作用与原理
new运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
通俗的来讲,new运算符的作用就是通过构造函数来创建一个带有原型链的实例对象。或者你可以这样理解:就像小时候的中秋节,家里会用刻有小兔子的月饼的模具,生产好多个印有小兔子的月饼的过程。是不是就有那味儿了~
举个例子:中秋节妈妈交给我一个任务,需要我做5个印有小兔子的月饼。我们用代码来实现一下:
12345var moonCake = { id: 1, fill: 'wuren', type: 'rabbit', info: function() { console.log('eat') } }var moonCake2 = { id: 2, f ...
根据起止日期返回中间所有月份
题目描述:
题目:给定一个开始日期’2022-08’,一个结束日期’2023-02’
要求:实现一个函数getMonthArray,返回开始日期到结束日期中间的所有月份[‘2022-09’, ‘2022-10’, ‘2022-11’, …, ‘2023-01’]
知识点
字符串的拼接与截取
数字类型与字符串类型的相互转换
月份与年的计算
实现思路
根据入参截取出开始年份、月份。
计算两个日期实际相差几个月。
循环拼接日期,放入到数组中,需要注意月份大于12时,需重置为1,同时年份+1
1234567891011121314151617181920212223function getMonthArray(startDate, endDate) { let startYear = parseInt(startDate.split('-')[0]) let startMonth = parseInt(startDate.split('-')[1]) let yearDiff = parseInt(endDate.s ...
Instanceof与原型链
原型和原型链,是JavaScript中的一个重要知识点,也是面试中的高频考点,理解并掌握原型和原型链,对于前端开发者来说是重中之重。下面就通过Instanceof运算符来复习一下相关知识吧。
知识点
理解JavaScript对象原型
原型链如何工作
instanceof运算符的作用与实现
理解JavaScript对象原型与原型链
JavaScript常被描述为一种基于原型的语言——每个对象拥有一个原型对象,对象以其原型为模板、从原型继承方法和属性。原型对象也可能拥有原型,并从中继承方法和属性,一层一层、以此类推。这种关系常被称为原型链。
JavaScript中规定,每个函数都有一个特殊的属性prototype,这个属性的值是一个对象,通常被称为这个函数的原型。通俗的讲,我们叫它显示原型。通过new一个函数,我们可以得到一个实例对象,在创建这个实例对象的过程中,会将实例对象内部的__proto__指向构造它的函数的显示原型上。通过__proto__我们可以获取对象内部的原型,我们叫它隐式原型。有点绕对不对,下面我们通过代码和图像来加深理解:
(注:__proto__为浏览器提供的 ...
防抖和节流的实现
防抖和节流,在日常的开发过程中会经常用到,而在面试中,也是经常会被问的一道手写题。下面就一起复习一下这两个函数的知识点和实现吧。
知识点在工作中常见的一些场景,比如input搜索框、监听窗口的resize,元素的拖拽,以及滚动条的监听。这些场景的共同点就是事件会被频繁的触发,而频繁的触发会导致资源和性能的大量消耗。通常我们会使用防抖和节流函数来进行优化,那么什么场景该使用防抖,什么时候该使用节流呢?
共同点
区别
应用场景
防抖debounce
在事件频繁被触发时,
只执行最后一次
input输入框、窗口resize、button点击
节流throttle
减少事件执行的次数
有规律的执行
拖拽、scroll
防抖debounce实现通过知识点我们可以知道,防抖函数的作用是在事件被频繁触发时,只执行最后一次。本质上是延迟执行事件的时机,那么我们可以利用定时器来实现它。
12345678910// 拆解需求:// 1. n秒内只能执行一次,所以需要一个setTimeout来控制fn的执行时机。// 2. 如果触发事件后在n秒内又触发了事件,则重新计算函数延迟执行 ...