一、构造函数原型链继承
<script>
// 专门创建一个公共的构造函数,放公共的特征
function Person() {
this.head = 1;
this.legs = 2;
this.eyes = 2;
this.say = function() {
console.log('say方法');
}
this.eat = function() {
console.log('eat方法');
}
}
构造函数Chinese
function Chinese() {
this.language = 'chinese';
this.skin = '黄色';
}
// 继承:把实例对象赋值给子原型对象
Chinese.prototype = new Person();
// constructor:指回构造函数本身
Chinese.prototype.constructor = Chinese;
实例化对象
let c1 = new Chinese();
console.log(c1); 此时,实例对象就可以拥有 Person 公共的构造函数的属性和方法
c1.say();
详解:Person代表人类,Chinese代表中国人,当我们每次构造人这样一个函数的时候,都会带有一些属性
和方法,那样的话每次都要写共有的公共属性和方法,会造成代码的重复性,所以就用到了继承
1. 首先,先创建一个公共的构造函数,放公共的特征
2. 构造函数,并带有自己独特的属性
3. 未继承之前,构造函数的实例对象只能带有构造函数的独特属性,并没有公共的属性和方法
4. 此时就需要继承 Chinese.prototype = new Person() 把 Person 实例对象赋值给子原型对象
5. 继承之后,构造函数的实例对象去它的原型对象上就能访问公共的属性和方法了,但是这样就出现了覆盖情况,使 Chinese 的构造函数身上丢失了原本的 constructor 构造器
6. 所以还要指回构造函数本身 Chinese.prototype.constructor = Chinese 这样就是一个完整的继承
</script>
二、ES6的class类继承---> extends
- extends 是专门用于实现继承的语法关键字
- 如果想要实现继承,用extends定义子类,去继承父类
代码段:
<script type="text/javascript">
父类
class Person {
constructor (uname, age, sex) {
this.uname = uname;
this.age = age;
this.sex = sex;
}
eat () {
console.log('吃饭');
}
say () {
console.log('说话');
}
}
子类 添加 extends 继承
class Star extends Person {
}
let s = new Star('周星星', 22, '男');
console.log(s);
</script>
控制台打印结果:
此时 Star 子类继承了父类 Person 的属性,这就是 ES6 的 class 继承
但是,但是,但是,我们发现上面的继承时,子类里面什么都没写,没有自己的属性和方法,如果要是子类也要有属于自己的属性和方法时,上述继承就不管用了,所以我们就要想办法去解决,让子类既可以继承父类,也要有自己的属性和方法,就要用到 关键字 super
Super
在继承的过程中子类中 constructor 中必须调 super 函数,否则会有语法错误
- 子类构造函数中的 super 函数的作用是可以将子类实例化时获得的参数传入父类的构造函数之中。
- Super用于调用父类的方法
代码段:
<script type="text/javascript">
父类
class Father {
constructor (uname, age) {
this.uname = uname;
this.age = age;
}
qian () {
console.log('赚他一个亿');
}
}
子类
class Son extends Father {
constructor (uname, age, score) {
// 如果子类有自己的constructor必须通过super调用父类的方法
// super:用于调用父类的方法,可以调用构造方法和普通方法
// 构造方法:super(参数)
super(uname, age);
this.score = score;
}
qian () {
// 还想调用父类的方法
// 普通方法:super.qian();
super.qian();
console.log('赚了两毛钱');
}
}
let s1 = new Son('儿子', 9, 99);
console.log(s1);
s1.qian();// 就近原则
</script>
控制台打印结果: