2020-03-06

Node-JS专精13_01类

类知识简介

为什么有类

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

为什么有继承

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

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

对象的属性重复了

两个对象的属性重复

1 2	let p1 = {name:'aa',age:18,sayHi(){}} let p2 = {name:'bb',age:18,sayHi(){}}

于是有了类和构造函数

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

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英文/中文官网看

不想所有函数都是共用的

写成箭头函数

class Pserson {
    sayHi(){} // 共用
    myFn = () => {} // 自用
}

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

你必须onclick 那里bind(this)否则报错

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);

而如果是各自的函数，就可以直接调用

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);

代码地址