唯品秀前端博客
当前位置: 前端开发 > JavaScript >

秒懂ES6-class类的继承与super前端进阶，世界如此简单

作者：管理员 2020-08-28 17:26:57 分类：JavaScript 阅读（4141） 0

在ES6中，class类应该算是一个亮点，毕竟让以前那么苦涩难懂的面向对象通过语法糖形式变得如此的优雅简单，下面详细介绍关于class的一些特性，看完这个你要没学会，我代表w3c组织劝退你，当然你要实在不会，还是可以多看两遍哈

实例方法和属性

首先要讲的就是class的实例方法，我们通过class定义一个方法Person，Person中有个constructor，当然它是固定写法，然后我们自定义一个方法speak，最后通过new方式打印出我们传进去的值，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speak(){
        console.log( "我叫" + this.name + ",今年" + this.age + '岁' )
    }
}

var s = new Person( "唯品秀",3 );
console.log(s.speak());  // 我叫唯品秀，今年3岁

静态方法和属性

静态方法其实就是在普通实例方法前面加个static，静态属性则是通过Person外直接去定义，而不是在里面，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
        static isNumber( sum ){ //静态方法
           return typeof sum === 'number' && !isNaN(sum )
        }
    speak(){
        console.log( "speak...." )
    }
}
Person.text = "唯品秀";
var s = new Person( "唯品秀",3 );
console.log( Person.text ) // 获取静态属性
console.log(Person.isNumber(10));  //使用静态方法

方法继承和修改

应该来说，所谓面向对象中继承是个核心，如果没有继承，那面向对象就没多大意义了，通过class方式，继承非常简单，只需要通过class 新类 extends 需要继承类，哪怕你继承后什么也不写，通过newPerson也可以拿到Person的方法可属性，代码如下：

1
2
3
class newPerson extends Person {
}
console.log(newPerson.text) //  唯品秀

下面来说属性的新增和方法修改，如下我在newPerson新的class类中又重新定义了speak方法，并且在constructor中通过super既继承了原本父亲Person方法的两个属性，又新增了一个'weight'属性，这就是继承中的新增和修改，继承的新增和修改并不会改变原本的Person属性和方法，代码如下：

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
<script>
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    static isNumber(sum) { //静态方法
        return typeof sum === 'number' && !isNaN(sum)
    }
    speak() {
        console.log("我叫" + this.name + ',' + "今年" + this.age + '岁')
    }
}
Person.text = "唯品秀";

class newPerson extends Person {
    constructor(name, age, weight) {
        super(name, age); // 继承属性
        this.weight = weight; // 新增属性
    }
    speak() {
        console.log("我叫" + this.name + ",今年" + this.age + '岁' + ',体重' + this.weight)
    }
}

var s_new = new newPerson("唯品秀", 3, 270);
console.log(s_new.speak()) // 我叫唯品秀,今年3岁,体重270 继承并修改speak方法
console.log(newPerson.text) //唯品秀 继承静态属性
</script>

小结

在class类中，实例方法必须是通过new返回后才能使用，而静态方法、属性直接通过class名即可获取使用。继承子集的方法属性修改不会影响父级方法函数。

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(2) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 0 条评论关于"秒懂ES6-class类的继承与super前端进阶，世界如此简单"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