Node-JS专精13_01类

类知识简介

为什么有类

  • 不同对象的属性重复了，就有类

为什么有继承

  • 不同的类的属性重复类，就有继承

大部分编程技巧，都是为了解决重复

对象的属性重复了

  • 两个对象的属性重复
1
2
let p1 = {name:'aa',age:18,sayHi(){}}
let p2 = {name:'bb',age:18,sayHi(){}}

于是有了类和构造函数

1
2
3
4
5
6
7
8
9
10
11
12
class Pserson {
    name
    age
    sayHi(){}
    constructor(name,age){
        this.name = name
        this.age = age
    }
}

let p1 = new Person('aa',18)
let p2 = new Person('bb',18)

改写成TS

1
2
3
4
5
6
7
class Person{
    sayHi(): void {}
    constructor(public name: string, public age: number){}
}

let p1 = new Person('aa',18)
let p2 = new Person('bb',18)

总结

类

  • 类就是把对象的属性提前写好，避免重复
  • 类里面的字段会变成对象的属性
  • 为了节约内存，所有函数都是 共用的
  • 而非函数属性是各个对象自有的
  • 使用 console.dir 可以看出来

构造函数

  • 属性名虽然可以提前写好，但是属性值不行
  • 所以需要构造函数接受参数，初始化属性值
  • 构造函数不需要写 return , 默认会 return 新对象

语法

  • JS的所有 class 语法可以在 MDN上看
  • TS的所有 class 语法可以在 TS英文/中文 官网看

不想所有函数都是共用的

  • 写成箭头函数
1
2
3
4
class Pserson {
    sayHi(){} // 共用
    myFn = () => {} // 自用
}

这玩意除了浪费内存还有啥用？

  • 你必须onclick 那里bind(this)否则报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  name = "Frank";
  sayHi(){
    console.log(this);
    console.log(`Hi, I'm ${this.name}`);
  };
  render() {
    return (
      <div>
        <button onClick={this.sayHi.bind(this)}>say hi</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
  • 而如果是各自的函数，就可以直接调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  name = "Frank";
  sayHi = () => {
    console.log(this);
    console.log(`Hi, I'm ${this.name}`);
  };
  render() {
    return (
      <div>
        <button onClick={this.sayHi}>say hi</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);