1.节流和防抖函数:
节流函数:在函数需要频繁触发的时候,函数执行一次后,只有大于设定的执行周期后才会执行下一次,适合多次事件按照时间分配来触发
应用的场景:
窗口的调用,页面的滚动,DOM的元素的拖拽(mounsemove),疯狂的抢购(mounsedown)
function throttle(callback, time) {
let start = 0 // 保证第一次事件必然是调用的
return function (...args) {
console.log('throttle事件触发')
const current = Date.now() // 当前时间
// 判断条件是否满足
if (current - start > time) {
start = current
callback.apply(this, args)
}
}
}
防抖函数:在函数需要频繁触发的时候,在规定的时间内,只能让最后一次是生效的,之前都不触发
应用的场景:
实时的搜索联想:keyup
文本框输入验证(输入内容,需要发送ajax请求)
function debounce(callback, time) {
return function (...args) {
console.log('debounce事件触发')
// 清理定时器的操作
if (callback.timeId) {
clearTimeout(callback.timeId)
}
callback.timeId = setTimeout(() => {
// 删除保存的定时器id
delete callback.timeId
callback.apply(this, args)
}, time);
}
}
2.懒加载:让进入到窗口的资源先加载,没进入到窗口的资源先不加载,等快进入到窗口在加载(12.24)
3.new 关键字: 4件事:
1. 申请一块空闲的空间,
2. 设置this为当前的实例对象
3. 初始化属性和方法的值
4. 返回当前实例对象this
4.帧动画
window.requestAnimationFrame():参数是一个回调函数
5.this:
- this 首先是一个关键字,其实也是一个特殊的变量,指向是动态的,看函数的调用方式
- 普通函数
- 函数直接调用 fn() --> window
- 在 ES5 严格模式下('use strict') --> undefined
- 函数隐式调用 obj.fn() --> obj
- 函数显示调用 fn.call/apply(obj) --> obj
- 函数 new 调用 new fn() --> 实例对象
- 事件的回调函数:指向被绑定事件的 DOM 元素
- 定时器的回调函数:window
- 在 ES5 严格模式下('use strict') --> undefined
- 特殊函数
- ES6 的箭头函数:指向离它最近,包裹它函数的 this(没有就是 window)
- 在 ES5 严格模式下 之前指向 window --> undefined
- 不能被 new 调用,不能被 call/apply 改变 this 指向
- ES6 类语法(class)中的方法:指向类的实例对象
6.闭包:
函数嵌套,内部函数引用外部函数变量,使用内部函数
7.实现JS中的继承
1. 通过改变原型指向实现继承
2. 借用构造函数实现继承
3. 组合继承
4. 拷贝继承:浅拷贝和深拷贝(递归后再说)
5. class
8.apply(),call(),bind()
apply():[].forEach.apply(obj,[function(){}]):第一个参数是改变函数的调用者(函数的this指向也改变),第二个参数是数组放着函数的参数,函数会直接调用
call():[].forEach.call(obj,function(){},num):第一个参数是改变函数的调用者(函数的this指向也改变),第二、三...个参数放着函数的参数,函数会直接调用
bind(obj):第一个参数是改变函数的调用者(函数的this指向也改变)
注意:bind方法不会修改原函数,会返回一个新函数,新函数的this才发生变化
9.严格模式(在所有js代码上面加'use strict')
函数中的this为undefined
创建eval作用,传入字符串,解析代码---几乎不用,不安全
有严格模式,结果是20,没有严格模式是123
var a = 20;
eval("var a=123; alert(a)")
console.log(a)
10.类的语法
class Person{
//添加在原型上
set(){},
//添加在实列对象上
set=function(){}
}
11.高阶函数(作用是:外层函数向内层函数传参,闭包的典型应用)
1) 执行函数返回值是一个函数
2) 执行函数传入的参数是函数
12.js jsx ts tsx的区别
1)js和ts的区别
TypeScript 是JavaScript 的超集,即包含JavaScript 的所有语法,并扩展了JavaScript 的语法。相比于JavaScript ,
它还增加了静态类型、类、模块、接口和类型注解方面的功能,更易于大项目的开发。ts文件最终要被编译成js文件才能被浏览器识别
TypeScript 相比于JavaScript 的优势总结为以下几点:
1.便于开发人员做注释。
2.能帮助开发人员检测出错误并修改。
3.TypeScript工具使重构更变的容易、快捷。
4.TypeScript 引入了 JavaScript 中没有的“类”概念。
5.TypeScript 中引入了模块的概念,可以把声明、数据、函数和类封装在模块中。
6.类型安全功能能在编码期间检测错误,这为开发人员创建了一个更高效的编码和调试过
2)js和jsx的区别
JSX就是Javascript和XML结合的一种格式,利用HTML语法来创建虚拟DOM。
当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析。
JSX只是为 React.createElement(component, props, …children)方法提供的语法糖。
3)jsx和tsx
jsx和tsx是一样的,jsx是在js文件中利用HTML语法来创建虚拟DOM,tsx是在ts文件中利用HTML语法来创建虚拟DOM