typeScript--[es6class类实现继承]

一.js中实现继承

javascript 复制代码
// js实现继承
// 父类
function Father(name) {
    this.name = name
    this.say = function () {
        console.log(this.name + "在唱歌")
    }
}
var f = new Father("逍遥的码农")

// 子类
function Son(name) {
    Father.call(this, name)
}
Son.prototype = Father.prototype
var s = new Son("张三")
s.say()

二.ts中实现继承

TypeScript 复制代码
// ts class类实现继承
// ts父类
class TsFather {
    name: string
    // 构造函数
    constructor(name: string) {
        this.name = name

    }
    say(): void {
        console.log(this.name + "在唱歌")
    }
}
var tsf = new TsFather("逍遥的码农")

// ts子类
class TsSon extends TsFather {
    constructor(name: string) {
        super(name)
    }
}
var tss = new TsSon("张三")
tss.say()

三.ts里的三种修饰符

(1)public:公有,在类里面、子类、类外面都可以访问(默认的就不做演示)

(2)protected:保护类型,在雷里面、子类里面可以访问,在类外部不能访问

(3)private:私有,在类里面可以访问,子类、类外边不能访问

protected:

TypeScript 复制代码
class A {
    protected name: string
    constructor(name: string) {
        this.name = name
    }
}
var a = new A("张三")
console.log(a.name) //属性"name"受保护,只能在类"A"及其子类中访问。

private:

TypeScript 复制代码
class A {
    private name: string
    constructor(name: string) {
        this.name = name
    }
}
var a = new A("张三")
class B extends A{
    constructor(name:string){
        super(name)
        
    }
    say():void{
        console.log(this.name) //属性"name"为私有属性,只能在类"A"中访问。
    }
}
var b = new B("李四")
b.say()
相关推荐
优雅格子衫4 小时前
TypeScript 类的基本使用小结
javascript·ubuntu·typescript
吃西瓜不吐籽_11 小时前
2026 届前端校招冲刺:2 万字高频面试题库(含详解、追问与评分标准)
前端·javascript·css·typescript·前端框架·es6
ch_091811 小时前
从0构建SDK第4节:实现 ReflectionAgent 的自我反思循环
typescript·agent·ai编程
飞天狗12 小时前
TypeScript类型系统其实是个图灵完备的语言
面试·typescript
开发者联盟league13 小时前
Eclipse LSP4E 配置 JavaScript / TypeScript 支持
javascript·typescript·eclipse·lsp·lsp4e
天平21 小时前
油猴脚本创建webworker踩坑记录
前端·javascript·typescript
ch_09182 天前
从0构建SDK第3节:实现 ReActAgent 的推理与行动循环
typescript·llm·agent
疯狂的魔鬼2 天前
一套 Schema 驱动四视图:记 useCrudSchemas 的设计与实践
前端·javascript·typescript
kyriewen5 天前
别再对着 TypeScript 报错发呆了:我把 10 个最常见的红色波浪线翻译成了人话
前端·javascript·typescript
妙码生花5 天前
现代前端的极致性能 icon 加载方案(死磕成功版)
前端·vue.js·typescript