ts中的类

最新推荐文章于 2025-03-23 09:35:36 发布

原创最新推荐文章于 2025-03-23 09:35:36 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ts

本文详细介绍了ES5中的构造函数、原型链以及继承的概念，并通过示例展示了如何使用对象冒充和原型链来实现继承。接着探讨了TypeScript（TS）中的类、继承和静态方法，包括如何定义类、调用子类方法以及使用访问修饰符。同时，文章还提到了静态方法的使用和多态性的体现。通过对不同语言特性的深入理解，有助于开发者更好地掌握JavaScript和TypeScript的面向对象编程。

es5中的类

function Person(){
    this.name = '张三',
    this.age = 20
}

let p = new Person()
console.log(p.name);//张三

构找函数和原型链里面增加方法

function Person(){
    this.name = '张三',
    this.age = 20
    this.run = function(){
        console.log(this.name+'在运动');
    }
}


Person.getInfo = function(){
    console.log('我是一个静态方法');
}

//原型链上面的属性会被多个实例共享 而构造函数不会
Person.prototype.sex = '男'
Person.prototype.work = function(){
    console.log(this.name+'在工作');
}

let p = new Person()
p.run()//张三在运动
p.work()//三在工作
Person.getInfo()//我是一个静态方法
console.log(p.sex);//男

es5里面的继承
对象冒充实现继承

function Person(){
    this.name = '张三',
    this.age = 20
    this.run = function(){
        console.log(this.name+'在运动');
    }
}

Person.prototype.sex = '男'
Person.prototype.work = function(){
    console.log(this.name+'在工作');
}

function Web(){
    Person.call(this)//对象冒充实现继承
}

let w = new Web()

w.run()//张三在运动
w.work()//报错  对象冒充可以继承构造函数  但是无法继承原型链

原型链加对象冒充实现继承

function Person(){
    this.name = '张三',
    this.age = 20
    this.run = function(){
        console.log(this.name+'在运动');
    }
}

Person.prototype.sex = '男'
Person.prototype.work = function(){
    console.log(this.name+'在工作');
}

function Web(){
   
}

Web.prototype = new Person()

let w = new Web()

w.work()//张三在工作   原型链继承既可以继承构造函数又可以继承原型链

原型链继承的问题？

function Person(name,age){
    this.name = name,
    this.age = age
    this.run = function(){
        console.log(this.name+'在运动');
    }
}

Person.prototype.sex = '男'
Person.prototype.work = function(){
    console.log(this.name+'在工作');
}

function Web(){
   
}

Web.prototype = new Person()

let w = new Web('张三',20)

w.run()//undefined在运动  实例化子类无法给父级传参

原型链加构造函数实现继承

 function Person(name,age){
    this.name = name,
    this.age = age
    this.run = function(){
        console.log(this.name+'在运动');
    }
}

Person.prototype.sex = '男'
Person.prototype.work = function(){
    console.log(this.name+'在工作');
}

function Web(name,age){
   Person.call(this,name,age)
}

Web.prototype = new Person()

let w = new Web('张三',20)

w.run()//张三在运动
w.work()//张三在工作

ts中的类

class Person{
    name:string='123'

    constructor(n:string){
       this.name=n
    }

    getName():String{
        return this.name
    }

    setName(name:string):void{
        this.name = name
    }
}

let p = new Person('张三')
p.setName('李四')
console.log(p.getName());//李四

ts中的继承

class Person{
   name:string

   constructor(name:string){
        this.name = name
   }

   run():string{
        return this.name+'在运动'
   }
}

class Web extends Person{
    constructor(name:string){
        super(name)
    }
}

let w = new Web('李四')

console.log(w.run());//李四在运动

优先调用子类的方法

class Person{
   name:string

   constructor(name:string){
        this.name = name
   }

   run():string{
        return this.name+'在运动'
   }
}

class Web extends Person{
    constructor(name:string){
        super(name)
    }

    run(){
       return '优先调用子类的方法' 
    }
}

let w = new Web('李四')

console.log(w.run());//优先调用子类的方法

类里面的修饰符

//public:公有 类里面 子类 类外面都可以访问
//protected:保护类型  在类里面之类都可以访问  外面不行
//private:私有  在类里面可以  外面和之类都无法访问
//不加修饰符默认的公有
class Person{
   public name:string //公有
	 protected age: number = 20
    private love:string='jhy'
   constructor(name:string){
        this.name = name
   }

   run():string{
        return this.name+'在运动'
   }
}

class Web extends Person{
    constructor(name:string){
        super(name)
    }
  
    getAge(){
        console.log(this.age);
    }

    getLove(){
        console.log(this.love); 
    }
}

let w = new Web('李四')
console.log(w.name);//李四
w.getAge()//20
console.log(w.age);//Property 'age' is protected and only accessible within class 'Person' and its subclasses.报错说这个属性是私有的
w.getLove()//Property 'love' is private and only accessible within class 'Person'.只能在类内部访问

ts中的静态方法

jq中的方法

function $(element){
    return new Base(element)
}

$.get = function(){
    
}

function Base(element){
    this.element = '获取dom节点'

    this.css = function(arr,value){
        this.element.style.arr = value
    }
}

//jq
$('#box').css('color','red')

$.get('url',function(){

})

ts中的静态方法

class Person{
    public name:string = '张三'
    public age:number=20
    static love:string = 'jhy'
    constructor(name:string){
        this.name =name
    }

    run(){
        console.log(this.name)+'在运动'
    }

    work(){
        console.log(this.name+'在工作');     
    }

    static  print(){
        console.log('print方法');  
        console.log(this.age);//无法调用 只能调用静态属性
        console.log(this.love);//jhy
    }
}

Person.print()//可以直接调用 print方法
let per = new Person('张三')

ts中的多态

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+'吃粮食');
        
    }
}

class Cat extends Animal{
    constructor(name:string){
        super(name)
    }
    eat(){
        console.log(this.name+'老鼠');
    }
}

ts中的抽象方法

//abstract方法只能放在抽象类里面
//抽象类和抽象方法是用来定义标准的 他的之类必须包含一些方法
abstract class Animal{
    name:string
    constructor(name:string){
        this.name = name
    }
    abstract eat():any
    run(){
        console.log('其他方法可以不实现');
   }
}

// let a = new Animal()//错误写法 抽象类不行实例化

class Dog extends Animal{
    constructor(name:string) {
        super(name)
    }
  //没有eat方法会报错  继承的类必须具有这个方法
}