前端JavaScript高级语法
2021-01-15 12:29:50 123 举报AI智能生成
个人学习笔记整理的前端开发知识点之JavaScript高级语法（含Web API、jquery、面向对象和类的继承、函数进阶、ES6、正则表达式）
作者其他创作
大纲/内容
面向对象和类的继承
面向过程与面向对象
对象性能低，但易维护、复用、扩展
对象与类
对象：一个键值对的集合
字面量、构造函数、类实例化
constructor( )放类的共有属性，传参
类的继承
extends
super调用父类，在this之前
类没有变量提升，先定义类，才能new实例化对象
构造函数和原型
构造函数的内存消耗
实例成员与静态成员
原型对象prototype
存放对象的公共方法
非标准属性__proto__，指向prototype原型对象
原型链
查找链上成员的属性和方法
直到Object（null）
this指向
实例对象
call()调用并改this
constructor属性，指回原构造函数
为数组扩展内置方法
函数进阶
改变内部函数this指向
调用方式不同决定this指向
window
普通函数
定时器
立即执行函数
调用者/实例对象
构造函数
方法调用
事件绑定
call
可调用，继承
apply
可调用，数组
bind
不可调用，产生新函数
三者区别
严格模式
对正常模式的改动
"use strict"开启
整个脚本
函数
高阶函数
函数也是数据类型，作为参数传递
回调函数
闭包Closure
外部函数定义的内部函数
给访问外部函数定义的内部变量创造了条件（延伸了变量的作用范围）
将关于函数的一切封闭到了函数内部
减少了全局变量
不触发垃圾回收机制
递归
自己调用自己，每次在缩小解决问题规模
栈溢出stack overflow
return解决
遍历数组对象数据
数组中插入对象
迭代
每次在更接近目标
浅拷贝与深拷贝
表层
for(var key in o)
Object.assign()
每层
判断不同数据类型
正则表达式Regular Expression
定义
特点
匹配字符串中的字符组合
简单方式控制复杂的字符串
实际开发复制即可
使用
创建var、new
检测.test
/不能有空格/
在js为对象
特殊字符（参考jQueryAPI、runoobAPI）
边界符
^开头$结尾
方括号
[]匹配任意字符，^取反
小括号为整体优先级
量词符
用户表单验证中英文下划线数字
过滤替换敏感词
预定义类
常用简写\\d
正则更换replace
参数：/正则表达式/[switch]
全局g，忽略大小写i，全局+忽略gi
ES6新增
ES5新增
forEach遍历数组
新增数组的方法操作数据
some设置条件，返回布尔值
遇到return ture终止迭代
filter过滤数组
trim()去除字符串两端空格
Object.keys()获取对象的属性名
Object.defineProperty()设置或修改对象中的属性
泛指2015年（每年6月ECMA进行改动）以后的版本
声明
let
块级作用域
没有变量提升
暂时性死区
必须先有let这一行（因为已经被let绑定该块级作用域），才可获取
常量const
必须变量初始化
不可重新赋值改地址值
复杂数据类型，可索引号更改值
解构匹配赋值
数组
对象
箭头函数
语法糖
单参数const fn = v => v;
箭头函数所在作用域指向谁就是谁
声明未知参数
剩余参数...args
转为逗号分隔的参数序列
类数组转真数组
合并数组
内置对象扩展
Array
构造函数方法Arryay.from()
实例方法
find()、findIndex()、includes()
String
`模版字符串`
`${解析变量}`
`${调用函数()}`
`可换行`
startsWith()、endsWith()、repeat()
Set数据结构
本质是构造函数，可传数组
add()、delete()、clear()、是否有该值has()
可用forEach遍历
JavaScript高级语法
Web APIs
DOM页面文档对象
概识
皆为对象
DOM树（一个文档页面即顶级对象document）W3C标准
H5要支持IE8、IE9
DOM节点：nodeType(1)标签1、属性2、文本3（含空格换行）、注释
DOM创建、增删改查、属性操作、事件操作
创建
document.wriet()document.creatElement()element.innerHTML() 数组>字符串
创建元素三种区别
增
appendChild、insertBefore
删
removeChild
改
修改dom元素属性内容
.innerHTML可识别标签，并保留空格和换行
=赋值
(里)输出
路径src、href
提示文本alt、title
表单type、value、disabled、checked、selected
行内样式
少直接style.backgroundColor、.backgroundPosition
多间接.className
查
getElementById、getElementByTagName
H5：querySelector、querySelectorAll
父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibiling）
自定义属性操作data-
删removeAttribute
改setAttribute
查getAttribute
事件操作e/evt/event
鼠标跟随图像（坐标记得➕‘px’）
关闭广告、下拉菜单、Tab切换
点击元素触发执行程序的一个过程
事件三要素
传统和H5监听绑定事件
DOM事件流三阶段
捕获/当前/冒泡
事件对象
绑定this与触发e.target区别
事件委托
父执行，子效果（减少DOM访问次数）
阻止事件
默认点击链接
动态发布删除留言栏
href="javascript:;"
事件冒泡e.stopPropagation()
选中文字和右键菜单
鼠标事件对象MouseEvent
常用鼠标事件
键盘事件对象KeyboardEvent
常用键盘事件
key与keyCode的ASCII码值
排他思想
for遍历所有元素绑定事件，for遍历去掉其他元素样式，this实现目标元素样式
百度换肤、表格高亮行、全选
BOM浏览器对象
一个浏览器窗口即顶级对象window
缺乏标准，兼容性差
包含DOM
window对象的常见事件
调用可省略不写window
监听window
窗口加载load
区别pageshow
交互效果更好DOMContentLoaded
窗口大小resize
定时器操作
1000毫秒=1秒
声明变量 = 为定时器起名标识符
清除clearTimeout( timeout )
京东倒计时
发送短信倒计时
先调用一次函数以防有空白
清除clearInterval( timeout )
JS执行队列
主线程执行队列
同步任务
单线程
console.log( )
fuction( )
全局作用域与普通函数为window(含定时器)
方法为调用者
构造函数为实例
location
定时跳转页面/跨页获取参数
获取设置当前窗口的URL
navigator
判断页面终端
userAgent用户代理
history
OA办公系统
go页面前进与后退
PC网页特效
常见属性
offset含边框大小，获取元素位偏移
计算鼠标在盒子内坐标
拖动模态框
电商放大镜
数学公式
与style区别
client不含边框的盒子大小
获取元素大小clientWidth
scroll内容大小，被卷头部
页面滚动距离window.pageXOffset
淘宝侧边栏
返回顶部
动画函数
内存性能优化
点击按钮定时器bug
缓动动画
正负小数的向上向下取整
PC与移动端轮播图
节流阀
过渡完成transitioned
移动端网页特效
触屏事件
touchstart、touchmove、touched
移动端click延迟解决方案
targetTouches[0]
解决拖动元素触发屏幕滚动e.preventDefault()
缓存
记住用户名
JSON.stringify( )
sessionStorage
生命周期为同一个浏览器窗口页面关闭
存储获取删除清空
localStorage
生命周期永久在，需手动删除
多窗口页面同一浏览器可共享
F12 Application
插件（小而专）
本质为引入官网文件
框架（大而全）
jQuery
j即JavaScript，Query查询
本质：在JS文件（JavaScript库，library）调用函数
优点
基本使用
下载引入文档
jQuery对象转换
$可用jQuery代替，即window
转DOM对象遍历（伪数组形式存储）
隐式迭代
jQuery选择器
jQuery样式操作
链式编程
属性操作
内容文本值
尺寸与位置操作
元素的增、删、改、查
jQuery对象操作
拷贝
多库共存
jQuery动画
显示隐藏
滑入滑出
淡入淡出
停止动画队列
插件
瀑布流
图片懒加载
全屏滚动
事件循环event loop
异步队列
具体输出事件
onclick、setTimeout
ajax
异步任务Web API
callback回调函数模块
DOM（普通事件、资源加载、定时器）
Ajax网络请求
职业：本科
0 条评论
回复 删除
下一页
