一, 前端工作中 想要使用面向对象 （封装+继承） 两套方案
1. 难 通用 es5
构造函数+原型 旧一点点的方式
<script>
/*
1. 构造对象 来创建对象
2. 对象 两种信息
属性
方法
*/
es5 原型链方式实现 面向对象
function person (){
this.name = '八戒';
this.age = '老家伙';
}
原型链
person.prototype.say = function (){
console.log(this.name, this.age);
}
调用
const ps = new person()
ps.say()
</script>
2. 简单 新方案 es6
（高级的js语法标准） class-类 简洁的语法来实现面向对象功能
<script>
/*
1. 构造对象 来创建对象
2. 对象 两种信息
属性
方法
*/
es5 原型链方式实现 面向对象
function person (){
this.name = '八戒';
this.age = '老家伙';
}
原型链
person.prototype.say = function (){
console.log(this.name, this.age);
}
调用
const ps = new person()
ps.say()
</script>
3. es6 的class 简洁 好用
让我们来选择实现面向对象 优先选择 es6 class
4. es6 关键字
class
- 新建一个类
constructor
- 接收 new 一个类的时候传递的参数
extends
- 子类要继承父类
- 默认情况 实现了 子类继承父类的属性和方法
super
当子类写了 extends同时 还写了 构造器 constructor
作用 - 调用了父类的构造器 方便给子类的属性赋值
类的基本使用-构造器
<script>
class person {
// 构造器
constructor (name,color){
this.name = name
this.color = color
}
say (){
console.log(this.name, this.color);
}
fiy (){
console.log(this.name, '芜湖');
}
}
const ps = new person('八戒', '瑟啊')
console.log(ps);
ps.say()
ps.fiy()
</script>
类的方式来实现继承
<script>
/*
父构造函数 Person
1 属性 name = "父亲"
2 方法 say 说话
儿子 去继承 父亲
1 属性
2 方法
*/
// function Person() {
// this.name="父亲";
// }
// Person.prototype.say=function(){
// console.log(this.name,"父亲的say方法");
// }
// function YellowPerson() {
// Person.call(this);
// }
// YellowPerson.prototype.say=Person.prototype.say;
// es6 类去实现继承
class Person {
name = '父亲';
say() {
console.log(this.name, '父亲的say方法');
}
}
// 直接就实现了 继承父亲的属性和方法 ！！！！
class YellowPerson extends Person {}
// 儿子实例 拥有 父亲 name属性和父亲的 say方法
const yp = new YellowPerson();
console.log(yp);
</script>
类的方式实现继承并添加
<script>
/*
对于子类
1. 如果你写了 extends 而且还写了 constructor
那么在我们的 constructor 必须调用 super 固定语法!!!!
2. 为什么 之前只写了 extends 不用写 super 是因为我们没有写 constructor
*/
class Person{
constructor (name, color) {
this.name = name
this.color = color
}
}
class newPerson extends Person {
constructor(name, color, width, height){
// 默认代码
super(name, color) // 调用父亲的构造器 給儿子 添加属性
this.width = width
this.height = height
}
}
const np = new newPerson('和尚', 'yellow', 13, 14)
console.log(np);
</script>
