什么叫继承
-
一个类继承父类的属性和方法
-
ES6之前并没有专门用于继承的关键字。 ES6之后有了Class和extends。
为什么要实现继承?
-
一类对象是包含另一类对象的。比如说,人肯定是包含老师的。老师肯定是一个人。人的属性老师肯定有。
-
为了体现两者之间的关系,就需要实现继承
实现继承的方法:(ES6之前)
1.使用原型链继承
将子类的原型对象 修改为 父类的实例对象。
Son.prototype = new Father()
示例
// 让老师继承人的属性和方法。
//人
function Person(name,age){
this.name = name;
this.age = age;
}
//老师
function Teacher(jobTitle,pay){
this.jobTitle = jobTitle;
this.pay = pay;
}
// Teacher.prototype.name = "张三";
// Teacher.prototype.age = 28;
//实例化一个Person对象,将对象的地址赋值给Teacher的prototype属性。
// 【注意】Teacher.prototype原来指向的对象就没有了,指向新的Person实例对象。
Teacher.prototype = new Person("李四",30);
var z = new Teacher("体育老师",3000);
console.log(z.name);
console.log(z.age);
原型链继承图解
2.借用构造函数
在子类的构造函数中,普通方式调用父类的构造函数,需要使用call或者apply来修改 构造函数的this指向。
function Son(param1,param2){
Father.call(this,param1,param2);
}
**缺点:**
1.继承来的方法只能定义在构造函数中,不能定义在父类的原型对象上
2.继承来的函数无法复用,占用内存比较大。
示例
// 人
function Person(name, age) {
this.name = name;
this.age = age;
this.emotion = ['喜', '怒', '哀', '乐'];
this.eat = function () {
console.log("干饭人干饭魂,干饭都得用大盆");
}
}
// Person.prototype.eat = function(){
// console.log("干饭人干饭魂,干饭都得用大盆"); //方法只可以写在函数内部 不便于调用
// }
//老师
function Teacher(name, age, pay) {
Person.call(this, name, age);
this.pay = pay;
}
var t1 = new Teacher("马老师", 40, 3000);
var t2 = new Teacher("张老师", 18, 10000000);
console.log(t1.eat == t2.eat); //false
3 组合继承:
特点: 结合了原型链继承和借用构造函数继承两者的优点;
如何使用
1.在子类的构造函数中借用父类的构造函数 father.call(this);
2.将父类的方法定义在父类的原型对象上。
3.将子类的原型对象指向 父类的实例对象
4.修正constructor属性。
示例
// 人
function Person(name, age) {
this.name = name;
this.age = age;
this.emotion = ['喜', '怒', '哀', '乐'];
}
//将父类的方法定义在父类的原型对象上。
Person.prototype.eat = function () {
console.log("干饭人干饭魂,干饭都得用大盆");
}
//老师
function Teacher(name, age, pay) {
//在子类的构造函数中借用父类的构造函数
Person.call(this, name, age);
this.pay = pay;
}
//将子类的原型对象指向 父类的实例对象
Teacher.prototype = new Person();
//Teacher的原型对象已经被修改为Person的实例对象了。 Person的实例对象是没有constructor属性的,所以下面这个代码会输出 false
// console.log(Teacher.prototype.constructor == Teacher); // false 应该是true。
//修正 Teacher的原型对象上 constructor属性 的指向。
Teacher.prototype.constructor = Teacher;
var t1 = new Teacher("王老师",30,5000);
console.log(t1.name); // 可以继承父类的属性
t1.eat();//可以继承 父类原型对象上的方法。
t1.emotion.push("愁");
console.log(t1.emotion);
var t2 = new Teacher("周老师",35,7000);
console.log(t2.emotion); //解决了 原型链继承中 对复杂数据类型修改出现误差的情况
console.log(t1); // name age emotion pay 在t1这个实例对象上都有。
继承图解