唯品秀前端博客
当前位置: 前端开发 > JavaScript > 秒懂ES6-class类的继承与super前端进阶，世界如此简单

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

2020-08-28 分类：JavaScript 作者：管理员 阅读（2296）

在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名即可获取使用。继承子集的方法属性修改不会影响父级方法函数。

「梦想一旦被付诸行动，就会变得神圣，如果觉得我的文章对您有用，请帮助本站成长」

分享到：
赞(2) 打赏
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏

标签：

上一篇：

下一篇：

相关推荐

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

最新评论

    暂无留言哦~~

博客简介

一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站，梦想一旦被付诸行动，就会变得神圣，愿景：成为宇宙中最具有代表性的前端技术类博客。主题开源 

最近更新

随机文章

热门标签

caniuse兼容性 CDN大全 daovoice客服 犸良动画 百度统计 百度收录 经典css片段 时间戳格式化 全国黑企名单 武汉黑企名单 Markdown Js33个概念 30秒的代码 vConsole Eruda调试 DSBridge DOM元素进屏 Shareinstall Http接口测试 前端面试100问 Vue.js200问 Vue插件大全 Node.js上线 视频压缩 vue视图更新 Windows激活 机场客户端

精彩评论

友情链接

他们同样是一群网虫，却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步，但同学却不局限在一国一校，而是遍及全球！申请交换友链

站点统计

  • 文章总数： 295 篇
  • 草稿数目： 0 篇
  • 分类数目： 17 个
  • 独立页面： 7 个
  • 评论总数： 1020 条
  • 链接总数： 14 个
  • 标签总数： 490 个
  • 注册用户： 2 人
  • 访问总量： 9,530,744 次
  • 最近更新： 2021年10月19日
服务热线：
 173xxxx7240

 QQ在线交流

点击这里给我发消息

 旺旺在线

点击这里给我发消息