(精华)2020年7月4日 JavaScript高级篇 ES6(class类的继承)

class Father{
    constructor(){
        this.name = '父亲'
        this.age = 33
    }
    work(){
        console.log('我是父类');
        
    }
}

class Children extends Father{
    constructor(name,age,play){
        super()
        this.name = name
    }
}

let personZhang = new Children('tony',44,'打游戏')
console.log(personZhang.name);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
 

super

// 通过extends
// super 关键字
// 继承必须要在constructor方法中去调用super
// 原因是子类自己的this对象 必须通过父类的构造函数生成
// 不调用super 子类就得不到this对象
class A{
    // 属性应该怎么写？？？
    pA = 123
    p(){
        return 3
    }
}
A.prototype.pA = 123

class B extends A{
    constructor(){
        super()
        console.log(super.p()) // 3
        console.log(super.pA)//  undefined
    }
}
// 调用super后内部的this指向子类的实例 
class A{
    constructor(){
        this.x = 1
    }
    print(){
        console.log(this.x);
    }
}
class B extends A{
    constructor(){
        super()
        this.x = 2
    }
    fn(){
        super.print()
        // 相当于 es5里面的super.print.call(this)
    }
}
// 通过super对属性赋值 这时的super相当于this
class A{
    constructor(){
        this.x = 1
    }
}
// A.prototype.x = 3
class B extends A{
    constructor(){
        super()
        this.x = 2
        super.x = 3 // this.x = 3
        console.log(super.x); // undefined
        console.log(this.x); // 3
        
    }
}

// super作为对象在静态方法中
// 指向父类而不是原型对象
class Parent{
    static myMethod(msg){
        console.log(`static-${msg}`);
        
    }
    myMethod(msg){
        console.log(`普通-${msg}`);
    }
        
}

class Child extends Parent{
    static myMethod(msg){
        super.myMethod(msg)
    }
    myMethod(msg){
        super.myMethod(msg)
    }
}
// 子类的静态方法中通过super调用父类的方法时 
// 方法内部的this指向当前的子类 而不是子类的实例
class A{
    constructor(){
        this.x = 1
    }
    static print(){
        console.log(this.x);
    }
}
class B extends A{
    constructor(){
        super()
        this.x = 2
    }
    static fn(){
        super.print()
    }
}

  

 

  
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
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107132121