昨天小编更新了一下关于es5中的类的处理,也顺便将es5中类的知识和语法简单回顾一下,今天小编将es6中的与类相关的语法和大家一起探讨一下。在es6中,对类的实现主要是引入关键字class和extends。下面是一些例子。大家也可以关注我的微信公众号,蜗牛全栈。
一、类的创建
class People{
constructor(name,age){
this.name = name
this.age = age
}
showName(){
console.log(this.name)
}
}
let p1 = new People("lilei",34)
console.log(p1) // People{name:"lilei",age:34}
二、类的继承
class People{
constructor(name,age){
this.name = name
this.age = age
}
showName(){
console.log(this.name)
}
}
let p1 = new People("lilei",34)
console.log(p1) // People{name:"lilei",age:34}
class Coder extends People{
constructor(name,age,company){
super(name,age) // 通过super关键字,里面的参数是集成自父类
this.company = company
}
showConpany(){
console.log(this.company)
}
}
let c1 = new Coder("hanmeimei",24,"AILI")
console.log(c1) // Coder{name:"hanmeimei",age:24,company:"AILI"}
c1.showConpany() // AILI
c1.showName() // hanmeimei
三、通过get和set获取和设置类的属性
1、错误示范
class People{
constructor(name,age){
this.name = name
this.age = age
}
get sex(){ // 当前属性是只读的【get】
return "male"
}
set sex(val){
this.sex = val // 会反复调用这个方法,不停的对sex属性进行设置,进入死循环
}
showName(){
console.log(this.name)
}
}
let p1 = new People("lilei",34)
console.log(p1) // People{name:"lilei",age:34}
p1.sex = "female" // Maximum call stack size exceeded
2、正确示例
class People{
constructor(name,age){
this.name = name
this.age = age
this._sex = -1 // 为了防止死循环,引入新属性
}
get sex(){ // 属性
return this._sex
}
set sex(val){
this._sex = val
}
showName(){
console.log(this.name)
}
}
let p1 = new People("lilei",34)
console.log(p1) // People{name:"lilei",age:34}
p1.sex = "female"
console.log(p1.sex) // male
从上面的例子可以看出,引入set和get之后,代码量反而增加了,这对于小编这么懒的人来说是很难忍受的,后来去查阅资料,才知道这样做还是有设计者的道理的,如果我没记错的话,java也存在类似的操作。引入这个主要是为了规范在设置和取值的时候的业务逻辑,简单理解就是设置的时候,有设置时候的规则,获取有返回值的规则,看看下面的例子能更清晰一些。
class People{
constructor(name,age){
this.name = name
this.age = age
this._sex = -1 // 为了防止死循环,引入新属性
}
get sex(){ // 属性 根据_sex值不同返回不同信息
if(this._sex == 1){
return "male"
}else if(this._sex == 0){
return "female"
}else{
return "error"
}
}
set sex(val){ // 1表示male 0表示female 只有在设置值满足条件才能设置进去
if(val == 0 || val == 1){
this._sex= val
}
}
showName(){
console.log(this.name)
}
}
let p1 = new People("lilei",34)
let c1 = new Coder("hanmeimei",24,"AILI")
console.log(p1) // People{name:"lilei",age:34}
// p1.sex = 1
// console.log(p1.sex) // male
// p1.sex = 0
// console.log(p1.sex) // female
p1.sex = 666
console.log(p1.sex) // error
c1.sex = 1
console.log(c1.sex) // female 子类也可以使用对应的规则
四、静态方法和静态属性
1、静态方法:通过static关键字实现
class People{
constructor(name,age){
this.name = name
this.age = age
}
// 实例方法,通过实例对象调用
showName(){
console.log(this.name)
}
// 静态方法,通过类直接调用
static getCount(){
return 5
}
}
let p1 = new People("lilei",34)
p1.showName() // lilei
People.getCount() // 5
p1.getCount() // 报错:p1.getCount is not a function
2、静态属性:es6中没有单独规定静态属性的声明方式,建议使用以下方式定义静态属性。
class People{
constructor(name,age){
this.name = name
this.age = age
this._sex = -1 // 为了防止死循环,引入新属性
}
get sex(){ // 属性
if(this._sex == 1){
return "male"
}else if(this._sex == 0){
return "female"
}else{
return "error"
}
}
set sex(val){ // 1表示male 0表示female
if(val == 0 || val == 1){
this._sex= val
}
}
showName(){
console.log(this.name)
}
static getCount(){
return 5
}
}
class Coder extends People{
constructor(name,age,company){
super(name,age)
this.company = company
}
showConpany(){
console.log(this.company)
}
}
People.count = 8 // 定义People中的静态属性
let p1 = new People("lilei",34)
console.log(People.count) // 8
console.log(Coder.count) // 8 继承自该类的子类也可以访问“静态属性”
console.log(typeof People) // function [es6中class只是es5中的类的语法糖]