ES5之前类的继承是靠原型实现的,而这一过程的实现又涉及到一大堆的原型定义,而SE6为了使得javascript的类继承像java之类的语言一样更加简单纯粹,也推出了class这个定义类的关键字,虽然失去了一点灵活性,但是代码变得更加简单了。
像其他语言一样,SE6用关键字class定义一个类,该类有一个名为constructor()的函数,SE6的类必须有这个函数,如果没设就会默认添加一个,类似于java的构造方法,这个函数中的this指向生成的实例。
ES6
书写格式:
class 类名{
constructor(...接收实例化时传的实参){
this.XXX = 形参
}
方法名(){函数体}
}
class Person {//语法糖
constructor(name, age, gender, money) {//构造器
this.name = name;
this.age = age;
this.gender = gender;
this.money = money;
}
say(){
console.log(`我的姓名是${this.name},我有${this.money}元`);
}
}
let gf = new Person("z3",28,"female",1000000);
gf.say();//我的姓名是z3,我有1000000元
类的typeof是Function(原因是类就是构造函数)
1、class声明的类,具有暂时性死区,必须先声明再使用
2、class声明的类,不能当做普通函数调用(即必须加new)
3、class声明的类,手动更改返回值(引用值有效,其他类无效)
类中的函数,直接挂载到类的原型上
类的原型添加属性:类.prototype.属性名 = 属性值
注:优化性能的考虑,不要放在construcor
给类添加静态方法
书写格式:
static属性名
static price = “40000”;
static方法名
static say() = function(){}
只可以类来使用,实例无法使用
class Elec {
constructor(name){
this.name = name;
}
static price = "40000";
static sale() {
console.log(`原价:${this.price},折后${this.price*0.75}`);
}
}
Elec.sale();//原价:40000,折后30000
console.log(Elec.price);//40000
原型上不能定义属性,只能定义get(取值器)和set(设值器),取值器和设值器都是在原型上的
class Animal{
constructor(color){
this.color = color;
};
get _color(){
return this.color;
}
set _color(value){
return this.color = value;
}
}
var am = new Animal();
am._color = 'red';
console.log(am._color);//red
console.log(am.color);//red
定义属性在constructor内部,通过继承得到原型的属性和方法
B类 extends A类,代表A类中所有的方法和属性B类可以使用
super与extends配套使用,super是方法,参数是B类的形参或者变量或值
注:super必写放在B类的constructor的第一行
class Vehicle {
constructor(name,eng,price){
this.name = name;
this.eng = eng;
this.price = price;
}
didi(){
console.log("didiid");
}
}
class Car extends Vehicle {
constructor(name,eng,price,diver){
// super只能放在constructor的第一行
super(name,eng,price);
this.diver = diver;
}
dive() {
if(this.diver){
console.log(`找代驾`);
}
}
}
class Bus extends Vehicle {
constructor(name,eng,price,pass){
super(name,eng,price);
this.pass = pass;
}
}
let car1 = new Car("BMW","123",4000);
let bus1 = new Bus("BYD","公交",40000,40);
console.log(car1.name); //BMW
car1.didi(); //didiid
console.log(bus1.name,bus1.price);//BYD 40000