【ES6】JavaScript程序员run的使用方法

前言

对于传统的 JavaScript 程序，我们会使用函数和基于原型的继承来创建可重用的组件，但是对于熟悉使用面向对象方法的程序员来说，使用这些语法可能会很棘手，因为他们使用基于类的继承和构造对象从类。从 ECMAScript 2015（即 ES6）开始，JavaScript 程序员将能够使用基于类的面向对象方法。有了 TypeScript，我们现在就允许开发者使用这些功能，编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而无需等待下一个 JavaScript 版本。

类

// 类
(() => {
    class Person {
        // 声明属性
        name: string
        age: number
        gender: string
        // 构造方法
        constructor(name: string='jkc', age:number=18, gender:string='男') {
            this.name = name
            this.age = age
            this.gender = gender
        }
        // 一般方法
        sayHi(str: string){
            console.log(`你好，我叫${this.name},今年${this.age}岁，性别${this.gender}, 我想说：`, str)
        }
    }
    // 创建类的实例
    const person = new Person()
    // 调用实例的方法
    person.sayHi('我很帅')
})()

如果您使用过 C# 或 Java，您将非常熟悉这种语法。我们声明了一个 Person 类。这个类有 3 个属性，一个构造函数和一个 sayHi 方法。

我们使用 new 来构造 Person 类的实例。它将调用构造函数，创建一个 Person 类型的新对象，并执行构造函数对其进行初始化。最后通过person对象调用它的sayHi方法

继承

在 TypeScript 中，我们可以使用常见的面向对象模式。基于类的编程中最基本的模式之一是允许使用继承来扩展现有的类。

class Animal {
    name: string
    constructor (name: string) {
        this.name = name
    }
    run (distance: number=0) {
        console.log(`${this.name} run ${distance}m`)
    }
}

class Snake extends Animal {
    constructor (name: string) {
        // 调用父类型构造方法
        super(name)
    }
    // 重写父类的方法
    run (distance: number=5) {
        console.log('sliding...')
        super.run(distance)
    }
}
class Horse extends Animal {
    constructor (name: string) {
        // 调用父类型构造方法
        super(name)
    }
    // 重写父类型的方法
    run (distance: number=50) {
        console.log('dashing...')
        // 调用父类型的一般方法
        super.run(distance)
    }
    xxx () {
        console.log('xxx()')
    }
}
const snake = new Snake('sn')   
snake.run()
const horse = new Horse('ho')
horse.run()

我们定义了一个超类Animal，两个派生类Snake和Horse，并创建了2个实例对象snake和horse。

通过snake.run()我们可以看到Snake中有一个run方法，然后调用它，最终结果如下

通过horse.run()，我们可以看到Horse中有一个run方法，然后调用它，最终结果如下：

多态性

定义：不同类型的对象对同一个方法有不同的行为

继续上面的代码

// 父类型引用指向子类型的实例 ==> 多态
const tom: Animal = new Horse('ho22')
tom.run()
/* 如果子类型没有扩展的方法, 可以让子类型引用指向父类型的实例 */
const tom3: Snake = new Animal('tom3')
tom3.run()
/* 如果子类型有扩展的方法, 不能让子类型引用指向父类型的实例 */
const tom2: Horse = new Animal('tom2')
tom2.run()

这个例子演示了如何在子类中重写父类的方法。 Snake和Horse类都创建了run方法，重写了继承自Animal的run方法，使得run方法根据不同的类有不同的功能。注意即使tom被声明为Animal类型，因为它的值是Horse，所以当tom.run(34)被调用时，它会调用Horse中被覆盖的方法。

public、private 和 protected 修饰符默认为 public

在上面的例子中，我们可以自由地访问程序中定义的成员。如果你熟悉其他语言的类，你会注意到我们在前面的代码中没有使用 public 作为修饰；例如，C# 要求必须使用 public 显式指定成员。在 TypeScript 中，成员默认是公开的。

