注意：
1、ES6里面class没有提升功能，在ES5中，用函数模拟可以提升。
2、ES6里面this简单了。
先大概回顾一下之前都是如何面向对象的：
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.showName=function(){
return `我叫${this.name}`;
}
Person.prototype.showAge=function(){
return `我今年${this.age}`;
}
或者：
Object.assign(Person.prototype,{
showName(){
return `我叫${this.name}`;
}
showAge(){
return `我今年${this.age}`;
}
})
然后：
var p1=new Person('yangyi','18');
console.log(p1.showName());
console.log(p1.showAge());
ES6是这样的：
class Person{//这其实也是一个函数
constructor(name,age){//构造方法 new时 自动执行
this.name=name;
this.age=age;
}
show(){
return `我叫${this.name}今年${this.age}岁`;
}
}
let p1=new Person('yangyi',18);
console.log(p1.show());
也可以这样定义类：
const Person=class { ...}
ES6中属性名，可以是一个变量：
let a="aaa";
let b="bbb";
class Person{
[a+b](){
return'随便。。。';
}
}
let p=new Person();
console.log(p.aaabbb());
class中的取值函数getter与存值函数setter:(多用于封装插件、模块等)
class Person{
constructor(){}
get aaa(){
return `aaa的属性`;
}
set aaa(val){
console.log(`设置aaa属性,值为:${val}`);
}
}
let p=new Person();
p.aaa='123';//存值
console.log(p.aaa);//取值
class中的静态方法：用类的名字可以直接调用静态方法，若调用非静态方法，返回undefined。
class Person{
constructor(){}
showname(){
return "这是showname方法";
}
static aaa(){
return "这是静态方法";
}
}
let p=new Person();
console.log(p.showname());//这是showname方法
console.log(Person.showname());//undefined
console.log(Person.aaa());//这是静态方法
静态方法也可以被子类继承，之前子类继承父类比较麻烦，大概是这样：
//父类
function Person(name){
this.name=name;
}
Person.prototype.showname=function(){
return `名字是${this.name}`;
}
//子类
function student(name,skill){
Person.call(this);
this.name=name;
this.skill=skill;
}
student.prototype=new Person();//继承方法
//调用
let stu1=new student('yang','逃学');
console.log(stu1.showname());
console.log(stu1.name,stu1.skill);
ES6中继承比较简单：
//父类
class Person{
constructor(name){
this.name=name;
}
showname(){
console.log("这是父类的showname");
return `我叫${this.name}`
}
}
//子类继承父类
class student extends Person{}//只继承父类，没有自己的东西
或者继承父类同时要写自己的东西：
class student extends Person{
constructor(name,skill){
super(name);//继承父类同时要写自己的东西时，一定要有这一步，意思是继承父类东西
this.skill=skill;//子类自己的参数
}
showskill(){//子类自己的方法
return `我的技能是${this.skill}`;
}
//当子类中有与父类同名的方法时，调用子类的 showname()，会将父类中的 showname()覆盖掉。要想及执行子类中的 showname()，也执行父类中的 showname()，可以加入 super.showname(); 如下：
showname(){
super.showname();
console.log("这是子类的showname");
}
}
//调用
let stu1=new student('yang');
console.log(stu1.showname());
console.log(stu1.showskill());
网友评论