Javascript的知识总结(16)
ES6的类和对象
ES6 类
- 创建类
class Star { constructor(uname){ this.uname = uname} }
- 利用类创建对象
var ldh = new Star('')
- constructor 函数只要new生成实例时,就会调用这个函数
- 类里面的所有函数不需要写function(),多个函数方法之间不需要添加
,
类的继承
- 语法 class father{ } class son extends father{}
- 继承父类的一些属性和方法
super()
关键字调用父类的构造函数
查看实例
1 | class father{ |
super关键字
- 关键字调用父类的构造函数
- 关键字可以调用普通函数
- 继承属性或者方法查找原则就近原则
- 子类构造函数调用父类函数时,super关键词必须写到 字类this之前调用
查看实例
1 | class father{ |
ES6类和对象要注意的问题
- 必须
先定义类
,才能通过类实例化对象 - 类里面共有的属性和方法一定要加
this
使用 - 注意this的指向问题,constructor里面的this 指向的时创建的实例化对象,方法种的this指向的调用这个方法的实例化对象 重点
查看实例
1 | class star{ |
面向对象案例
- 使用es6新特性添加元素
insertAdjacentHTML(position,ele)
e.stopPropagation()
// 阻止冒泡事件- 双击禁用选定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
查看案例
1 |
|
构造函数的缺点
- 使用构造函数的方法时使用函数的方法 多个对象使用复杂数据类型会浪费内存
- 使用新特性
prototype
只能函数.prototype.方法
共享方法,通过原型(对象)分配,公共的方法放到原型对象身上 - 静态成员在构造函数本身身上添加成员,函数.属性/方法,静态成员只能通过构造函数来访问
__proto__
指向我们构造函数的原型对象,和prototype
是等价的,它是非标准属性,一条路线,都存在一个constructor函数
constructor 构造函数
- 在使用prototype对象时要注意
.
和=
的区别,如果使用等号时会将原来的constructor覆盖无法指向原来的函数,必须使用constructor函数重新手动指向原来的函数 .
是添加一个属性或者方法,=
是将原来的constructor覆盖,如果修改了原来的原型对象,给原型对象赋值的是对象必须使用constructor函数重新指向原来的原型对象
查看实例
1 | function Star(name, age){ |
- 记录引用了哪个函数
- 只要是对象就有
__proto__
- object原型对象为
null
原型链
- js的查找机制根据原型链查找
- 并且遵循就近原则
查看实例
1 | // js查找机制就近原则,按照原型链的方法 |
查看实例
1 | function Star(name, age) { |
this指向
- 在构造函数中里面的this指向的是对象实例
- 原型对象函数里面的this指向的是实例对象
扩展内置对象
- 数组和字符串内置对象不能给原型对象覆盖操作
Array.prototype = {}
,只能是Array.prototype.xxx = function(){}
的方式 - 可以使用原型对象里面的扩展对象,页可以自定义扩展方法
查看实例
1 | console.log(Array.prototype); |
call()
- 作用:调用这个函数,可以修改调用函数的this的指向
- 格式:
函数.call()
函数不加括号fn.call()
- call(实例化对象) 可以改变函数的this指向,并且不传递
查看实例
1 | function sun(x,y){ |
借用构造函数继承父类属性
查看实例
1 | function Father(uname,age){ |
借用构造函数继承父类方法
- 在使用对象的形式修改了原型对象时,使用constructor来指向原来的构造函数
查看实例
1 | function Father(uname,age){ |
ES5新增方法
- 数组方法 map() every()
forEach()
遍历方法,有一个回调函数
里面有3个参数 value,index,array,分别表示每个元素的值,每个元素的索引号,元素本身- 迭代
filter()
筛选的作用 ,返回一个新的数组 return 迭代遍历 some()
查找元素中是否有满足条件的元素, 返回的是布尔值,找到第一个满足条件的元素终止循环every()
方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。map()
方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
- 在
forEach
和filter
里面遇到return true
不会终止迭代 ,在some
里面遇到return true
停止迭代
查看答案
1 |
|
字符串方法
trim()
方法 去除字符串的两侧的空格
对象方法
- 用于获取对象自身所有的属性 Object.keys(obj)
Object.defineProperty(对象,属性,descriptor 对象的格式{ value: ''})
定义对象中的属性或者修改原有的属性
- descriptor中的属性值:
value
表示所修改或者新增的值,默认为undefined,writable:false
不允许修改属性值 - enumerable;表示目标属性是否可以被遍历,默认值为false
- configurable:表示目标属性是否可以被修改或者删除,或者再次修改新特性 默认为false
函数的定义方法
- 命名函数,匿名函数
- 利用
var fn = new function(‘参数’,’参数‘,’函数体‘)
必须以字符串的格式编写 - 所有的函数都是Function的实例对象,函数也属于对象
函数的调用方式
普通函数的调用
1
2
3
4function fn(){
console.log(11);
}
fn(); fn.call()对象的方法调用
1
2
3
4
5
6var o = {
fn:function(){
console.log(11);
}
}
o.fn();构造函数的调用方法
1
2
3
4function Fn(){
console.log(11);
}
new Fn();绑定事件函数
1
2
3obj.onclick = function(){
console.log(11);
}定时器函数的调用
1
2
3setInterval(function(){
console.log(11)
},1000)立即执行函数
1
2
3
4
5
6
7(function(){
console.log('立即执行函数'+11);
})()
//第二种
(function(){
console.log('立即执行函数'+11);
}())改变函数内部的this的指向
call(arr,'','')
arr为对象,后面可以传递参数;调用函数;改变函数内的this指向;主要作用可以实现继承apply(thisarr,[''])
方法 也是调用函数可以改变函数内部的this指向,但是传递参数时必须以数组的形式传递(伪数组)
- 调用数学内置对象 比如:
Math.max.apply(Math,arr)
,arr必须为数组
的形式
- bind(thisarr,’’,’’)方法
不会调用函数
,也能改变指向, 但是返回的是原函数改变this之后产生的函数
查看实例
1 | // 使用bind方法来改变函数内部的this指向 |
严格模式
'use strict';
为整个脚本开启严格模式- 可以为某个函数开启严格模式
- 不能随意删除已经定义好的变量
- 严格模式下的全局变量的this是
undefined
- 严格模式下调用构造函数必须加new
- 函数名不允许有重名的情况
- 不允许在非函数里声明函数
高阶函数
- 对其他函数进行操作的函数,接受函数作为
参数
或者将函数作为返回值输出
- 函数也是一种
数据类型
回调函数
–高阶函数
闭包(Closure)
- 函数,有权访问另一个函数作用域中变量的函数,被访问函数变量
查看实例
1 | (function(){ |
- 主要作用:延伸了变量的作用范围
案例获取元素索引号,打印元素的内容类似
查看案例使用闭包获取元素索引号
1 | // 第一种使用动态添加属性来获取某个索引号 |
案例打车价格
查看案例
1 | // <!-- 使用闭包来实现 打车的收费,定义起步价;10 超过3公里 按/公里 5 ,如果有拥堵的情况多收10 --> |
闭包思考重点
- 匿名函数中的this指向为window,立即执行函数封装功能不污染全局变量
- 判断this的指向 这里的this指向的是函数的调用者,对象,使用了局部变量 闭包使用
查看实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24// 匿名函数中的this指向为window,立即执行函数封装功能不污染全局变量
var name = 'the window'
var obj = {
name: 'world',
sun: function(){
return function(){
return this.name
}
}
}
console.log(obj.sun()());
// 判断this的指向 这里的this指向的是函数的调用者,对象,使用了局部变量 闭包使用
var uname = 'tt'
var objs = {
uname:'kk',
ff:function(){
var that = this
return function(){
return that.uname;
}
}
}
// 立即执行函数
console.log(objs.ff()());
递归函数
- 在函数的内部自己调用自己
- 递归函数中必须加退出语句
查看实例
1 | // var num = 1; |
浅拷贝和深拷贝
- assign(目标对象,源对象),浅拷贝
- 深拷贝 使用递归函数
查看实例
1 | // 浅拷贝只拷贝地址,会影响原来的数据,不会新建一个对象 |
正则表达式
- 对象 用于匹配字符串中字符组合的模式
- 匹配,替换,提取
- 不需要加引号
创建正则表达式
- 使用RegExp对象来创建 格式
var 变量名 = new RegExp(/ /)
- 利用字面量创建 格式
var rg = /123/
测试是否符合规范
- test() 正则对象方法 表达式.test(str) 返回true/false
特殊字符
- 元字符
^ + - / *
等等 - 边界符
^ $
开头或者结尾 - 字符类:
[]
表示有一系列字符可供选择,匹配一个即可-
表示范围 - 如果中括号里面有
^
表示取反 - 量词符 设置模式出现的次数
- 量词,中间不要有空格 ,注意如果是
/^abc{3}$/
表示的是将c重复三次 ,如果加了小括号(abc)
按前面的三个重复执行三次
查看实例
1 | var ld = /111/ |
表单验证案例
查看案例
1 | <style> |
预定义类
\d
\D
分别匹配所有数字和匹配所有的非数字\w
匹配任意的字母,数字和下划线,相当于[^a-zA-Z0-9_]
大写W
表示非数字非字母,非下划线\ s
匹配空格 大写表示非- 正则里面的或者用符号
|
表示
表单注册案例
1 |
|
正则表达式替换
stringObject.repalce('被替换的字符/正则表达式',' 要替换的字符')
使用repalce来实现字符串的替换- /表达式/[switch] swith参数 也称为i修饰符
g
全局匹配//g
i
忽略大小写
ES6声明变量的关键字
ECMAScript 脚本语言
let关键字
let
声明变量
- 块级作用域 {}
- 块级作用域 在大括号中使用let关键词才具有块级作用域
- 防止循环变量变成全局变量
- 使用let关键字的变量没有变量提升 先声明在提升
- 使用let关键词声明的变量具有暂时性死区 与所在的{}绑定
查看实例
1 | // 经典面试题 使用var 定义变量 这里时执行完for循环才会执行函数,所以获取到的数据始终都是全局变量下的数 |
const关键字
- 声明常量,不能变化的量,变量无法提升
- const常量的初始值必须赋值
- 常量声明后值不可更改,复杂数据类型中的值可以更改,直接赋值不允许
解构赋值
- 允许从数组中按照一一对应的关系提取值,并将值赋给变量
- 格式
let [a,b,c] = [1,2,3]
变量与值相对,如果不对应 输出的值为undefined - 对象解构,与数组类似
let {}
,允许使用变量的名字匹配对象的属性查看答案
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 第一种获取属性值的方法 对象解构
let per = {name:'ww',sex:'nan'}
let {name,sex} = per
console.log(name);
console.log(sex);
// const 对象解构第二种获取属性值的方法/
let perpon = {name:'mm',age:18}
let {name:myname,age:ages} = perpon
console.log(myname);
console.log(ages);
// 数组解构
let re = [1,2,3]
let [a,c,b] = re
console.log(b);
箭头函数
- 简化函数定义语法 格式:
() => {}
- 形参只有一个可以省略外侧的小括号
- 箭头函数不绑定this关键字
- say方法的箭头函数中的this指向的是定义这个方法的,对象是无法产生作用域的,所以这里的say中的this指向的是window,所以返回的值是undefined
查看答案
1
2
3
4
5
6
7
8var age = 100
var obj = {
name: 'mm',
age:15,
say:() =>{
console.log(this.name);
}
}
剩余参数
- 将不定量的参数表示一个数组
查看答案
1
2
3
4
5
6
7
8
9
10// 剩余参数 ...args
const sum = (...args) => {
// 这里只能使用let,和var 定义变量 不能使用const, 为定值无法改变
let total = 0;
// 遍历传入数组的值
args.forEach(items => total += items)
return total
}
console.log(sum(1,2,3))
console.log(sum(1,2))
扩展运算符
- 可以将数组拆分成以
,
分隔的参数序列,
在控制器中为空格分隔符 - 可以合并数组
- 将伪数组转换为真正的数组
[...ary]
ary
为获取元素所定义的属性合并数组的两种方法
1
2
3
4
5
6
7
8// 方法一
let arr = [1, 2, 3]
let a = [4, 5, 6]
let c = [...a, ...arr]
console.log(c);
// 方法二使用push方法
arr.push(...a)
console.log(arr); - array.from() 也可以将伪数组转换为真正的数组
查看答案
1
2
3
4
5
6
7
8
9// 使用from的方法将伪数组转换为数组
let obj = {
'0':'a',
'1':'b',
'2':'c',
length:3
}
console.log(obj);
console.log(Array.from(obj));
find()和findIndex()方法 includes(),startsWith,endsWith()
- 找出第一个符合条件的成员
find((,) => {})
- findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引
- includes() 判断数组中是否包含某个值 括号内为判断的数组内容 返回值为true或者false
- 将某个字符串重复输出n次 repeat(n)
模板字符串
${变量名}
, 注意必须加 ``反引号- 可以调用函数
- 模板字符串可以换行
Set数据结构
- 类似于数组,成员的值都是唯一的,没有重复的值
- 本身是一个构造函数
- 可以使用set()方法来实现数组去重
- 使用add方法向set()中添加值
查看答案
1 | // 伪数组 |
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论