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;

就是讓他直接繼承父類的原型鏈。這樣既可以繼承父類的屬性和方法，也可以繼承父類的原型鏈。