hi! Everybody is good! I am a medical examiner, a treatment department front-end code ape 🐒, dialogue with the code, listen to the voice of their heart, looking forward to everyone’s praise 👍 and attention ➕.
1. Overview of object orientation
Says to the class had to object-oriented, this is because the TS for the front-end object-oriented development brought the opportunity, because the JS no type system, if you use the way of object-oriented development will produce a large number of interfaces (not TS the interface, it is the function or method), and can lead to a large number of interface call complexity increases, This complexity must be avoided by rigorous type checking. Without rigorous type checking, we are left to our memory during calls and at the center of code writing 😩 without any sense of security 🤷♂️. Because of this, THE JS language is not suitable for large projects. This is due to the nature of JS itself — interpreted and weakly typed
TS brings a complete type system, so when developing complex applications, you can get complete type checking regardless of the number of interfaces, and this checking is highly binding
The word object oriented has been around for a long time, it is said that Alan Kay came up with it, there is a debate about who is the father of object oriented, as for who, I don’t want to use too much care, there are many mature patterns in object oriented, can handle all kinds of complex problems, after all, I have accumulated a lot of experience in large application complex domain, Since TS provides an opportunity for front-end object-oriented development, and front-end development is becoming increasingly complex, the combination of front-end and object-oriented development is also natural
What is object orientation?
Object-oriented: Object-oriented, referred to as OO, it is a kind of programming ideas, it puts forward all to divide the object as the starting point of thinking procedures. There are other programming ideas, too. For example, procedural, functional programming. Process-oriented is not suitable for large-scale project development because it is based on functional flow, while functional programming is based on mathematical operation
2. Class inheritance
Inheritance can describe the relationship between classes. For example, if a person is a class, a man is also a class. If a man is a person, the relationship between man and man can be inherited
If A and B are both classes and can be described as if A is B, then A and B form an inheritance relationship. We call B A parent class and A A subclass.
- B is the parent class and A is the subclass
- B is derived from A, and A is derived from B
- B is A base class of A, and A is A derived class of B
Don’t panic if you see different words in books or articles 🤞, they all mean the same thing. The advantage of inheritance is that subclasses have all the members of their parent class, which saves a lot of code duplication
2.1 Rewriting of members
📢 override: A subclass can override the corresponding member of its parent class, either an attribute or a method, but it is important to note that the subclass cannot change the type of the parent member. The types must match
An example is 🌰 : subclasses override attributes of their parent class
export class Person{
eyes:number = 0
}
export class Man extends Person{
eyes:number = 2
eyes:string = "2" The subclass cannot change the type of the member of the parent class. What type is the parent class? What type must the subclass be
}
const m = new Man();
console.log(m.eyes);/ / 2
Copy the codeAn example is 🌰 : subclasses override methods of their parent classes
export class Person{
eyes:number = 0
sayHello(){
console.log("Hello world."); }}export class Man extends Person{
eyes:number = 2
sayHello(){
console.log("I'm a man. I'm handsome."); }}const m = new Man();
m.sayHello();// I am a man, I am handsome
Copy the code2.2 This points to the problem
📢 Note the this keyword: In an inheritance relationship, the reference to this is dynamic, depending on the caller
An example is 🌰 : the direction of this keyword
export class Person{
name:string = "God"
sayHello(){
console.log('Hello, my name isThe ${this.name}`); }}export class Man extends Person{
name:string = "Dr. Wu"
sayHello(){
console.log('Hello, my name isThe ${this.name}`); }}const m = new Man();
m.sayHello();// Since this is called by m, it points to the class Man, so the output is: Hello, my name is Dr. Wu
Copy the code2.3 Super keyword
The super keyword can be used when we need to call methods of the parent class in a subclass
An example is the 🌰 : super keyword
export class Person {
name: string = "God"
sayHello() {
console.log('Hello, my name isThe ${this.name}`); }}export class Man extends Person {
name: string = "Dr. Wu"
test() {
super.sayHello();// Hello, my name is Dr. Wu
this.sayHello();// Hello, my name is Dr. Wu}}const m = new Man();
m.test();
Copy the codeI think you can see that when you use the super keyword to call the parent sayHello, super has the same effect as this, but only if the subclass does not override the parent sayHello function, Super is different from this
For example 🌰 : rewrite the sayHello function and look at the super keyword
export class Person {
name: string = "God"
sayHello() {
console.log('Hello, my name isThe ${this.name}`); }}export class Man extends Person {
name: string = "Dr. Wu"
sayHello() {
console.log(I'm a handsome boy);
}
test() {
super.sayHello();// Hello, my name is Dr. Wu
this.sayHello();// I am handsome}}const m = new Man();
m.test();
Copy the code2.4 Inherited Features
-
Single root: a subclass can inherit only one parent class, not more than one parent class. If you want to inherit more than one parent class, mix it into a mixin
-
Transitivity: A inherits B and C inherits A, so C has members of both A and B
3. An abstract class
3.1 Why abstract classes
📢 abstract class is not available in JS, it is proposed by TS. Sometimes, a class only represents the abstract concept, mainly used to extract the common members of the subclass, but can not directly create its object, when this class can be used as an abstract class. Abstract classes can be expressed by prepending them with abstract. Abstract classes cannot create objects
3.2 Abstract superclass
An example is 🌰 : the abstract superclass Person, which represents a Person
abstract class Person {}class Man extends Person {}class Woman extends Person{}const m = new Man();
const w = new Woman();
Copy the code3.3 Abstract Members
📢 in the parent class, may know some members must exist, such as the name of a person, each person has a name, but we have no way to write directly in the parent class specific call what name, only know that in a subclass object, therefore, need a strong constraint, to inherit the parent class subclasses must implement the members
Note that only in an abstract class can you have abstract members, which must be implemented in a subclass, and must be 😛
For example 🌰 : abstract member, subclass implementation
abstract class Person {/ / abstract classes
abstract readonly name: string;// Abstract member
}
/** * playBoy stands for playBoy */
class playBoy extends Person {
readonly name: string = "Wang";// Subclasses implement abstract members, the first way
}
/** * prettyWoman */
class prettyWoman extends Person {
readonly name: string;
constructor() {
super(a)this.name = "Cui flower";// Subclasses implement abstract members, the second way}}/** * twoTimer
class twoTimer extends Person {
// There is no set accessor here, so it is read-only, so it can not use readonly, and can not use it
get name() :string {
return Wang Xiao Jian;// Subclasses implement abstract members, the third way}}const pB = new playBoy();
const pW = new prettyWoman();
const tT = new twoTimer();
console.log(pB.name,pW.name,tT.name);// Lao Wang Cuihua wang Xiaojian
Copy the code4. Static members
4.1 What is a Static Member
📢 static members are members attached to a class, including properties and methods. In JS, we can say members attached to a constructor. Static members are also called non-instance members, which belong to a class. Instance members are also called object members, which belong to a class
For example 🌰 :
class Person {
name: string = "Front-end hunter."
age: number = 18
static sayHello(say:string){
console.log(` I want to say${say}`); }}const res1 = Person.sayHello("Hello, world!);// Static methods must be called by class
console.log(res1);// I want to say hello world!
const res2 = new Person();Instance members must be called from instance objects
console.log(res2.age,res2.name);/ / 18 cui flower
Copy the code4.2 This in static methods
📢 This in the static method points to the current class, while this in the instance method points to the current object
5. The indexer
Objects, or member expressions, in TS do not do strict type checking on indexers (member expressions) by default. Use the noImplicitAny configuration to turn on implicit any checking. Implicit any: Indicates the any type derived by ts based on actual situations
The role of indexers in TS
- Dynamically adding members to a class can be implemented under strict inspection
- You can implement dynamic manipulation of class members
In JS, all member names are essentially strings. If you use numbers as member names, they are automatically converted to strings
In TS, if two types of indexers are used in a class, the value types of the two indexers must match
The last
Thank you very much for reading the last 😘. If you think this article is helpful to you, you may wish to pay attention to ➕+ like 👍+ collect 📌+ comment ➕. Your support is the biggest motivation for me to update.