ts面向对象OOP
面向对象
面向对象是程序中一个非常重要的思想，简而言之就是程序中所有的操作都需要通过对象来完成，对象中有属性和方法
举例：
操作浏览器要使用window对象
操作网页要使用document对象
操作控制台要使用console对象
要想面向对象，操作对象，首先要拥有对象
要创建对象，必须要先定义类，所谓的类可以理解为对象的模型
程序中可以根据类创建指定类型的对象
举例来说：
可以通过Person类来创建人的对象，通过Dog类创建狗的对象，不同的类可以用来创建不同的对象
定义类
/* 使用class关键字定义类 属性有2种： 1、实例属性 定义：直接定义 使用：通过new关键字创建一个实例对象，对象去调用该属性 2、静态属性，也叫类属性 定义：在定义该属性前加上static关键字 使用：直接通过类名访问该属性 方法和属性一样，加上static就是静态方法 */ class Person { readonly name: string = '小明' // 只读属性 age: number = 19 static age: number = 18 sayHello() { console.log('hello') } } const p = new Person() console.log(p) // Person {name: '小明', age: 19} // p.name = 'xx' // 只读属性不可赋值 p.age = 88 console.log(p.name) // 小明 console.log(p.age) // 88 p.sayHello() // hello console.log(Person.age) // 18
构造函数和this
在new一个对象时会调用constructor函数
class Dog { // 1、在类中定义属性 name: string age: number bark() { // 方法中的this指向调用该方法的对象 console.log('汪汪汪', this) } // 2、在构造函数中进行赋值 constructor(name: string, age: number) { // new Dog()时执行构造函数，这里的this指向实例对象 this.name = name this.age = age } } const dog = new Dog('旺财', 3) const dog1 = new Dog('阿黄', 4) console.log(dog) // {name: '旺财', age: 3} console.log(dog1) // {name: '阿黄', age: 4} dog.bark() // 汪汪汪 {name: '旺财', age: 3} dog1.bark() // 汪汪汪 {name: '阿黄', age: 4}
继承
使用extends继承后，子类拥有父类所有的属性和方法
通过继承可以将多个类中公有的代码写在父类中，重复的代码只需写一次
如果子类中添加了和父类重名的属性和方法，则会覆盖父类中的属性和方法，这种形式叫重写
;(function () { class Animal { name: string age: number constructor(name: string, age: number) { this.name = name this.age = age } sayHello() { console.log('hello~') } } class Dog extends Animal { age: number = 100 // 和父类属性名重名，这里的优先级高 // 和父类方法名重名，这里的优先级高 sayHello() { console.log('汪汪汪') } run() { console.log(`${this.name}在跑`) } } class Cat { name: string age: number constructor(name: string, age: number) { this.name = name this.age = age } sayHello(str: string) { console.log('喵喵喵', str) } } const dog = new Dog('旺财', 3) console.log(dog) dog.sayHello() dog.run() const cat = new Cat('小花', 2) console.log(cat) cat.sayHello('123') })()
super
在类的方法中，super表示当前类的父类（也叫超类）
如果在子类中写了构造函数，子类的构造函数中必须对父类的构造函数进行调用，也就是执行super()
;(() => { class Animal { name: string constructor(name: string) { this.name = name } sayHello() { console.log('hello') } } class Dog extends Animal { age: number // 如果在子类中写了构造函数，在子类的构造函数中必须对父类的构造函数进行调用 constructor(name: string, age: number) { super(name) // 调用父类的构造函数 this.age = age } sayHello() { // super.sayHello() // 在类的方法中，super表示当前类的父类 console.log('汪汪汪') } } const dog = new Dog('旺财', 3) console.log(dog) dog.sayHello() })()
多态
父类定义了一个方法不去实现，让继承它的子类去实现（方法重写），每一个子类都有不同的表现
;(() => { // 多态：父类型的引用指向了类型的对象，不同类型的对象针对相同的方法，产生了不同的行为 class Animal { constructor(public name: string) { this.name = name } run(distance: number = 0) { console.log(`${this.name}跑了 ${distance} 米`) } } class Dog extends Animal { constructor(name: string) { super(name) // 调用父类的构造函数，实现子类中属性的初始化 } // 重写父类中的实例方法 run(distance: number = 5) { console.log(`${this.name}跑了 ${distance} 米`) } } class Pig extends Animal { constructor(name: string) { super(name) } run(distance: number = 10) { console.log(`${this.name}跑了 ${distance} 米`) } } const a: Animal = new Animal('动物') a.run() const dog: Dog = new Dog('阿黄') dog.run() const pig: Pig = new Pig('八戒') pig.run() console.log('--------------') // 父类类型创建子类的对象 const dog1: Animal = new Dog('哮天犬') dog1.run() const pig1: Animal = new Pig('猪猪侠') pig1.run() console.log('>>>>>>>>>>>>>>>') function showRun(obj: Animal) { obj.run() } showRun(dog1) showRun(pig1) })()
抽象类abstract（ts新增）
一般用来给子类继承的父类，也可以被当做构造函数去创建对象使用，在该父类前加上abstract就可以将该类变为抽象类，即不能用来创建对象，抽象类是专门用来被继承的类
抽象方法：抽象类中可以添加抽象方法，就是在方法名前加上abstract
抽象方法没有方法体，派生类必须对抽象方法进行重写
抽象方法只能写在抽象类中
;(function () { abstract class Animal { name: string constructor(name: string) { this.name = name } abstract sayHello(): void // 抽象方法没有方法体，只能定义在抽象类中 } class Dog extends Animal { sayHello() { // super.sayHello() // 在类的方法中，super表示当前类的父类 console.log('汪汪汪') } } class Cat extends Animal { sayHello() {} // 子类必须对抽象方法进行重写 } const dog = new Dog('旺财') console.log(dog) dog.sayHello() })()
接口（ts新增）
接口可以当成类型声明去使用
接口用来定义一个类的结构，指定一个类中应该包含哪些属性的方法
接口中所有的属性都没有实际的值；所有的方法都是抽象方法，没有方法体
接口和抽象类的区别：
抽象类既可以有抽象方法也可以有普通方法，接口只能有抽象方法
抽象类使用extends继承，接口使用implement实现
;(function () { // 类型声明 type myType = { name: string age: number } // 接口当成类型声明去使用：接口定义一个对象的结构 interface myInterface { name: string age: number } // 接口可以重复定义 interface myInterface { gender: string } const obj: myType = { name: '小明', age: 18 } const obj1: myInterface = { name: '小红', age: 17, gender: '男' } // 接口在定义类的时候限制类的结构 接口中所有的属性都没有实际的值；所有的方法都是抽象方法，都没有方法体 interface myInter { name: string sayHello(): void } // 定义类时，使类实现一个接口，满足接口的要求 class Person implements myInter { name: string constructor(name: string) { this.name = name } sayHello() { console.log('hello') } } })()
属性的封装
ts可以在类中的属性前添加属性的修饰符（之前用过static和readonly）
1、public 默认值，修饰的属性可以在任意位置（当前类、子类、类的外部）访问和修改
2、private 私有属性，只能在当前类中访问和修改（子类、类外部无法访问和修改），但可以通过在类中添加方法使得私有属性可以被外部访问和修改
3、protected 受保护的属性，只能在当前类和当前类的子类中访问和修改（类外部无法访问和修改）
封装属性
封装属性是什么：
js中，属性封装就是给属性加上getter和setter方法，在访问和修改时使用对应的getter和setter方法
封装属性的原因：
由于属性是在new对象时设置的，属性可以被任意的修改，存在安全隐患，因此需要对属性进行封装
js和ts封装属性的区别：
1、js封装的属性存取器使用时需要调用对应的getter和setter方法，较为麻烦
2、ts封装的属性存取器使用时直接当做变量来访问和修改，比较简洁
封装属性的使用场景：
1、如果需要对属性的值做安全判断，就需要使用属性封装
2、在类中使用private修饰的属性，进行访问和修改的时候需要用到封装属性
;(() => { class Person { private _name: string private _age: number constructor(name: string, age: number) { this._name = name this._age = age } // 被private修饰的属性，在外部不可以直接访问，可以在类里面定义一个方法使得私有属性可以被外部访问 getName() { return this._name } // 定义一个方法使得私有属性可以被外部修改 setName(name: string) { this._name = name } // getName和setName是js中的属性存取器，getter方法访问，setter设置 ts中提供了更简便属性存取器的方式，使用时直接p.name进行访问和设置 get age() { return this._age } set age(age: number) { if (age >= 0) this._age = age // 设置时对属性进行一些判断，提高安全性 } } const p = new Person('小明', 12) // p._name = 'xx' // public修饰的属性可以直接这么修改 console.log(p) // console.log(p._name) // public修饰的属性可以直接这么访问 // 被private修饰的属性，访问和修改需要通过类中定义的方法来进行，这样做的好处是，可以在设置时对属性进行一些判断，提高安全性 console.log(p.getName()) p.setName('小红') console.log(p.getName()) console.log(p.age) p.age = 100 console.log(p.age) })()
protected
;(() => { class A { protected age: number constructor(age: number) { this.age = age } } class B extends A { getName() { return this.age // 被protected修饰的属性，可以在当前类和它的子类中进行访问和修改 } } const b = new B(20) console.log(b) console.log(b.age) // 被protected修饰的属性，在类的外部无法访问和修改 })()
在定义类时可以直接将属性定义在构造函数中，实际上是语法糖
;(() => { class Dog0 { name: string age: number constructor(name: string, age: number) { this.name = name this.age = age >= 0 ? age : 0 } } // 在定义类时可以直接将属性定义在构造函数中，实际上是语法糖 class Dog { constructor(public name: string, public age: number) { this.age = age >= 0 ? age : 0 // 如果需要对属性进行初始值判断可以加上这句 } } const dog = new Dog('大黄', -2) console.log(dog) })()
泛型（ts新增）
// 泛型：不确定的类型，在定义的时候不确定，在执行的时候明确类型。 // 使用场景：在定义函数或类时，遇到类型不明确时使用泛型 function fn<T>(a: T): T { return a } const res = fn(10) // 可以直接调用具有泛型的函数，不指定泛型，ts可以自动推断类型 console.log(res) const res1 = fn<string>('hello') // 手动指定类型（严谨，推荐手动指定） console.log(res1) // 泛型可以同时指定多个 function fn1<A, B>(a: A, b: B): A { console.log(b) return a } fn1<number, string>(100, 'hello') // 可以对泛型的类型进行限制 interface Inter { length: number } // A extends Inter 表示泛型A必须是Inter实现类（Inter的子类） fn2的参数必须要有length属性，可以是数组，对象，字符串... 参数没有length属性会报错，比如数字 function fn2<A extends Inter>(a: A): number { return a.length } fn2([]) fn2({ length: 10 }) fn2('xxx') // fn2(100) // 报错 // 在类中使用泛型 class A<A> { name: A constructor(name: A) { this.name = name } } const a = new A<string>('小明') console.log(a) // {name: '小明'} const a1 = new A<number>(10) console.log(a1) // {name: 10}
