[TOC]
>[success] # TS -- 类
~~~
1.'TS' 中的类和'ES6' 的类整体一样的，有部分细节差异，比如'TS'中的类会
提供修饰符一类的，下面的案例会说明
2.面向对象编程的三大特点
2.1.'封装（Encapsulation）'：将对数据的操作细节隐藏起来，只暴露对外的接口。外界调用端不需要
（也不可能）知道细节，就能通过对外提供的接口来访问该对象，
2.2.'继承（Inheritance）'：子类继承父类，子类除了拥有父类的所有特性外，还有一些更具体的特性。
2.3.'多态（Polymorphism）'：由继承而产生了相关的不同的类，对同一个方法可以有不同的响应。
~~~
>[danger] ##### 创建一个简单的ts类
~~~
1.和es6不同,下面的代码分成三个部分，第一部分定义的参数，第二部分构造
函数，第三个部分就是 类的方法
~~~
~~~
class Point{
public x:number
public y:number
constructor(x:number,y:number){
this.x = x
this.y = y
}
public getPosition(){
return `(${this.x},${this.y})`
}
}
const point = new Point(2,3)
console.log(point.getPosition()) // (2,3)
~~~
>[danger] ##### 继承
~~~
1.'TS' 的继承和'ES6' 的继承写法和特性也相似都是使用'extends'
2.继承的子类也有'super()'
~~~
~~~
class Parent {
public name: string
constructor(name: string) {
this.name = name
}
}
class Child extends Parent {
constructor(name: string) {
super(name)
}
}
~~~
>[info] ## public / private / protected-- 公共/私有/受保护的
~~~
~~~
>[danger] ##### public -- 公共
~~~
1.一些强类型语言是必须要写这些修饰符的，在'TS'默认是'public'，也就是说
'public' 修饰的是可以省略的
2.通过 "super" 关键字只能访问基类的公共方法和受保护方法
，属性是无法访问的
~~~
~~~
class Parent {
public age: number
constructor(age: number) {
this.age = age
}
}
class Child extends Parent {
constructor(age: number) {
super(age)
// console.log(super.age) // 错误提示 ：通过 "super" 关键字只能访问基类的公共方法和受保护方法
}
}
const child = new Child(19)
~~~
>[danger] ##### private -- 私有的
~~~
1.当成员被标记成private时，它就不能在声明它的类的外部访问，简单的说，只有
自己的class内部可以访问，即使是自己的'实例'，'继承的子类' 都无法访问被'private'
修饰的内容
~~~
~~~
class Parent {
private name: string
constructor(name: string) {
this.name = name // 我能调用private修饰的
}
public getName(){
return `我的名字${this.name}` // 我能调用private修饰的
}
}
class Child extends Parent{
constructor(name:string){
super(name)
}
getTest(){
console.log(this.name) // 儿子也不让用 错误提示：属性“name”为私有属性，只能在类“Parent”中访问。
}
}
const son = new Parent('wang')
// son.name = "ss" // 提示错误：属性“name”为私有属性，只能在类“Parent”中访问。
console.log(son.getName()) // 可以访问，打印结果：我的名字wang
const child = new Child('wang')
// child.getTest() // 这里是错误的 因为Child 类也无法使用继承父类的私有熟悉或者方法
~~~
* 私有属性修饰在构造函数
~~~
1.是无法创建实例的，但是可以通过静态方法变相创建实例
~~~
~~~
class Student extends Person {
private constructor (name: string, age: number) {
super(name, age)
console.log(this.gender)
}
static create (name: string, age: number) {
return new Student(name, age)
}
}
const tom = new Person('tom', 18)
console.log(tom.name)
~~~
>[danger] ##### protected -- 受保护的（可以用来禁止创建实例）
~~~
1.修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许
被访问的，简单的 说'子类是可以访问protected 修饰的' 实例是不可以的
2.修饰的是'constructor' 则当前类不能创建实例
3.使用protected 不能直接创建'对象使用属性'，和private不同他可以在子类中使用，相同点都可以
在自身定义类中使用
~~~
~~~
class Parent {
// private age: number
protected age: number
protected constructor(age: number) {
this.age = age
}
protected getAge() {
return this.age
}
}
// 解释第三条
// const p = new Parent(18) //protected 修饰constructor不能创建实例 报错提示：类“Parent”的构造函数是受保护的，仅可在类声明中访问。
class Child extends Parent {
constructor(age: number) {
console.log(super.getAge()) // 可以访问父类中的protected方法
}
}
const child = new Child(19)
~~~
>[info] ## 其他特性
>[danger] ##### readonly -- 只读属性
~~~
1.你可以使用readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。
~~~
~~~
class Octopus {
public readonly name: string;
public readonly numberOfLegs: number = 8;
constructor (theName: string) {
this.name = theName;
}
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.
~~~
>[danger] ##### 参数属性
-- 在参数前加修饰符自动帮我们创建this属性
~~~
1.在'constructor' 的参数中加修饰符，相当于省略了下面的代码注释部分
~~~
~~~
class A {
// public name:string
constructor(public name: string) {
// this.name = name
}
}
const a1 = new A('lison')
console.log(a1.name)
~~~
>[danger] ##### 静态属性 -- static修饰
~~~
1.和'es6'一样'ts' 也有静态'方法'，但是'ts' 提供了 静态属性，属性和方法都是'static' 修饰
2.左右也是一样的只能类来使用静态属性
~~~
~~~
class Parent {
public static getAge() {
return Parent.age
}
private static age: number = 18
constructor() {}
}
const p = new Parent()
// console.log(p.age) // age 是静态的属性 所以实例是不能访问的
// console.log(Parent.age) // 虽然有了类但是也是不能访问的，因为用了private修饰用public可以访问
~~~
>[danger] ##### 类选填属性 -- '?'
~~~
1.被标记的选填属性如果不填则'undefined'
~~~
~~~
class Info {
public name: string
public age?: number
constructor(name: string, age?: number, public sex?: string) {
this.name = name
this.age = age
}
}
const info1 = new Info('lison')
console.log(info1) // {sex: undefined, name: "lison", age: undefined}
const info3 = new Info('lison', 18)
console.log(info3) // {sex: undefined, name: "lison", age: 18}
const info4 = new Info('lison', 18, 'man')
console.log(info4) // {sex: "man", name: "lison", age: 18}
~~~
>[danger] ##### 也支持es6 --getter /setter
~~~
1.下面案例来自官网
~~~
~~~
let passcode = "secret passcode";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
}
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
~~~
>[danger] ##### 抽象类abstract
~~~
1.抽象类是不允许被实例化的
2.继承抽象类的类必须去实现实例中的抽象类中的'抽象方法'和'抽象属性'
3.http://www.importnew.com/12399.html
~~~
~~~
abstract class People {
public sex:string
public abstract _name: string
public constructor(sex){
this.sex = sex
}
abstract get insideName(): string
abstract set insideName(value: string)
abstract speak(word:string):string
getSex(){
return this.sex
}
}
class P extends People {
public _name: string
public insideName: string
constructor(_name:string,sex:string){
super(sex)
this._name =_name
this.insideName = this.insideName
}
speak(word:string):string {
return word
}
}
~~~
>[danger] ##### 接口 和类
~~~
1.接口可以多继承，抽象类不行
~~~
~~~
interface FoodInterface {
type: string
}
class FoodClass implements FoodInterface {
public type: string
}
class A {
protected name: string
}
interface I extends A {}
class B extends A implements I {
public name: string
}
~~~
>[danger] ##### 接口配合类
~~~
1.接口 的作用是配合不同类，但是他们具有相同约束，下面为例 人和动物是两个类，
但是他们有相同的行为可以通过接口提取出来，下面的例子不太准确表示的，人属于动物类
的动物是可以做人的父类，但是如果是两个毫无相关且有同样行为的类就可以尝试用接口进行约束
~~~
~~~
interface Eat {
eat (food: string): void
}
interface Run {
run (distance: number): void
}
class Person implements Eat, Run {
eat (food: string): void {
console.log(`优雅的进餐: ${food}`)
}
run (distance: number) {
console.log(`直立行走: ${distance}`)
}
}
class Animal implements Eat, Run {
eat (food: string): void {
console.log(`呼噜呼噜的吃: ${food}`)
}
run (distance: number) {
console.log(`爬行: ${distance}`)
}
}
~~~
>[danger] ##### 定义一个类创建实例为参数
~~~
1.使用 new()=> 类 ，来规定传入的是一个类作为参数
~~~
~~~
const create = <T>(c:new()=>T):T=>{
return new c()
}
class Infos{
public age:number
constructor(){
this.age = 1
}
}
create(Infos)
~~~
- Vue--基础篇章
- Vue -- 介绍
- Vue -- MVVM
- Vue -- 创建Vue实例
- Vue -- 模板语法
- Vue -- 指令用法
- v-cloak -- 遮盖
- v-bind -- 标签属性动态绑定
- v-on -- 绑定事件
- v-model -- 双向数据绑定
- v-for -- 只是循环没那么简单
- 小知识点 -- 计划内属性
- key -- 属性为什么要加
- 案例说明
- v-if/v-show -- 显示隐藏
- v-for 和 v-if 同时使用
- v-pre -- 不渲染大大胡语法
- v-once -- 只渲染一次
- Vue -- class和style绑定
- Vue -- filter 过滤器
- Vue--watch/computed/fun
- watch -- 巧妙利用watch思想
- Vue -- 自定义指令
- Vue -- $方法
- Vue--生命周期
- Vue -- 专属ajax
- Vue -- transition过渡动画
- 前面章节的案例
- 案例 -- 跑马灯效果
- 案例 -- 选项卡内容切换
- 案例-- 筛选商品
- 案例 -- 搜索/删除/更改
- 案例 -- 用computed做多选
- 案例 -- checked 多选
- Vue--组件篇章
- component -- 介绍
- component -- 使用全局组件
- component -- 使用局部组件
- component -- 组件深入
- component -- 组件传值父传子
- component -- 组件传值子传父
- component -- 子传父语法糖拆解
- component -- 父组件操作子组件
- component -- is 动态切换组件
- component -- 用v-if/v-show控制子组件
- component -- 组件切换的动画效果
- component -- slot 插槽
- component -- 插槽2.6
- component -- 组件的生命周期
- component -- 基础组件全局注册
- VueRouter--获取路由参数
- VueRouter -- 介绍路由
- VueRouter -- 安装
- VueRouter -- 使用
- VueRouter--router-link简单参数
- VueRouter--router-link样式问题
- VueRouter--router-view动画效果
- VueRouter -- 匹配优先级
- vueRouter -- 动态路由
- VueRouter -- 命名路由
- VueRouter -- 命名视图
- VueRouter--$router 获取函数
- VueRouter--$route获取参数
- VueRouter--路由嵌套
- VueRouter -- 导航守卫
- VueRouter -- 写在最后
- Vue--模块化方式结构
- webpack--自定义配置
- webpack -- 自定义Vue操作
- VueCli -- 3.0可视化配置
- VueCli -- 3.0 项目目录
- Vue -- 组件升级篇
- Vue -- 组件种类与组件组成
- Vue -- 组件prop、event、slot 技巧
- Vue -- 组件通信（一）
- Vue -- 组件通信（二）
- Vue -- 组件通信（三）
- Vue -- 组件通信（四）
- Vue -- 组件通信(五)
- Vue -- 组件通信(六)
- Vue -- bus非父子组件通信
- Vue -- 封装js插件成vue组件
- vue组件分装 -- 进阶篇
- Vue -- 组件封装splitpane(分割面板)
- UI -- 正式封装
- Vue -- iview 可编辑表格案例
- Ui -- iview 可以同时编辑多行
- Vue -- 了解递归组件
- UI -- 正式使用递归菜单
- Vue -- iview Tree组件
- Vue -- 利用通信仿写一个form验证
- Vue -- 使用自己的Form
- Vue -- Checkbox 组件
- Vue -- CheckboxGroup.vue
- Vue -- Alert 组件
- Vue -- 手动挂载组件
- Vue -- Alert开始封装
- Vue -- 动态表单组件
- Vue -- Vuex组件的状态管理
- Vuex -- 参数使用理解
- Vuex -- state扩展
- Vuex -- getters扩展
- Vuex--mutations扩展
- Vuex -- Action 异步
- Vuex -- plugins插件
- Vuex -- v-model写法
- Vuex -- 更多
- VueCli -- 技巧总结篇
- CLI -- 路由基础
- CLI -- 路由升级篇
- CLI --异步axios
- axios -- 封装axios
- CLI -- 登录写法
- CLI -- 权限
- CLI -- 简单权限
- CLI -- 动态路由加载
- CLI -- 数据性能优化
- ES6 -- 类的概念
- ES6类 -- 基础
- ES6 -- 继承
- ES6 -- 工作实战用类数据管理
- JS -- 适配器模式
- ES7 -- 装饰器（Decorator）
- 装饰器 -- 装饰器修饰类
- 装饰器--修饰类方法（知识扩展）
- 装饰器 -- 装饰器修饰类中的方法
- 装饰器 -- 执行顺序
- Reflect -- es6 自带版本
- Reflect -- reflect-metadata 版本
- 实战 -- 验证篇章（基础）
- 验证篇章 -- 搭建和目录
- 验证篇章 -- 创建基本模板
- 验证篇章 -- 使用
- 实战 -- 更新模型(为了迎合ui升级)
- 实战 -- 模型与接口对接
- TypeSprict -- 基础篇章
- TS-- 搭建（一）webpack版本
- TS -- 搭建（二）直接使用
- TS -- 基础类型
- TS -- 枚举类型
- TS -- Symbol
- TS -- interface 接口
- TS -- 函数
- TS -- 泛型
- TS -- 类
- TS -- 类型推论和兼容
- TS -- 高级类型(一)
- TS -- 高级类型(二)
- TS -- 关于模块解析
- TS -- 声明合并
- TS -- 混入
- Vue -- TS项目模拟
- TS -- vue和以前代码对比
- TS -- vue简单案例上手
- Vue -- 简单弄懂VueRouter过程
- VueRouter -- 实现简单Router
- Vue-- 原理2.x源码简单理解
- 了解 -- 简单的响应式工作原理
- 准备工作 -- 了解发布订阅和观察者模式
- 了解 -- 响应式工作原理（一）
- 了解 -- 响应式工作原理（二）
- 手写 -- 简单的vue数据响应(一)
- 手写 -- 简单的vue数据响应(二)
- 模板引擎可以做的
- 了解 -- 虚拟DOM
- 虚拟dom -- 使用Snabbdom
- 阅读 -- Snabbdom
- 分析snabbdom源码 -- h函数
- 分析snabbdom -- init 方法
- init 方法 -- patch方法分析（一）
- init 方法 -- patch方法分析（二）
- init方法 -- patch方法分析（三）
- 手写 -- 简单的虚拟dom渲染
- 函数表达解析 - h 和 create-element
- dom操作 -- patch.js
- Vue -- 完成一个minVue
- minVue -- 打包入口
- Vue -- new实例做了什么
- Vue -- $mount 模板编译阶段
- 模板编译 -- 分析入口
- 模板编译 -- 分析模板转译
- Vue -- mountComponent 挂载阶段
- 挂载阶段 -- vm._render()
- 挂载阶段 -- vnode
- 备份章节
- Vue -- Nuxt.js
- Vue3 -- 学习
- Vue3.x --基本功能快速预览
- Vue3.x -- createApp
- Vue3.x -- 生命周期
- Vue3.x -- 组件
- vue3.x -- 异步组件？？？
- vue3.x -- Teleport？？？
- vue3.x -- 动画章节 ？？
- vue3.x -- 自定义指令 ？？？
- 深入响应性原理 ？？？
- vue3.x -- Option API VS Composition API
- Vue3.x -- 使用set up
- Vue3.x -- 响应性API
- 其他 Api 使用
- 计算属性和监听属性
- 生命周期
- 小的案例（一）
- 小的案例（二）-- 泛型
- Vue2.x => Vue3.x 导读
- v-for 中的 Ref 数组 -- 非兼容
- 异步组件
- attribute 强制行为 -- 非兼容
- $attrs 包括 class & style -- 非兼容
- $children -- 移除
- 自定义指令 -- 非兼容
- 自定义元素交互 -- 非兼容
- Data选项 -- 非兼容
- emits Option -- 新增
- 事件 API -- 非兼容
- 过滤器 -- 移除
- 片段 -- 新增
- 函数式组件 -- 非兼容
- 全局 API -- 非兼容
- 全局 API Treeshaking -- 非兼容
- 内联模板 Attribute -- 非兼容
- key attribute -- 非兼容
- 按键修饰符 -- 非兼容
- 移除 $listeners 和 v-on.native -- 非兼容
- 在 prop 的默认函数中访问 this -- ??
- 组件使用 v-model -- 非兼容
- 渲染函数 API -- ??
- Slot 统一 ??
- 过渡的 class 名更改 ???
- Transition Group 根元素 -- ??
- v-if 与 v-for 的优先级对比 -- 非兼容
- v-bind 合并行为 非兼容
- 监听数组 -- 非兼容