【JavaScript】继承的几种方式
本博客三种继承导图
1、原型继承:
<script>
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
};
Person.prototype.sayHi = function () {
console.log("您好");
};
function Student(score) {
this.score = score;
}
//继承了人的数据
Student.prototype = new Person("小明", 10, "男", "50KG");
var stu1 = new Student("100");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
var stu2 = new Student("110");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
var stu2 = new Student("120");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
</script>
控制台显示的结果
这种继承方式有个缺点就是继承的所有的属性都是一样的
2、构造函数继承
function Student(name, age, sex,score) {
Person.call(this, name, age, sex ,score)
this.score = score;
}
var stu1 = new Student("小明", 10, "男", "10KG", "100");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
stu1.sayHi();//将会报错,他不能继承
var stu2 = new Student("小红", 20, "男", "30KG", "50");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
var stu3 = new Student("小绿", 30, "男", "20KG", "70");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
上边的确实解决了属性的继承的问题,但是不能继承方法!
3、组合继承:在构造函数继承的基础上添加原型继承(改变原型指向)
function Student(name, age, sex,score) {
Person.call(this, name, age, sex ,score)
this.score = score;
}
//改变原型指向
Student.prototype = new Person();
var stu1 = new Student("小明", 10, "男", "10KG", "100");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
stu1.sayHi();
var stu2 = new Student("小红", 20, "男", "30KG", "50");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
var stu3 = new Student("小绿", 30, "男", "20KG", "70");
console.log(stu1.name, stu1.age, stu1.sex, stu1.score);
此时就可以继承方法了!