注释很详细，直接上代码
此部分为继承的原理，是为了更好的提高对ES6中类的实现的认知
新增内容：
1.静态成员与实例成员的区分
2.原型对象的应用- 扩展内置 |对象方法|
3. 借用父构造函数继承属性与方法
项目结构：
仅一个文件
源码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
//静态成员与实例成员
//-------------------------------------------------------🌹🌹🌹
/*
function Person(name, age) {
//静态成员，附加在类上而非实例上，所以实例不能访问
Person.stat = "正常"; //显示声明
//实例成员
this.name = name;
this.age = age;
this.say = function () {
alert(
this.name + "今年" + this.age + "岁了" + "，状态是" + Person.stat
);
};
}
let p = new Person("眨眼睛", 500);
p.say();
console.log(Person.stat); //正常
console.log(p.stat); //undefined
console.log(Person.id); //undefined
Person.id = 999; //隐式声明(不建议，静态成员一般不建议隐式声明)
console.log(Person.id); //999
*/
//原型对象的应用- 扩展内置`对象方法`
//你别说你还真别说，这玩意用起来蛮得劲
//-------------------------------------------------------🌹🌹🌹
/*
Array.prototype.mySum = function () {
//this 指向调用mySum的数组
let sum=0;
for (let i = 0; i < this.length; i++) {
sum+=this[i];
}
return sum;
};
let arr = [1, 2, 3, 4, 5];
console.log(arr.mySum());
*/
// 借用父构造函数继承属性与方法
//-------------------------------------------------------🌹🌹🌹
// 1. 父构造函数
function Father(uname, age) {
// this 指向父构造函数的对象实例
this.uname = uname;
this.age = age;
}
Father.prototype.money = function () {
console.log(this.uname +":"+ 100000);
};
// 2 .子构造函数
function Son(uname, age, score) {
// this 指向子构造函数的对象实例
Father.call(this, uname, age);
this.score = score;
}
//错误示范！此处是将子构造函数的原型对象指向父构造函数的原型对象，是引用
// Son.prototype = Father.prototype; 这样直接赋值会有问题,如果修改了子原型对象,父原型对象也会跟着一起变化
Son.prototype = new Father();//指向新对象的原型对象，相当于副本
// 如果利用对象的形式修改了原型对象,别忘了利用constructor 指回原来的构造函数
Son.prototype.constructor = Son;
//总而言之就是将Father的原型对象值赋值给Son的原型对象，再把其中原先指向的Father构造函数的constructor 指回Son构造函数
// 这样就实现了继承
// 这个是子构造函数专门的方法
Son.prototype.exam = function () {
console.log(this.uname+"要考试");
};
var son = new Son("嘎嘎嘎", 18, 100);
console.log(son);//Son { uname: '嘎嘎嘎', age: 18, score: 100 }
son.money();//嘎嘎嘎:100000
son.exam();//嘎嘎嘎要考试
</script>
</html>
效果演示：
注释了大部分，留下了一小部分，每个模块小友可自行取消注释查看