javascript-Class-类

javascript-Class-类

九月 21, 2020

javascript-Class-类

创建时间：2020-09-19 21:54:36

写在前面

其实javascript的class内容比较简单，如果学习过其他面向对象语言的话，基本上只要浏览一遍就可掌握，所以只做简单罗列

参考资料

  1. https://es6.ruanyifeng.com/#docs/class
  2. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes
  3. https://github.com/lin-123/javascript

正篇

JavaScript 语言中，生成实例对象的传统方法是通过构造函数，但和跟传统的面向对象语言略有差距，所以es6新加入了class，但其实大部分功能es5也能实现

1
2
3
4
5
6
7
8
9
10
11
// es5
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);
1
2
3
4
5
6
7
8
9
10
11
12
13
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}
var p = new Point(1, 2)
console.log(p.toString())
// (1, 2)
1
2
3
4
console.log(typeof(Point)) 
// function
console.log(Point === Point.prototype.constructor)
// true

上面基本说明了js类

构造方法/函数

1
2
3
constructor(){
    
}
1
2
3
4
5
6
7
8
class Harekaze {
  constructor() {
    console.log("init")
  }

}
var p = new Harekaze()
// init

get set 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
class Rectangle {
  // constructor
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
const square = new Rectangle(10, 5);
console.log(square.height);
// 10
square.height = 100
console.log(square.height); 
// 100
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Rectangle {
  // constructor
  constructor() {
  }
  // Getter
  get area() {
    return this.calcArea()
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}
const square = new Rectangle();
square.height = 10
square.width = 10
console.log(square.area); // 100

js中的class自带get、set方法

原型和静态方法

原型方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Rectangle {
  // constructor
  constructor(height, width) {
    this.height = height || 0
    this.width = width || 0
  }
  // Getter
  get area() {
    return this.calcArea()
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}
const square = new Rectangle();
console.log(square.area); 
// 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Rectangle {
  // constructor
  constructor(height, width) {
    this.height = height || 0
    this.width = width || 0
  }
  // Method
  area() {
    return this.height * this.width;
  }
}
const square = new Rectangle();
console.log(square.area()); 
// 0

静态方法

静态方法不需要实例化就可以直接使用

1
2
3
4
5
6
7
8
9
10
11
12
class Rectangle {
  // constructor
  constructor() {
  }
  // Method
  static area(height, width) {
    return height * width;
  }
}

console.log(Rectangle.area(2, 3));
// 6

私有属性 和 私有方法

私有属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class IncreasingCounter {
  #count = 0;
  get value() {
    console.log('Getting the current value!');
    return this.#count;
  }
  increment() {
    this.#count++;
  }
}
var test = new IncreasingCounter()
// console.log(test.#count) // 使用这个会报错
console.log(test.count)
console.log(test.value)
// undefined
// Getting the current value!
// 0

私有方法

注：我用的为nodejs v12.9.1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 这个方法我测试没有通过
// class Foo {
//   #a;
//   #b;
//   constructor(a, b) {
//     this.#a = a;
//     this.#b = b;
//   }
//   #sum() {
//     return this.#a + this.#b;
//   }
//   printSum() {
//     console.log(this.#sum());
//   }
// }
// var x = new Foo()
// console.log(x.printSum())

将私有方法写在类外，但这样只有其他文件应用该类是才有作用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var sum = function(a, b) {
  return a + b
}

module.exports = class Foo {
  #a;
  #b;
  constructor(a, b) {
    this.#a = a;
    this.#b = b;
  }
  printSum() {
    console.log(sum(this.#a, this.#b));
  }
}

还有就是使用Symbol

继承

javascript的继承会继承父类的所有属性和方法

1
2
3
4
5
6
7
8
9
10
11
class Harekaze {
}

class Akeno extends Harekaze {
  constructor(){ 
    super() // 这里需要调用父类的构造方法，不然会报错 或者干脆不写constructor
      // 同时使用this关键字需要在super()后面
  }
}

var x= new Akeno()