angular2-webpack-starter/examples/01-es6/7.class.ts at webworker · correasebastian/angular2-webpack-starter · GitHub

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
/*
 * We now have sugar for a common pattern a lot of people use in ES5
 * we commented out the code because class declarations needs to be
 * declared at the top-level declaration
 */


// ES6 class
class TestObject {

}

console.log('\n', TestObject.toString())

// ES5 we would do this
function TestObjectES5() {

}

console.log('\n', TestObjectES5.toString())


// what happens when we add a method?

// ES6 class
class TestObject {
  method() {
    console.log('method');
  }
}

console.log('\n', TestObject.prototype.method.toString())

// ES5 we would do this
function TestObjectES5() {

}

TestObjectES5.prototype.method = function() {
  console.log('method');
}

console.log('\n', TestObjectES5.prototype.method.toString())


// what happens when we subclass?

class AnotherObject {

}
// ES6 class
class TestObject extends AnotherObject {
  method() {
    console.log('method');
  }
}

function AnotherObjectES5() {

}

// ES5 we would do this
function TestObjectES5() {
  AnotherObjectES5.apply(this, arguments);

}

TestObjectES5.prototype = Object.create(AnotherObjectES5);
TestObjectES5.prototype.constructor = TestObjectES5;

TestObjectES5.prototype.method = function() {
  console.log('method');
}