FilesExpand file tree

 master

/

class.js

Copy path

Blame

More file actions

Blame

More file actions

Latest commit

 

History

History

History

134 lines (115 loc) · 2.71 KB

 master

/

class.js

Copy path

Top

File metadata and controls

• Code
• Blame

134 lines (115 loc) · 2.71 KB

Raw

Copy raw file

Download raw file

Open symbols panel

Edit and raw actions

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

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

'use strict';

// Object-oriendted programming

// class: template

// object: instance of a class

// JavaScript classes

// - introduced in ES6

// - syntactical sugar over prototype-based inheritance

// 1. Class declarations

class Person {

// constructor

constructor(name, age) {

// fields

this.name = name;

this.age = age;

}

// methods

speak() {

console.log(`${this.name}: hello!`);

}

}

const ellie = new Person('ellie', 20);

console.log(ellie.name);

console.log(ellie.age);

ellie.speak();

// 2. Getter and setters

class User {

constructor(firstName, lastName, age) {

this.firstName = firstName;

this.lastName = lastName;

this.age = age;

}

get age() {

return this._age;

}

set age(value) {

// if (value < 0) {

// throw Error('age can not be negative');

// }

this._age = value < 0 ? 0 : value;

}

}

const user1 = new User('Steve', 'Job', -1);

console.log(user1.age);

// 3. Fields (public, private)

// Too soon!

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Class_fields

class Experiment {

publicField = 2;

#privateField = 0;

}

const experiment = new Experiment();

console.log(experiment.publicField);

console.log(experiment.privateField);

// 4. Static properties and methods

// Too soon!

class Article {

static publisher = 'Dream Coding';

constructor(articleNumber) {

this.articleNumber = articleNumber;

}

static printPublisher() {

console.log(Article.publisher);

}

}

const article1 = new Article(1);

const article2 = new Article(2);

console.log(Article.publisher);

Article.printPublisher();

// 5. Inheritance

// a way for one class to extend another class.

class Shape {

constructor(width, height, color) {

this.width = width;

this.height = height;

this.color = color;

}

draw() {

console.log(`drawing ${this.color} color!`);

}

getArea() {

return this.width * this.height;

}

}

class Rectangle extends Shape {}

class Triangle extends Shape {

draw() {

super.draw();

console.log('🔺');

}

getArea() {

return (this.width * this.height) / 2;

}

toString() {

return `Triangle: color: ${this.color}`;

}

}

const rectangle = new Rectangle(20, 20, 'blue');

rectangle.draw();

console.log(rectangle.getArea());

const triangle = new Triangle(20, 20, 'red');

triangle.draw();

console.log(triangle.getArea());

// 6. Class checking: instanceOf

console.log(rectangle instanceof Rectangle);

console.log(triangle instanceof Rectangle);

console.log(triangle instanceof Triangle);

console.log(triangle instanceof Shape);

console.log(triangle instanceof Object);

console.log(triangle.toString());

let obj = { value: 5 };

function change(value) {

value.value = 7;

}

change(obj);

console.log(obj);