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
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,386评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,142评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,704评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,702评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,716评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,573评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,314评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,230评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,680评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,706评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,329评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2 355

推荐阅读更多精彩内容