您还可以将成员显式标记为公开。我们可以通过以下方式重写上面的 Animal 类：

class Animal {
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}

了解隐私

当一个成员被标记为私有时，它不能在声明它的类之外被访问。例如：

class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}
new Animal("Cat").name; // 错误: 'name' 是私有的.

了解受保护

protected 修饰符的行为类似于 private 修饰符，不同之处在于，在派生类中仍可以访问受保护的成员。例如

class Animal {
    public name: string
    public constructor (name: string) {

        this.name = name
    }
    public run (distance: number=0) {
        console.log(`${this.name} run ${distance}m`)
    }
}
class Person extends Animal {
    private age: number = 18
    protected sex: string = '男'
    run (distance: number=5) {
        console.log('Person jumping...')
        super.run(distance)
    }
}
class Student extends Person {
    run (distance: number=6) {
        console.log('Student jumping...')
        console.log(this.sex) // 子类能看到父类中受保护的成员
        // console.log(this.age) //  子类看不到父类中私有的成员
        super.run(distance)
    }
}
console.log(new Person('abc').name) // 公开的可见
// console.log(new Person('abc').sex) // 受保护的不可见
// console.log(new Person('abc').age) //  私有的不可见

只读修饰符

您可以使用 readonly 关键字将属性设为只读。只读属性必须在声明或构造函数中初始化。

class Person {
    readonly name: string = 'abc'
    constructor(name: string) {
        this.name = name
    }

}
let john = new Person('John')
// john.name = 'peter' // error

参数属性

在上面的例子中，我们必须在Person类中定义一个只读的成员名和一个带有name的构造函数，并立即将name的值赋给this.name，这是经常遇到的。参数属性方便我们在一个地方定义和初始化一个成员。下面的例子是之前Person类的修改版，使用了参数属性

class Person2 {
  constructor(readonly name: string) {
  }
}
const p = new Person2('jack')
console.log(p.name)

请注意我们如何删除参数名称并仅在构造函数中使用只读名称：字符串参数来创建和初始化名称成员。我们将声明和赋值合并到一个地方。

通过在构造函数参数前添加访问限定符来声明参数属性。用私有限定参数属性声明并初始化私有成员；公共和受保护的情况也是如此。

访问器

TypeScript 支持通过 getter/setter 拦截对对象成员的访问。它可以帮助您有效地控制对对象成员的访问。

让我们看看如何重写一个简单的类来使用 get 和 set。首先，让我们从一个不使用访问器的示例开始。

class P{
    firstName: string = 'A'
    lastName: string = 'B'
    get fullName() {
        return this.firstName + '_' + this.lastName
    }
    set fullName(value) {
        const names = value.split('_')
        this.firstName = names[0]
        this.lastName = names[1]
    }
}
const p = new P()
console.log(p.fullName)
p.firstName = 'C'
p.lastName = 'D'
console.log(p.fullName)

p.fullName = 'E_F'
console.log(p.firstName, p.lastName)

静态属性

静态成员：类中被static修饰的属性或方法，即静态成员或静态方法，静态成员通过类名的语法调用。

class People{
    static name1: string = 'jkc'
    // 构造函数是不能通过static修饰的
    constructor() {
    }
    static sayHi() {
        console.log("hello")
    }
}
People.name1 = 'jkc2'
console.log(People.name1)
People.sayHi()

抽象类

抽象类：包含抽象方法（抽象方法一般没有具体的内容实现），也可以包含实例方法。抽象类不能被实例化，以允许子类实例化和实现内部抽象方法。

abstract class P1 {
    // 抽象方法不能有具体的实现代码
    abstract eat()
    sayHi() {
        console.log('hello')
    }
}
class P2 extends P1 {
    eat() {
        // 重新实现抽象类中的方法，此时这个方式是P2的实例方法
        console.log("吃东西")
    }
}
const p2 = new P2()
p2.eat()