TS之类与修饰

2022-04-26  本文已影响0人  莫问前程F6

类的概念在后端语言(如Java)中存在很久了,但在JavaScript中很长一段时期是没有的,直到TypeScript/ES2015 登上舞台。

对JavaScript熟悉的会知道,Class出现之前,我们可以用构造函数和原型通过不同变种来模拟类的行为,但每种都各有优劣,发挥特点的同时存在弊端,代码也不够简洁,容易陷入混乱。

TypeScript 是 JavaScript 的超集,是包含关系,它们有相当部分是一样的,且TypeScript进行了一些扩展,特性更多,所以本篇直接介绍 TypeScript 的类。

Class定义

Class的灵活度很大,这取决于你需要使用它做什么。比如,如果仅仅是定义,这样就够了。

class Calculator{

}
let calculator:Calculator = new Calculator()

这段代码可能眼熟,new 我们在聊构造函数时见过,用于实例化一个对象,在这里的用途是一样的,你可能会问了,这里也没有构造函数呀,其实可以有,它长这样:

class Calculator{
    constructor(){
        console.log('构造了一个对象')
    }
}

但”可以有“的意思是也”可以没有“,即非必须。当没有的时候,会获得一个隐式的构造函数,所以并不影响new实例化对象。

只是这样的定义没有意义,它什么都没做,类需要有丰富的成员来实现强大的功能。

实例成员

属性

刚刚定义了一个计算器的类,它是空的,现在增加一个代表精度的属性。

class Calculator{
    precision:number = 2
}

添加属性的动作看上去像变量声明,实例属性的定义就是这么做。
对类的使用比较熟的可能更习惯于下面这种方式:

class Calculator{
    constructor(precision){
        this.precision = precision
    }
}

但类的属性可以在类中直接定义,和构造函数不同。
可以这样访问:

let calculator:Calculator = new Calculator()
let precision:number = calculator.precision

也可以给属性赋值:

calculator.precision = 3

既然可以后赋值,是否代表定义时可以不赋值?对的。

class Calculator{
    precision:number = 2;
    maxValue:number;  // 最大值
    minValue;   // 最小值
}

不同于属性precision,新增的两个属性在定义时都未被指定初始值,因此当新的计算器对象被实例化时,maxValue和minValue两个属性的值会被默认为undefined。而且minValue的类型会默认为 any。
不显式定义类型不是好习惯,值为undefined也不好,所以,最好在定义时指明类型,也马上设置初始值。

let calculator:Calculator = new Calculator()
calculator.maxValue = 100
calculator.minValue = 10

但每次都这么做略显繁琐,有什么好方法能够既不需要事先赋值,又在实例化的时候方便初始化?

构造函数

了解背后机制的都知道,构建对象实例的时候引擎做了一些事情,比如:新建对象,绑定this,返回对象。在类中是同样的过程,所以,如果我们想在类实例化时初始化属性,可以这么做。

class Calculator{
    precision:number = 2;
    maxValue:number;  
    minValue:number;

    constructor(maxValue:number,minValue:number){
        this.maxValue = maxValue
        this.minValue = minValue
    }
}

let calculator:Calculator = new Calculator(100,10)
calculator.maxValue  // 100
calculator.minValue  // 10

方法

很少有类是不需要方法的,因为要给调用方提供处理数据的能力。这个概念不是很难理解,只举一个简单的例子:

class Calculator{
    precision:number = 2;
    
    add(a:number,b:number):number{
        let res = (a + b).toFixed(this.precision)
        return +res
    }
}
let calculator:Calculator = new Calculator()
calculator.add(1.233,1.456)  // 2.7

访问器

相比以上三位,访问器看似不是主干功能,很多人可能从来没写过,单纯的类只要属性和方法就行了。

访问器的存在,使得对象实例的属性修改得以被监测。

当真这么神奇?

class Calculator{
    _precision:number = 2;
    
    get precision:number(){
        console.log('获取_precision的值')
        return this._precision
    }
}
let calculator:Calculator = new Calculator()
console.log(calculator.precision)
上一篇下一篇

猜你喜欢

热点阅读