欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ES6 类与继承

程序员文章站 2023-12-21 13:11:28
...

ES6中提供了一个关键字class允许我们声明一个类,通过关键字extends来实现类的继承,ES6中的类是一个语法糖,本质上还是由ES5的语法实现的,下面我们来详解ES6中的类与继承。

1.构造函数

先来看一下ES5中是如何定义一个类的

//ES5
function Person(name,age) {	//构造函数
    this.name=name;
    this.age=age;
    this.showName=function() {	
        console.log(this.name);
    }
}
var person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码

ES5中,将一个方法写成一个构造函数以此来实现类。

//ES6
class Person {
    constructor (name='李雷',age=20) {	//构造函数
    	this.name=name;
    	this.age=age;
        this.showName = function() {
            console.log(this.name);
        }
    }
}
const person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码

ES6中,使用关键字class声明一个类,在类中constructor函数是一个构造函数,用法与ES5类似。

注意:class跟let/const一样,是不存在变量声明提前的,调用class必须放在声明class之后。constructor函数若未定义,会自动生成一个方法体为空的constructor函数。

2 公有方法

ES5中的共有方法是定义在原型链上的,ES6则是直接写在类中,但它的原理依然是定义在原型链上的。

//ES5
function Person(name,age) {	//构造函数
    this.name=name;
    this.age=age;
}
Person.prototype.showName=function() {	
    console.log(this.name);
}
var person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码
//ES6
class Person {
    constructor (name='李雷',age=20) {	//构造函数
    	this.name=name;
    	this.age=age;
    }
    showName() {
        console.log(this.name);
    }
}
const person=new Person('李雷',20);
person.showName();   //输出李雷
复制代码

3静态属性/方法

静态属性/方法是使用类名.属性名/方法名调用的,在JS中一切皆对象的思想,方法也不例外,方法也是一个对象,那么定义静态属性/方法的方式就很简单了,下面看例子。

//ES5
function Person() { //构造函数
}
Person._name='人';
Person.show=function() {
    console.log('Hello World');
}
console.log(Person._name);  //输出人
Person.show(); //输出Hello World
复制代码
//ES6
class Person {
    constructor () {	//构造函数
    }
    static show() {
        console.log('Hello World');
    }
}
Person._name='人';
console.log(Person._name);
Person.show();   //输出Hello World
复制代码

ES6中class内只允许声明静态方法,不允许声明静态属性。使用关键字static声明静态方法。静态属性的声明方式与ES5的声明方式相同。

继承

ES5中的继承首先要执行父类方法,然后将原型对象指向父类的原型对象,最后修正原型对象的constructor属性,使其指回子类构造函数,比较麻烦,ES6中采用关键字extends实现继承,使用super调用父类的构造函数。

//ES5
function Person(name) { //Person类
	this.name = name;
}
Person.prototype.showName = function() {//原型链上定义方法
	console.log(this.name);
}

function Student(name, age) {   //Student类
	Person.call(this, name);
	this.age = age;
}
Student.prototype=Person.prototype; //修改Student的原型对象
Student.prototype.constructor=Student;//修正Student的原型对象的constructor属性,完成继承
var student = new Student('李雷', 20);
student.showName(); //输出李雷
复制代码
//ES6
class Person {
    constructor (name) {	//Person类
		this.name=name;
	}
	showName() {
		console.log(this.name);
	}
}
class Student extends Person{ //Student类继承至Person类
	constructor(name,age) {
		super(name);
		this.age=age;
		
	}
}
const student=new Student('李雷',20);
student.showName();
复制代码

小结

JS一直不方便书写OOP代码,这会导致我们写出几千行的js文件,使用ES6书写OOP代码配合模块化,可以让我们梳理出更好的项目结构。

交流

如果这篇文章帮到你了,觉得不错的话来点个Star吧。 github.com/lizijie123

转载于:https://juejin.im/post/5cfc64736fb9a07f0c4674ba

上一篇:

下一篇: