TypeScript及React学习系列四：typescript中的类（上）

ES5中的类与继承问题

在学习TS中的类之前，先复习下ES5中的类相关的操作

• 最简单的类

• 构造函数增加方法

• 原型链增加属性或方法

• 类中的静态方法

• ES5中的继承

• 原型链实现继承的问题

• 原型链+构造函数组合实现继承

  ES5中没有专门定义类的方法，通过构造函数实现

1. 最简单的类，只有属性没有方法

function Person(){
	this.name = "李华";
	this.age = 23;
}
var p = new Person();
alert(p.name); //打印李华

2. 构造函数增加方法

function Person(){
	this.name = "李华";
	this.age = 23;
	this.study = function(){
		alert(this.name + "在学习");
}
var p = new Person();
p.study(); //打印，李华在学习

3. 原型链增加属性或方法

function Person(){
	this.name = "李华";
	this.age = 23;
}
Person.prototype.sex = "男"; //原型链增加属性
Person.prototype.run = function(){//原型链增加方法
	alert(this.name + "在跑");
var p = new Person();
p.run(); //打印，李华在跑

注意：原型链上的属性会被多个实例共享，而构造函数不会

4. 类中的静态方法

实例方法必须实例化后才可使用，静态方法可直接调用

function Person(){
	this.name = "李华";
	this.age = 23;
}
Person.getInfo = function(){ //静态方法
	alert("静态方法");
}

5. ES5中的继承
   (1) 原型链+对象冒充的组合继承模式

对象冒充可以继承构造函数里面的属性和方法，但没法继承原型链上的属性和方法

function Person(){
	this.name = "李华";
	this.age = 23;
	this.study = function(){
		alert(this.name + "在学习");
}
Person.getInfo = function(){ //静态方法
	alert("静态方法");
}
Person.prototype.sex = "男"; //原型链增加属性
Person.prototype.run = function(){//原型链增加方法
	alert(this.name + "在跑");
//新建Student类继承Person
function Student(){
	Person.call(this); //对象冒充实现继承
}
var s = new Student();
w.study(); //正确，对象冒充可以继承构造函数里面的属性和方法
w.run(); //错误，对象冒充无法继承原型链上的属性和方法

(2) 原型链实现继承

function Person(){
	...//同上
}
Person.getInfo = function(){ //静态方法
	alert("静态方法");
}
Person.prototype.sex = "男"; //原型链增加属性
Person.prototype.run = function(){//原型链增加方法
	alert(this.name + "在跑");
//新建Student类继承Person
function Student(){
}
Student.prototype = new Person(); //原型链实现继承
var s = new Student();
s.study();//可以继承构造函数里的属性和方法
s.run(); //也可以继承原型链中的属性和方法

6. 原型链实现继承的问题

实例化子类的时候没法给父类传参

function Person(name,age){
	this.name = "李华";
	this.age = 23;
	this.study = function(){
		alert(this.name + "在学习");
}
function Student(name,age){
}
Student.propotype = new Person();
var s1 = new Student("张三",28);
s1.study(); //执行结果是undefined在学习
			//实例化子类时无法给父类传参

7. 原型链+构造函数组合的继承

原型链+构造函数冒充对象冒充的组合，既可以原型链上的属性和方法，又可以在实例化子类时给父类传参

function Person(name,age){
	this.name = "李华";
	this.age = 23;
	this.study = function(){
		alert(this.name + "在学习");
}
function Student(name,age){
	Person.call(this,name,age);
}
Student.propotype = new Person();
var s1 = new Student("张三",28);
s1.study(); //张三在学习
s1.run(); //张三在跑

另一种方式：

function Person(name,age){
	this.name = "李华";
	this.age = 23;
	this.study = function(){
		alert(this.name + "在学习");
}
function Student(name,age){
	Person.call(this,name,age);
}
Student.propotype = Person.propotype;
var s1 = new Student("张三",28);
s1.study(); //张三在学习
s1.run(); //张三在跑