TypeScript中的类和继承
typeScript中的类
1 类的定义
2 继承
3 类里面的修饰符
4 静态属性 静态方法
5 抽象类 继承 多态
1、ts中类的定义
es5:
function Person(name){
this.name=name;
this.run=function(){
console.log(this.name)
}
}
var p=new Person('张三');
p.run()
ts中定义类：
class Person{
name:string; //属性 前面省略了public关键词
constructor(n:string){ //构造函数 实例化类的时候触发的方法
this.name=n;
}
run():void{
alert(this.name);
}
}
var p=new Person('张三');
p.run()
class Person{
name:string;
constructor(name:string){ //构造函数 实例化类的时候触发的方法
this.name=name;
}
getName():string{
return this.name;
}
setName(name:string):void{
this.name=name;
}
}
var p=new Person('张三');
alert(p.getName());
p.setName('李四');
alert(p.getName());
2、ts中实现继承 extends、 super
class Person{
name:string;
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
var p=new Person('王五');
alert(p.run())
class Web extends Person{
constructor(name:string){
super(name); /*初始化父类的构造函数*/
}
}
var w=new Web('李四');
alert(w.run());
//ts中继承的探讨 父类的方法和子类的方法一致
class Person{
name:string;
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
var p=new Person('王五');
alert(p.run())
class Web extends Person{
constructor(name:string){
super(name); /*初始化父类的构造函数*/
}
run():string{
return `${this.name}在运动-子类`
}
work(){
alert(`${this.name}在工作`)
}
}
var w=new Web('李四');
alert(w.run());
w.work();
alert(w.run());
3 、类里面的修饰符 typescript里面定义属性的时候给我们提供了 三种修饰符
public :公有 在当前类里面、 子类 、类外面都可以访问
protected：保护类型 在当前类里面、子类里面可以访问 ，在类外部没法访问
private ：私有 在当前类里面可以访问，子类、类外部都没法访问
属性如果不加修饰符 默认就是 公有 （public）
public :公有 在类里面、 子类 、类外面都可以访问
class Person{
public name:string; /*公有属性*/
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
var p=new Person('王五');
// alert(p.run())
class Web extends Person{
constructor(name:string){
super(name); /*初始化父类的构造函数*/
}
run():string{
return `${this.name}在运动-子类`
}
work(){
alert(`${this.name}在工作`)
}
}
var w=new Web('李四');
w.work();
类外部访问公有属性
class Person{
public name:string; /*公有属性*/
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
var p=new Person('哈哈哈');
alert(p.name);
protected：保护类型 在类里面、子类里面可以访问 ，在类外部没法访问
class Person{
protected name:string; /*公有属性*/
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
var p=new Person('王五');
alert(p.run())
class Web extends Person{
constructor(name:string){
super(name); /*初始化父类的构造函数*/
}
work(){
alert(`${this.name}在工作`)
}
}
var w=new Web('李四11');
w.work();
alert( w.run());
类外外部没法访问保护类型的属性
class Person{
protected name:string; /*保护类型*/
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
var p=new Person('哈哈哈');
alert(p.name);
private ：私有 在类里面可以访问，子类、类外部都没法访问
class Person{
private name:string; /*私有*/
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
class Web extends Person{
constructor(name:string){
super(name)
}
work(){
console.log(`${this.name}在工作`)
}
}
class Person{
private name:string; /*私有*/
constructor(name:string){
this.name=name;
}
run():string{
return `${this.name}在运动`
}
}
var p=new Person('哈哈哈');
alert(p.run());
4、静态属性 静态方法
function Person(){
this.run1=function(){
}
}
Person.name='哈哈哈';
Person.run2=function(){ 静态方法
}
var p=new Person();
Person.run2(); 静态方法的调用
function $(element){
return new Base(element)
}
$.get=function(){
}
function Base(element){
this.element=获取dom节点;
this.css=function(arr,value){
this.element.style.arr=value;
}
}
$('#box').css('color','red')
$.get('url',function(){
})
class Per{
public name:string;
public age:number=20;
//静态属性
static sex="男";
constructor(name:string) {
this.name=name;
}
run(){ /*实例方法*/
alert(`${this.name}在运动`)
}
work(){
alert(`${this.name}在工作`)
}
static print(){ /*静态方法 里面没法直接调用类里面的属性*/
alert('print方法'+Per.sex);
}
}
var p=new Per('张三');
p.run();
Per.print();
alert(Per.sex);
5、 抽象类 继承 多态
多态:父类定义一个方法不去实现，让继承它的子类去实现 每一个子类有不同的表现
多态属于继承
class Animal {
name:string;
constructor(name:string) {
this.name=name;
}
eat(){ //具体吃什么 不知道 ， 具体吃什么?继承它的子类去实现 ，每一个子类的表现不一样
console.log('吃的方法')
}
}
class Dog extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+'吃粮食'
}
}
class Cat extends Animal{
constructor(name:string){
super(name)
}
eat(){
return this.name+'吃老鼠'
}
}
typescript中的抽象类：它是提供其他类继承的基类，不能直接被实例化。
用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现。
abstract抽象方法只能放在抽象类里面
抽象类和抽象方法用来定义标准 。 标准：Animal 这个类要求它的子类必须包含eat方法
//标准:
abstract class Animal{
public name:string;
constructor(name:string){
this.name=name;
}
abstract eat():any; //抽象方法不包含具体实现并且必须在派生类中实现。
run(){
console.log('其他方法可以不实现')
}
}
// var a=new Animal() /*错误的写法*/
class Dog extends Animal{
//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
eat(){
console.log(this.name+'吃粮食')
}
}
var d=new Dog('小花花');
d.eat();
class Cat extends Animal{
//抽象类的子类必须实现抽象类里面的抽象方法
constructor(name:any){
super(name)
}
run(){
}
eat(){
console.log(this.name+'吃老鼠')
}
}
var c=new Cat('小花猫');
c.eat();
下面和ES5中的类和继承做个对比吧
es5里面的类
1、最简单的类
function Person(){
this.name='张三';
this.age=20;
}
var p=new Person();
alert(p.name);
2、构造函数和原型链里面增加方法
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){
alert(this.name+'在运动');
}
}
//原型链上面的属性会被多个实例共享 构造函数不会
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
var p=new Person();
// alert(p.name);
// p.run();
p.work();
3、类里面的静态方法
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.getInfo=function(){
alert('我是静态方法');
}
//原型链上面的属性会被多个实例共享 构造函数不会
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
var p=new Person();
p.work();
//调用静态方法
Person.getInfo();
4、es5里面的继承 对象冒充实现继承
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
//Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web(){
Person.call(this); /*对象冒充实现继承*/
}
var w=new Web();
// w.run(); //对象冒充可以继承构造函数里面的属性和方法
w.work(); //对象冒充可以继承构造函数里面的属性和方法 但是没法继承原型链上面的属性和方法
5、es5里面的继承 原型链实现继承
function Person(){
this.name='张三'; /*属性*/
this.age=20;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
//Web类 继承Person类 原型链+对象冒充的组合继承模式
function Web(){
}
Web.prototype=new Person(); //原型链实现继承
var w=new Web();
//原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
//w.run();
w.work();
6、 原型链实现继承的 问题？
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
var p=new Person('李四',20);
p.run();
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
}
Web.prototype=new Person();
var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
w.run();
// var w1=new Web('王五',22);
7、原型链+对象冒充的组合继承模式
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
Person.call(this,name,age); //对象冒充继承 实例化子类可以给父类传参
}
Web.prototype=new Person();
var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
// w.run();
w.work();
// var w1=new Web('王五',22);
8、原型链+对象冒充继承的另一种方式
function Person(name,age){
this.name=name; /*属性*/
this.age=age;
this.run=function(){ /*实例方法*/
alert(this.name+'在运动');
}
}
Person.prototype.sex="男";
Person.prototype.work=function(){
alert(this.name+'在工作');
}
function Web(name,age){
Person.call(this,name,age); //对象冒充继承 可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
}
Web.prototype=Person.prototype;
var w=new Web('赵四',20); //实例化子类的时候没法给父类传参
w.run();
// w.work();
// var w1=new Web('王五',22);