SOURCE

// function Person(name) {
//     this.name = name
//     this.printName = function () {
//         console.log('我的名字：' + this.name)
//     }
// }
// Person.prototype = {
//     shareFn: function () {
//         console.log('共享方法')
//     }
// }
// function Student(name, score) {
//     Person.call(this, name);
//     this.score = score
// }
// Student.prototype = {
//     printScore: function () {
//         console.log('我的分数：' + this.score)
//     }
// }
// function extend(p, c) {
//     c.prototype = Object.assign(c.prototype, Object.create(p.prototype))
//     c.prototype.constructor = c
// }
// //extend(Person, Student)
// Student.prototype = Object.assign(Student.prototype, new Person())
class Person {
    constructor(name, age) {
        this.name = name
        this.age = age
    }
    printName() {
        console.log('我的名字：' + this.name)
    }
    shareFn() {
        console.log('共享方法')
    }
    printAge() {
        console.log('我的年龄：' + this.age)
    }
}
class Student extends Person {
    constructor(name, age, score) {
        super(name, age)
        this.score = score
    }
    printScore() {
        console.log('我的分数：' + this.score)
    }
}
const xiaoming = new Student('夏明', 20, 100)
xiaoming.printAge()

<div class="p p1">
	<div class="c c1"></div>
</div>
<div class="p p2">
	<div class="c c2"></div>
</div>
<div class="p p3">
	<div class="c c3"></div>
</div>

.p {
    width: 200px;
    height: 200px;
    background: red;
    margin-bottom: 10px;
}

.c {
    width: 100px;
    height: 100px;
    background: green;
}

.p1 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p2 {
    position: relative;
}

.c2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.p3 {
    position: relative;
}

.c3 {
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}