TypeScript类前奏之ES5中的类

TypeScript类

//es5中的类：众所周知，在es5中是用构造函数来定义一个类
function Person () {
  this.name = 'ag'； // 属性
  this.age = 23；
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
}
var person = new Person()
person.run()
console.log(person.age)
Person.staticWork()
person.work()


//es5中的继承：原型链+对象冒充的组合继承模式
function Student(){
    Person.call(this);
}

var student = new Student();
student.run();//对象冒充可以继承里面的属性和方法
student.work(); //会报错，对象冒充无法继承原型链上的属性和方法

在es5中对象冒充可以继承构造函数里面的属性和方法，对象冒充无法继承原型链上的属性和方法。

原型链实现继承：

原型链继承
function Person () {
  this.name = 'ag'； // 属性
  this.age = 23；
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
}
var person = new Person()
person.run()
console.log(person.age)
Person.staticWork()
person.work()


//原型链继承模式
function Student(){
 }

Student.prototype = new Person(); //原型链继承
var student = new Student();
student.run();
student.work();
 

在es5中的原型链继承，既可以继承构造函数里面的属性和方法，也可以继承原型链上的属性和方法。

//原型链继承
function Person (name,age) {
  this.name = name； // 属性
  this.age = age；
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
} 


//原型链继承模式
function Student(){
 }

Student.prototype = new Person(); //原型链继承
var student = new Student('赵四',23);
student.run(); 
student.work(); 
//undefined在跑步
//undefined在工作

构造函数实现继承的时候，实例化子类的时候没办法给父类传参.

为了解决以上问题，引出：

原型链+构造函数的组合继承模式

很简单就是将以上两者组合起来

//原型链继承
function Person (name,age) {
  this.name = name; // 属性
  this.age = age;
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
} 


//原型链继承模式
function Student(name,age){
  Person.call(this,name,age); //对象冒充，可以继承构造函数里的属性和方法 
 }

Student.prototype = new Person(); //原型链继承
var student = new Student('赵四',23);
student.run(); 
student.work();
//赵四在跑步
//赵四在工作

原型链+对象冒充的另外一种方式

//原型链继承
function Person (name,age) {
  this.name = name; // 属性
  this.age = age;
  // 属性方法
  this.run = function () {
    console.log(this.name + '在跑步')
  }
}
// 静态方法
Person.staticWork = function () {
  console.log('静态方法在工作')
}
Person.prototype.sex = '男' // 原型链上属性
Person.prototype.work = function () { // 原型链上方法
  console.log(this.name + '在工作')
} 


//原型链继承模式
function Student(name,age){
  Person.call(this,name,age); //对象冒充，可以继承构造函数里的属性和方法 
 }

Student.prototype = Person.prototype; //原型链继承
var student = new Student('赵四',23);
student.run(); 
student.work();
//赵四在跑步
//赵四在工作

原理是将

Student.prototype = new Person();

改为：

Student.prototype = Person.prototype;

就是让他直接继承父类的原型链。这样既可以继承父类的属性和方法，也可以继承父类的原型链。