es6+最佳入门实践(12)

蔚落 2021-12-15 02:17 255阅读 0赞

# 12.class基础用法和继承 #

## 12.1.class基础语法 ##

在es5中，面向对象我们通常写成这样

function Person(name,age) { this.name = name; this.age = age; } Person.prototype.showName = function () { console.log(this.name); }; let p = new Person("xiaoqiang", 10); p.showName();

上面这种写法与传统的面向对象写法有很大的不同，让学习过其他面向对象语言的同学感到很别扭，因此，在ES6中，增加了语法糖，使用class关键字来定义类，这里说的语法糖的意思简单的理解就是另一种更便捷的写法，编译后的功能实际上是一样的

下面是ES6中定义类的语法：

class Person{ constructor(name, age){ this.name = name; this.age = age; } showName(){ console.log(this.name) } } let p = new Person("xiaoqiang2", 10); p.showName();

注意1: constructor是默认添加的方法，当new 关键字去调用类的时候，constructor会默认被执行,即使不写这个constructor方法，也会默认添加一个空方法

constructor(name, age){ console.log("开始执行了") this.name = name; this.age = age; }

注意2: 在类中写的方法之间不能加逗号，否则会报错

class Person{ constructor(name, age){ console.log("开始执行了") this.name = name; this.age = age; } showName(){ console.log(this.name) }, showAge(){ console.log(this.age); } } let p = new Person("xiaoqiang2", 10); p.showName();

## 12.2.继承 ##

在ES6中使用extends关键字来实现继承

class Parent{ constructor(name, age){ console.log("开始执行了"); this.name = name; this.age = age; } showName(){ console.log(this.name) } } //Child去继承 Parent class Child extends Parent{ } let c = new Child('nodeing', 20); console.log(c);

上面代码就是继承的基本写法，只是我们并没有在子类中去增加方法，此时，子类相当于去拷贝了父类

注意1: 在子类中如果重写父类的constructor方法，需要首先调用supper方法

class Parent{ constructor(name, age){ console.log("开始执行了"); this.name = name; this.age = age; } showName(){ console.log(this.name) } } class Child extends Parent{ constructor(name, age, gender){ super(name, age); this.gender = gender } } let c = new Child('nodeing', 20); console.log(c);

注意2: 如果这样写会报错：

class Child extends Parent{ constructor(name, age, gender){ this.gender = gender super(name, age); } }

视频教程地址：[http://edu.nodeing.com/course/50][http_edu.nodeing.com_course_50]

转载于:https://www.cnblogs.com/dadifeihong/p/10358138.html

[http_edu.nodeing.com_course_50]: http://edu.nodeing.com/course/50