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

最新推荐文章于 2022-10-16 17:35:11 发布

xyjune

最新推荐文章于 2022-10-16 17:35:11 发布

阅读量462

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/weixin_29364823/article/details/87858328

版权

本文详细对比了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 ,所以具体是什么，需要自己去试一试