TS学习笔记05 JS继承

TS学习笔记05 JS继承

在学习TS继承之前，我们需要了解JS的继承，这两者自然是有很多相似的地方。

function Person(name,age){
    this.name = name;
    this.age = age;
    this.study = function(){
        console.log('正在学习。。。。。');
    }
}
Person.prototype.sex = 'male';
Person.prototype.show = function(){
    console.log('自我介绍。。。',this.name+','+this.age+','+this.sex);
}

方式1：对象冒充继承，也称为构造继承

/**
 *  核心：使用call，以对象冒充的形式调用父类的构造函数，相当于是复制父类的实例属性给子类
 *  缺点：只能继承父类构造函数中的属性和方法，无法继承原型中的属性和方法
 */
function Student(name,age){
    Person.call(this,name,age); // 此时Person中的this指向的是Student的对象，所以称为对象冒充
}

var stu1 = new Student('tom',18); 
// 可以继承构造函数中的属性和方法
console.log(stu1.name,stu1.age);
stu1.study();
// 无法继承原型中的属性和方法
console.log(stu1.sex);
stu1.show();

我们查看执行结果：

​ 当我们想要打印stu1.sex时，却发现打印出来的是undefined，这是因为sex属性是通过原型链的方式增加上去的，改方法只能继承父类构造函数中的属性和方法，无法继承原型中的属性和方法。

方式2：原型链继承

/**
 *  核心：使用prototype，将父类的对象作为子类的原型
 *  缺点：创建子类实例时，无法向父类构造函数传参，导致继承的父类属性没有值
 */
function Student(name,age){
	
}
Student.prototype = new Person(); // 将Student的原型指向Person实例，从而继承Person

var stu1 = new Student('tom',18);
console.log(stu1.name,stu1.age,stu1.sex);
stu1.study();
stu1.show();

我们查看执行结果:

​ 发现明明在构造对象的时候，也就是new Student的时候，向里面传了两个参数，但是打印的时候却发现undefined，而直接通过原型向里面添加的元素sex是可以打印出来的。这就说明了这种继承方法创建子类实例时，无法向父类构造函数传参，导致继承的父类属性没有值。

​

方式3：组合继承：对象冒充+原型链

function Student(name,age){
    Person.call(this,name,age);
}
// Student.prototype = new Person(); // 用法1：调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了），所以性能稍微差一点
Student.prototype = Person.prototype; // 用法2：完美

var stu1 = new Student('tom',18);
console.log(stu1.name,stu1.age,stu1.sex); 
stu1.study();
stu1.show();

我们查看执行结果:
​ 这次执行结果就很完美。