ES的类与继承

ES5中的类与继承

构造函数继承，原型继承，组合式继承

function Animal(name){
    this.name=name
}
Animal.prototype.showName=function(){
    console.log('我的名字是：'+this.name);
}
//构造函数继承
function Dog(name,color){
    Animal.call(this,name)  //继承属性，让animal中的this指向dog中的this，传递dog的name参数
    this.color=color
}
// d1.showName() //构造函数继承不能继承方法

//原型继承
Dog.prototype= new Animal()
Dog.prototype.constuctor = Dog

let d1=new Dog('wangcai','white')
console.log(d1);  //{name: "wangcai", color: "white"}
d1.showName() //原型继承+构造函数继承=组合式继承

静态方法，静态属性，实例方法，实例属性

function Animal(name){
    //实例属性 直接定义在构造函数里的
    this.name=name
    Animal.count++
}
//实例方法 用类的原型下定义的方法 实例可以调用
Animal.prototype.showName=function(){
    console.log(this.name);
}
//静态属性 定义在类上的属性
Animal.count=0
let a1=new Animal('daji')
console.log(Animal.count); //1  1个实例对象a1

//静态方法 在类上面定义的方法
Animal.getCount = function(){
    console.log(Animal.count); //0
}
Animal.getCount() //调用静态方法


//例如Math调用方法时没有new，直接在类上调用，与实例无瓜,是静态方法
console.log(Math.max(4,5));
console.log(Math.random());

ES6中的类与继承

定义类

class People{
    constructor(name,age){
        this.name=name
        this.age=age
    }
    showName(){
        console.log(this.name);
    }
}
let p1=new People('daji',3)
console.log(p1);

类继承

class Coder extends People{     //extends
    constructor(name,age,company){
        super(name,age)      //super
        this.company=company
    }
    showCompany(){
        console.log(this.company);
    }
}
let c1=new Coder('daji',3,'Alibaba')
c1.showName()   //daji
c1.showCompany()   //Alibaba

定义静态方法

class People{
    constructor(name,age){
        this.name=name
        this.age=age
    }
    showName(){
        console.log(this.name);
    }
    static getCount(){    //static静态方法，类似Math.max，在类中定义与实例对象无关
        return 5
    }
}
let p1=new People('daji',3)
//console.log(p1.getCount()); //报错 不能用实例调用
console.log(People.getCount()); //5

class Coder extends People{     
    constructor(name,age,company){
        super(name,age)      
        this.company=company
    }
    showCompany(){
        console.log(this.company);
    }
}

let c1=new Coder('daji',3,'Alibaba')

//console.log(c1.getCount()); //报错 不能用实例调用
console.log(Coder.getCount()); //5 子类构造函数可以调用父的静态方法

//PS:使用的是ES5的方法定义静态属性
People.count=9
console.log(People.count);  //9 

在构造函数内最顶层定义属性

class People{
    constructor(name,age){
        this.name=name
        this.age=age
        this._sex=-1    //定义一个新属性_set
    }
    showName(){
        console.log(this.name);
    }
    get sex(){       //get表示只读 p1.sex='female'赋值会报错
        return this._sex
    }
    set sex(val){
        this._sex=val   //直接给sex赋值会陷入死循环
    }
}
let p1=new People('daji',3)
console.log(p1);
p1.sex='female'  //使用set
console.log(p1.sex); //female

可用于拦截处理一些业务逻辑操作，例如：需要传入1返回male，传入0返回female

class People{
    constructor(name,age){
        this.name=name
        this.age=age
        this._sex=-1   
    }
    showName(){
        console.log(this.name);
    }
    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   
        }
    }
}
let p1=new People('daji',3)
p1.sex=0
console.log(p1.sex); //female
p1.sex=1 
console.log(p1.sex); //male