1.ES6中class的介绍
通过class关键字,可以定义类。基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
ES6中Class的继承
实例:
注意项:
1.在类中声明方法的时候,千万不要给该方法加上function关键字
2.方法之间不要用逗号分隔,否则会报错由上面代码可以看出类实质上就是一个函数。类自身指向的就是构造函数 所以可以认为ES6中的类其实就是构造函数的另外一种写法!
constructor方法是类的构造函数的默认方法,通过new命令生成对象实例时,自动调用该方法
constructor中定义的属性可以称为实例属性(即定义在this对象上),constructor外声明的属性都是定义在原型上的,可以称为原型属性(定义在class上)。
hasOwnProperty()函数用于判断属性是否是实例属性。其结果是一个布尔值, true说明是实例属性,false说明不是实例属性。
in操作符会在通过对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中。
class不存在变量提升,所以需要先定义再使用。因为ES6不会把类的声明提升到代码头部,但是ES5就不一样,ES5存在变量提升,可以先使用,然后再定义
首先我们要知道一下这些要点:
1、Class通过 extends 关键字实现继承。
2、super 关键字既可以当作函数使用,也可以当作对象使用。` ① super 作为函数调用时表示父类的构造函数,用来新建父类的this对象。
同时需要注意:
a、子类必须在 constructor 方法中调用 super 方法,否则新建实例时会报错。
b、如果子类没有定义 constructor 方法,那么这个方法就会被默认添加。
c、在子类的构造函数中,只有调用 super 方法之后才能够使用 this 关键字,否则会报错。
d、super 虽然代表了父类的构造函数,但是返回的是子类的实例,即 super 内部的 this 指定的是子类。
e、super () 只能用在子类的构造函数之中,用在其他地方会报错。
② super 作为对象时在普通方法中指向父类的原型对象;在静态方法中指向父类。
同时需要注意:
a、由于 super 指向父类的原型对象,定义在父类实例上的方法或属性是无法通过 super 调用的。如果定义在父类的原型上,super 就可以取到。
b、ES6规定,通过 super 调用父类的方法时,super 会绑定子类的 this。
c、如果通过 super 对某个属性赋值,这时 super 就是 this,赋值的属性会变成子类实例的属性。
d、如果 super 作为对象用在静态方法之中,这时 super 将指向父类,在普通方法之中指向父类的原型对象。
`
2.解构赋值
解构赋值就是从目标对象或数组中提取自己想要的变量。最常用的场景是:element-ui,vant-ui按需引入,请求接口返回数据,提取想要数据。
注意点:数组的解构赋值需要左边的变量结构需要等于右边的值的结构,即给对应位置的变量声明对应位置的值,变量的取值由位置决定
解构赋值使用场景:
第一种:变量互换
例子:
{
let a=1;
let b=2;
[a,b]=[b,a];
console.log(a,b);
}
输出2,1
以前想交换变量必须要一个中间变量做存贮
场景2:
{
function f(){
return [1,2]
}
let a,b;
[a,b]=f();
console.log(a,b);
}
输出1,2
这种来接收这种数据就特别方便!以前就得先赋值给一个变量。再.[0]来取、、
场景3:
忽略某些返回值!!
{
function f(){
return [1,2,3,4,5]
}
let a,b,c;
[a,b]=f();
console.log(a,b);
}
输出结果为 1 4
场景4:
只想看第一个数的值,但不知道后边数组的长度。这样a就返回第一个值,b就返回后边的数组!
{
function f(){
return [1,2,3,4,5]
}
let a,b,c;
[a,…b]=f();
console.log(a,b);
}
返回1 [2,3,4,5]
讲解对象解构赋值:
对象左侧是对象的格式,右侧也是对象的格式!
{
let o={p:42,q:true};
let {p,q}=o;
console.log(p,q);
}
输出 42 true
{
let {a=10,b=5}={a:3};
console.log(a,b);
}
输出:3 5
给a重新赋值。b原来有自己的值
对象解构赋值的应用场景:
{
let Data={
title:‘abc’,
test:[{
title:‘test’,
desc:‘description’
}]
}
let {title:titleA,test:[{title:titleB}]}=Data;
console.logtitleA,titleB);
}
结果:abc test