ES5、ES6分别实现js类的继承实例

本文详细对比了ES5中构造函数定义类的方法与ES6中使用class关键字定义类的区别,包括私有属性、原型属性、静态属性的定义方式,以及继承的实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对于ES5来说,一个构造函数(ES6中的类),成员属性主要有私有属性、特权方法(主要是用来访问私有属性)、原型属性、静态属性。(以下定义属性以及方法都是随机取名,没有任何意义)

1.定义一个Person父类:

function Person(name = "default",age = 18){
    this.name = name;
    this.age = age;
    var currClassName = "person";//私有属性
    this.printClassName = function(){//特权方法 主要是用来访问私有属性
        console.log("className:"+currClassName)
    }
}
//原型属性
Person.prototype.className = "person";
//原型方法
Person.prototype.printName = function(){
    console.log("my name is " + this.name)
}

//静态属性
Person.version=1.1

    2.定义一个People 类,并继承Person类

function People(name = "default", age = 18, sex = 'man'){
    //特权属性及方法继承
    Person.call(this, name, age)
    this.sex = sex;
    var currClassName = "people";//私有属性
    this.printClassName = function(){//特权方法 主要是用来访问私有属性
        console.log("className:" + currClassName)
    }
}
//原型属性
Person.prototype.className = "people"
//原型方法
People.prototype.printSex=function(){
    console.log("my sex is " + this.sex)
}
//原型链属性继承
People.prototype.__proto__ = Person.prototype;

//静态属性继承
People.__proto__ = Person;

3.执行并且运行

const p=new People('jioser',25,'man')
p.printClassName();//className:people
p.printName();//my name is jioser
p.printSex();//my sex is man
console.log(p.className);//people
console.log(People.version)//1.1

是不是感觉很麻烦,不用担心,ES6给我们提供了class类语法糖,看看实现相同结果的代码

class Person{
    constructor(name='defalut', age=18){
        this.name=name;
        this.age=age;
        let currClassName = "person";//私有属性
        this.printClassName = function(){//特权方法 主要是用来访问私有属性
            console.log("className:" + currClassName)
        }
    }
    //原型方法
    printName(){
        console.log("my name is " + this.name)
    }
    get className(){
        return "person"
    }
    //静态属性
    static get version(){
        return 1.1
    } 
}

class People extends Person{
    constructor(name = "default", age = 18, sex = 'man'){
        super(name,age);
        this.sex = sex;
        let currClassName = "people";//私有属性
        this.printClassName = function(){//特权方法 主要是用来访问私有属性   
            console.log("className:" + currClassName)
        }
    }
    printSex(){
        console.log("my sex is " + this.sex) 
    }  
}

const p=new People('jioser', 25, 'man')
p.printClassName();//className:people
p.printName();//my name is jioser
p.printSex();//my sex is man
console.log(People.version)//1.1

是不是变的简单很多。这里的super,以前有朋友问过我,我认为是等同于Person.prototype的,但也不能说是等于,因为看它调用的场景,它的指向会指向子类的this ,所以具体是什么,需要自己去试一试  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值