Class类三种函数的区别：普通函数、get函数、 静态函数

Class类三种函数的区别：

• 1. 普通函数（如示例代码的 方式一）
  可以传参，函数内可以用this关键字获取实例属性，需要通过实例对象调用 (如u.getUserName(obj))
• 2. get函数（如示例代码的 方式二）
  不能传参，函数内可以用this关键字获取实例属性，需要通过实例对象调用 (如u.userImg)
  注意：调用函数时不需要加括号()
• 3. 静态(static)函数（如示例代码的 方式三）
  可以传参，函数内this关键字指向类(即 User)，因此不能用this关键字获取实例的属性
  需要通过类名直接调用 (如User.getUserType(obj, 1))
  注意：
  • (1)通过类名直接调用，不能通过实例对象调用
  • (2)静态函数中的this指向类(即 User)，this只能调用静态方法和静态属性

实例方法与静态方法的区别与选择：

• 实例方法（如方式一 和 方式二）
  实例方法属于实例的行为，偏面向对象编程，复用性、灵活性较高，可以处理各种复杂的业务
  get函数更能体现面向对象的思想，当遇到不需要传参的业务逻辑时，推荐使用get函数
• 静态方法（如方式三）
  静态方法属于类的行为，偏面向过程编程（非面向对象），不太具有复用性，需要传入大量的参数
  一般用于偏简单的业务逻辑

class User {
  constructor(id, type) {
    this.id = id;
    this.type = type;
  }

  // 方式一: 普通函数
  getUserName(user) { // 可以传参
    // 可以使用 this 关键字获取实例对象的属性
    if (this.id === user.id) {
      return user.name;
    }
    return null;
  }

  // 方式二: get 函数
  get userImg() { // 不能传参
    const user = {
      id: 1,
      img: 'xxx.img',
      type: 'normal'
    }
    // 可以使用 this 关键字获取实例对象的属性
    if (this.id === user.id) {
      return user.img;
    }
    return null;
  }

  // 方式三: 静态(static)函数
  static getUserType(user, id) { // 可以传参
    // 静态函数中的 this 对象代表类本身(即 User)
    // 此时 this 只能获取类(即 User)中的静态方法和静态属性
    // 因此不能可以使用 this 关键字获取实例对象的属性
    // console.log(this);
    if (user.id === id) {
      return user.type;
    }
    return null;
  }
}

// 调用
const u = new User(1, 'personal');
const obj = { id: 1, name:'Jack', type: 'normal' };

// 调用方式一: 通过实例对象调用
const uName = u.getUserName(obj);
console.log('uName:', uName);

// 调用方式二: 通过实例对象调用，调用时不需要加括号()
const uImg = u.userImg;
console.log('uImg:', uImg);

// 调用方式三: 通过类名直接调用
const uType = User.getUserType(obj, 1);
console.log('uType:', uType);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58