目录
对象
1.面向对象
1. 面向对象：以 “对象" 为中心的编程思想
2. 面向过程：以 “过程" 为中心的编程思想
(面向对象本质是 ： 面向过程的封装)
2.面向对象三大特征
1.封装 ; 把代码放入 对象的方法 中
(1) 解决代码复用
(2) 避免全局变量污染
2.继承 : 一个对象(子) 拥有 另一个对象(父) 所有的成员
3.多态：一个对象 在不同情况下 呈现不同的状态（js中基本不涉及）
3.构造函数new原理
1.工厂函数和构造函数
工厂函数： 用于创建对象的 函数
构造函数 : new 调用的函数
通途一致：都是创建对象
2.new关键字原理4个步骤
a. 创建一个空对象
b. this指向这个对象
c. 执行赋值代码
d. 自动返回这个对象
3.构造函数内部使用return
return 值类型。 无效，还是返回new创建的对象
return 引用类型。 有效。会覆盖new创建的对象
4.原型对象
1.原型对象
创建函数的时候，系统会自动创建一个对应的对象。 称之为原型对象。
2.作用
解决内存浪费 + 变量污染
3.构造函数、原型对象、实例对象的关系
构造函数： 有一个prototype属性， 指向原型对象
原型对象 ： 有一个constructor属性，指向构造函数
实例对象 ： 有一个__proto__属性，指向原型对象
4.静态成员与实例成员
1.实例成员：实例对象的属性和方法
2.静态成员：函数的属性和方法
(1)Object的三个方法
获取对象所有的属性名: Object.keys( 对象名 )
获取对象所有的属性值: Object.values( 对象名 )
源对象属性 拷贝 到目标对象中：Object.assign( 目标对象, 源对象 )
(应用场景： 快速获取对象属性名 、 属性值)
(2)Array伪数组转真数组
Array.from( 伪数组 )
应用场景：伪数组可以使用数组的方法
5.原型链
1.原型链 : 每一个对象都有原型，原型也是对象也有自己的原型，以此类推形成链式结构
2.对象访问原型链规则 ：就近原则
先访问自己，自己没有找原型，原型没有找原型的原型，此类类推直到原型链终点 null. 如果还没有，属性则获取undefined, 方法则报错xxx is not funtion
3.原型链作用 ： 继承
原型继承 ： 把父构造函数实例 作为 子构造函数原型
语法:子构造函数.protype = new 父构造函数()
4.实例对象 instanceof 构造函数
作用：检测构造函数的prototype在不在实例对象的原型链中
6.内置对象
字符串
includes
语法: str.includes(`字符串`)
检测字符串 ( 模糊查询 )
indexOf
语法: str.indexOf(`字符串`)
检测字符串在str中的首字母下标
返回值
在str中,有则返回首字母对应下标
不在str中,则返回-1
split
语法: str.split(`分隔符`)
使用分隔符去切割字符串,得到切割后的数组
返回值:数组
实际应用场景: 切割网址 得到参数对象
substring
语法: str.substring(起始下标 , 结束下标)
返回值: 起始 <= 截取范围 < 下标
实际应用场景: 截取部分字符串替换,手机号中间替换成****
数组
reverse
语法 arr.reverse()
翻转数组(直接改变原数组)
返回值:翻转后的数组
实际应用场景:列表翻转(从高到低变成从低到高)
join
语法: arr.join(`分隔符`)
按照分隔符把数组每一个元素拼接成字符串
返回值: 字符串
实际应用场景: 翻转字符串
str.split(``).reverse().join(``)
sort
语法: arr.sort(function(a,b){
return a-b
})
实际应用场景: 数组排序
flat
语法: arr.flat(深度)
平铺(扁平化)数组
返回值 : 直接修改数组本身
实际应用场景: 数组降维 (例如把2维数组变成永恒1维数组)
数组迭代(遍历)
forEach
语法: arr.forEach(function(item,index) { } )
返回值: 没有返回值
实际应用场景: 用于遍历数组元素(和for循环一样)
map
语法: arr.map(function(item,index){
return 新数组元素
})
返回值 : 新数组
实际应用场景: 映射数组
filter
语法: arr.filter(function(item,index){
return 布尔值
})
返回值 : 筛选之后的新数组
实际应用场景: 筛选功能
some
语法: arr.some(function(item,index){
return 布尔值
})
返回值: true : 有满足条件的元素
false: 没有满足条件的元素
实际应用场景: 非空判断
every
语法: arr.every(function(item,index){
return 布尔值
})
返回值: true : 所以元素都满足条件
false: 有不满足条件的元素
实际应用场景: 全选框
reduce
语法: arr.reduce(function(sum,item,index){
return sum+item(求和)
},0)
返回值: 对数组每一个元素执行一次回调函数,累加最后一次回调的结果
实际应用场景: 累加和
函数
1.this指向
普通函数 函数名() : window
对象方法 对象名.方法名() : 对象
构造函数 new 函数名(): new创建的实例对象
2.函数上下文调用
作用: 修改函数内部的this指向
(1)函数名.call(修改后的this,参数1,参数2......)
应用: 万能数据类型检测Object.prototype.toString.call(数据)
(2)函数名.apply(修改后的this,数组/伪数组)
应用: 伪数组转真数组
(3)函数名.bind(修改后的this)
注意点:不会立即执行
应用: 修改定时器的this指向
三种方法的相同点:
都是修改函数的this指向
三种方法的不同点:
(1)传参方式不同 : call都参数列表传参,apply是数组传参
(2)执行机制不同, call和apply会立即执行,而bind不会立即执行,而是得到一个修改this后 的新函数
3.闭包函数
什么是闭包
(1)闭包是 访问了另一个函数局部变量的 函数
(2)闭包是组合= 函数+引用其他函数局部变量
闭包作用 : 解决变量污染
4.递归函数
什么是递归 : 一盒函数在 内部 调用自己
递归作用: 深拷贝
5.箭头函数
语法: const 函数名=( )=>{ }
(1)把function替换成=>
(2)把小括号移到=>左边
注意点:
(1)只有一个形参的时候,可以选择省略小括号
(2)函数体只有一行,则可以省略大括号,此时也必须省略return
(return和大括号要么都写,要么都不写)
与function函数的区别
(1)写法不同
(2)最大区别:箭头函数没有this,本质上是访问上级作用域的this
(3)箭头函数不能作为构造函数
(4)箭头函数不能使用arguments
6.防抖函数
什么是防抖函数?
单位时间内频繁触发事件,只会触发最后一次
流程:
(1)声明全局变量存储一次性定时器ID
(2)每次触发事件先清除上一次的定时器,然后将事件处理函数放入本次定时器中
应用场景:
搜索框
插件使用语法:
._debounce(事件处理函数,防抖时间)
7.节流函数
什么是节流函数?
单位时间内频繁触发事件,只会触发一次
应用场景:
滚动条
插件使用语法:
._throttle(事件处理函数,防抖时间)
258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
