![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：看来你是自学了,new.target咱们课上并没说 . 不错 , 为你的自学精神打call
Collection
Collection
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>类的继承：原生方式</title></head><body><script>// 父类function Phone(brand, price) {// 属性this.brand = brand;this.price = price;}// 公共方法/原型方法Phone.prototype.show = function () {return `手机品牌： ${this.brand}\n价格： ${this.price}\n`;};console.dir(Phone);// 子类function Tel(brand, price, color) {// 借助call()函数，实现继承，可传入父类中的参数Phone.call(this, brand, price);this.color = color;}console.dir(Tel);// 更新子类的原型对象Tel.prototype = Object.create(Phone.prototype);// 手工补上constructorTel.prototype.constructor = Tel;// 子类重写父类中的方法Tel.prototype.show = function () {return Phone.prototype.show.call(this).concat(`${this.color}`);};// 实例化子类const apple = new Tel("苹果", 5500, "银色");console.log(apple.show());const vivo = new Tel("Vivo", 3800, "红色");console.log(vivo.show());// ƒ Phone(brand, price)// ƒ Tel(brand, price, color)// 手机品牌： 苹果// 价格： 5500// 银色// demo1.html:42 手机品牌： Vivo// 价格： 3800// 红色</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>使用ES6实现类的继承</title></head><body><script>// 父类class Dad {// 构造方法constructor(name, email) {this.name = name;this.email = email;}// 原型方法show() {return `姓名：${this.name}\n邮箱：${this.email}\n`;}}// 子类class Son extends Dad {constructor(name, email, age) {// super() 调用父类中的构造方法super(name, email);this.age = age;}// 重写父类中的原型方法show() {// return `${super.show()}年龄：${this.age}`;// super 调用父类中的原型方法return super.show().concat(`年龄：${this.age}`);}}// 实例化子类const son = new Son("jack", "jack@qq.com", 20);console.log(son.show());</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>ES6实现抽象类</title></head><body><script>// 抽象类：不能实例化，可以继承// 父类class A {constructor() {// new.target属性：一般用于构造函数中// 1. 当在class内部调用时，会返回当前class名// 2. 当有子类继承时，会返回子类// 3. 此属性就是用于检查new的时候作用于哪个构造函数if (new.target === A) {throw new Error("本类不允许被实例化");}}}// 子类class B extends A {constructor(length, width) {super();this.length = length;this.width = width;}show() {return `长：${this.length} * 宽：${this.width} = 面积：${this.length * this.width}`;}}// 实例化// 1. 实例化父类 报错// const demo1 = new A();// Uncaught Error: 本类不允许被实例化// 2. 实例化子类const demo2 = new B(2, 5);console.log(demo2.show());// 长：2 * 宽：5 = 面积：10</script></body></html>
天蓬老师