03_es中的类和TypeScript中的类

豆沙小饼干
121 阅读4分钟

es5里面的类

1.最简单的类

function Person11() {
this.name = 'zhangsan'
this.age = 18
}
const p11 = new Person11();
console.log(p11.name);

2.构造函数和原型链里面增加方法

function Person21() {
this.name = 'zhangsan';
this.age = 19;
this.run = function() {
    console.log(this.name+'在运动');
}
}
var p21 = new Person21();
console.log(p21.run);

3.原型链上面的属性或者方法可以被多个实例共享，但是构造函数不会

function Person31() {
    this.name = 'zhangsan';
    this.age = 19;
    this.run = function() {
        console.log(this.name+'在运动');
    }
}
Person31.prototype.age=13;
Person31.prototype.work = function(){
    console.log(this.name+'在工作');
}
var p31 = new Person31();
console.log(p31.work());

es5中的继承

1.对象继承

function Person41() {
    this.name = 'zhangsan';
    this.age = 19;
    this.run = function() {
        console.log(this.name+'在运动');
    }
}
Person41.prototype.age=13;
Person41.prototype.work = function(){
    console.log(this.name+'在工作');
}
var p41 = new Person41();
console.log(p41.run());

// call 对象冒充继承 让Web继承Person的类
function Web1() {
    Person4.call(this) //对象冒充实现继承，但是不能实现原型链里面的原型和方法
}
// 这样就可以在web中调用Person4的属性和方法
var web1 = new Web1();
web1.run();
// web.work(); //报错，work是原型链里面的方法，对象冒充继承不会继承原型链里面的原型和方法

2.原型链继承

/原型链继承，既可以继承对象里面的属性和方法，又可以继承原型链里面的属性和方法
function Person51() {
    this.name = 'zhangsan';
    this.age = 19;
    this.run = function() {
        console.log(this.name+'在运动');
    }
}
Person51.prototype.age=13;
Person51.prototype.work = function(){
    console.log(this.name+'在工作');
}
var p51 = new Person51();
console.log(p51.run());

// Web继承Person的类
function Web21() {
    Person51.call(this) //对象冒充实现继承，但是不能实现原型链里面的原型和方法
}
// 这样就可以在web中调用Person4的属性和方法
Web2.prototype = new Person51(); //这里是原型链继承方式
var web21 = new Web21();
web21.run();
web21.work();

ts中定义的类

ts中定义类的方式是写一个class，类里面可以有相应的方法

// 1.ts中定义类
class Person11 { 
    name:string; //属性，前面省略了public关键字
    constructor(name:string){ //构造函数，实例化类的时候触发的方法
        this.name = name;

    }
    getName():string{
        return this.name;
    }
    setName(name:string):any{
        return this.name = name;
    }
}
var p11 = new Person11('zhangsan');
console.log(p11.getName());
console.log(p11.setName('lisi'));
console.log(p11.getName());

1.ts中类的继承

ts中类的继承 主要通过extends/super来实现

class Person21 { //父类
    name:string;
    constructor(name:string){
        this.name = name;
    }
    run():string {
        return `${this.name}在运动--父类`
    }
}
var p21 = new Person21('王武');
console.log(p21.run());;

class Web extends Person21 { //Web子类继承父类Person1
    constructor(name:string){
        super(name); //初始化父类的构造函数
    }
    work(){ //子类除了可以继承父类的属性和方法以为也可以拥有自己的属性或方法
        console.log(`${this.name}在工作`);
    }
    run():string { //当父类和子类有共同的方法，首先会在子类里面查找相应的方法
        return `${this.name}在运动--子类`
    }
}

let w = new Web('lishi');
console.log(w.run());
w.work();
console.log(w.run());;

2.ts中类的修饰符

Ts类里面的修饰符，ts里面定义属性的时候给我们提供了三种修饰符

  • public:公有，在类里面 子类 类外面都可以访问
  • protected:保护类型 在类里面 子类里面可以访问，在类外面无法访问
  • private:在类里面可以访问 子类 类外部都无法访问

2.1 public:公有，在类里面 子类 类外面都可以访问

//public:公有，在类里面 子类 类外面都可以访问
class Person31 { //父类
    // name:string; //这里没有写public,就相当于是全局的属性
    public name:string;
    constructor(name:string){
        this.name = name;
    }
    run():string {
        return `${this.name}在运动--父类`
    }
}
var p31 = new Person31('王武');
console.log(p31.run());;

class Web2 extends Person31 { //Web子类继承父类Person1
    constructor(name:string){
        super(name); //初始化父类的构造函数
    }
    work(){ //子类除了可以继承父类的属性和方法以为也可以拥有自己的属性或方法
        console.log(`${this.name}在工作`);
    }
    run():string {//当父类和子类有共同的方法，首先会在子类里面查找相应的方法
        return `${this.name}在运动--子类`
    }
}
let w2 = new Web2('public子类获取属性name');
console.log(w2.name);
let w21 = new Person31('public外部获取属性name11')
console.log(w21.name);

2.2 protected:保护类型 在类里面 子类里面可以访问，在类外面无法访问

//protected:保护类型 在类里面 子类里面可以访问，在类外面无法访问
class Person41 { //父类
    protected name:string;
    constructor(name:string){
        this.name = name;
    }
    run():string {
        return `${this.name}在运动--父类`
    }
}
var p41 = new Person41('王武');
console.log(p41.run());;

class Web3 extends Person41 { //Web子类继承父类Person1
    constructor(name:string){
        super(name); //初始化父类的构造函数
    }
    work(){ //子类除了可以继承父类的属性和方法以为也可以拥有自己的属性或方法
        console.log(`${this.name}在工作`);
    }
    run():string {//当父类和子类有共同的方法，首先会在子类里面查找相应的方法
        return `${this.name}在运动--子类`
    }
}
// //虽然可以编译，但是报错
//子类调用
let w3 = new Web3('protected子类获取属性name3');
w3.work();
w3.run();
//外部不可以访问属性
// let w31 = new Person3('protected外部获取属性name')

2.3 private:在类里面可以访问 子类 类外部都无法访问

//private:在类里面可以访问 子类 类外部都无法访问
class Person51 { //父类
    protected name:string;
    constructor(name:string){
        this.name = name;
    }
    run():string {
        return `${this.name}在运动--父类`
    }
}
var p51 = new Person51('王武51');
console.log(p51.run());

静态属性和方法

//1.静态方法
class Person {
    public name:string;
    static age:number = 20;
    constructor(name:string){
        this.name = name;
    }
    run(){
        console.log(`${this.name}在运动`);
    }
    work(){
        console.log(`${this.name}在工作`);
    }
    static print(){ //静态方法，加上关键词static就是静态方法,静态方法里面不能直接调用实例化中的属性或方法,需要在里面加一个static
        console.log('print静态方法'+this.age);
    }
}
// 调用实例化方法直接实例化对象
var p = new Person('aaa');
p.run();
p.work();
//调用静态方法直接  .方法
Person.print();

多态

多态：父类定义一个方法不去实现，让继承他的子类去实现，每一个子类有不同的表现

// 多态属于继承
class Animal {
    name:string;
    constructor(name:string){
        this.name = name;
    }
    eat(){
        console.log('吃的方法');
    }
}
class Dog extends Animal {
    constructor (name:string){
        super(name)
    }
    eat(){
        console.log(this.name + '吃粮食');
    }
}
const dogd = new Dog('阿黄');
dogd.eat();

class Cat extends Animal {
    constructor(name:string){
        super(name)
    }
    eat(){
        return this.name+'吃老鼠'
    }
}
avatar
文章
阅读
粉丝