文档章节

ES6定义类-class初体验

m
 maginaCP
发布于 2016/12/11 21:35
字数 316
阅读 30
收藏 1

码上生花,ECharts 作品展示赛正式启动!>>>

    ES6中引入了class关键字,简化了js定义类的操作

    1.基本用法

     1. 构造函数,实例属性与静态属性

    class People {
        //构造函数
        constructor(name){
            this.name = name;
        }
        //实例属性
        sayName(){
            console.log(this.name);
        }
        //静态属性
        static sayClassName(){
            console.log(this.name);
        }
    }
    var p = new People('magina');
    p.sayName(); //magina
    People.sayClassName(); //People

        2. 私有方法

由于ES6并没有提供对私有属性的语法支持,可以使用闭包实现私有属性

    var People = (function () {
        //私有属性
        var sayHi = function () {
            console.log('Hi,' + this.friend);
        };
        class People {
            constructor(friend){
                this.friend = friend;
                //调用
                this.sayHi = sayHi;
            }
        }
        return People;
    })();
    var p = new People('axe');
    p.sayHi();

     3. 没有变量提升

        声明式与表达式都没有变量提升

    var p = new People() //People is not defined
    var People = class {};
    var stu = new Student() //Student is not defined
    class Student {};

    2. 继承性

  1. extends继承父类 StudentInstance.proto == People
  2. super引用父类
     //继承 extends
     class Student extends People{
         constructor(grade,name){
             //引用父类
             super(name);
             this.grade = grade;
         }
         sayGrade(){
             console.log(this.grade);
         }
     }

    3. settet/getter 读写属性

    class Student{
        constructor(score){
            this.score = score;
        }
        set score(score){
            this._score = score;
        }
        get score(){
            return this._score.toFixed(2);
        }
    }

    var stu = new Student(88);
    console.log(stu.score);     //88.00 String
    console.log(stu._score);    //88 Number

        注意:setter内赋值操作的变量名,不可与setter的变量名相同,否则会递归调用setter导致堆栈溢出

    set score(score){
        this.score = score;
    }
     //Uncaught RangeError: Maximum call stack size exceeded

 

© 著作权归作者所有

m
粉丝 1
博文 1
码字总数 316
作品 0
私信 提问
加载中
请先登录后再评论。
Vue & TypeScript 初体验 - 使用Vuex (vuex-module-decorators)

上一篇: Vue & TypeScript 初体验 在上一篇文章中简单介绍了Vue项目中使用TypeScript, 以及相比原来Vue组件写法的一些改变. 本文主要针对在TypeScript下Vuex写法如何更贴近TS的面向对象编程....

James Zhang
2019/11/24
0
0
AngularJS2.0 教程系列(一)

Why Angular2 Angular1.x显然非常成功,那么,为什么要剧烈地转向Angular2? 性能的限制 AngularJS当初是提供给设计人员用来快速构建HTML表单的一个内部工具。随着时间的推移,各种特性 被加...

笔阁
2015/07/22
2.5W
1
这篇文章让你彻底搞懂ES6中的Class(全面解析)

前言 提到ES6中的class你会想到什么呢?可能有的小伙伴只是知道它,或许用过一两次,没关系,这次我们从头开始,带你体验class的铁汉柔情(强大和优雅); 跟往常一样,我们需要带着三个问题...

冯智豪
01/20
0
0
ES6专题—class与面向对象编程-体验javascript之美-SegmentFault思否

在ES5中,我们经常使用方法或者对象去模拟类的使用,并基于原型实现继承,虽然可以实现功能,但是代码并不优雅,很多人还是倾向于用 class 来组织代码,很多类库、框架创造了自己的 API 来实...

python
2019/05/11
0
0
ES6中的class是如何实现的?(附Babel编译的ES5代码详解)

序言 今天强行被某大厂社招面试了一波,时长持续半个小时,以面试官的一句“面试反馈还挺好的,希望以后保持联系”告终。时间节点发生在辞掉实习回学校做毕设的时候,这场面试就显得格外刺激...

番茄沙司
2019/05/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

HashMap解析(主要JDK1.8,附带1.7出现的问题以及区别)

按问题的形式来吧,这些大多是我自己总结的,如有错误请及时指正谢谢 1.你了解HashMap么,可以说说么?   首先,HashMap是一种数据结构,可以快速的帮我们存取数据。它的底层数据结构在1.7...

osc_gzy7qjj6
43分钟前
16
0
CentOS8.1操作系下使用通用二进制包安装MySQL8.0(实践整理自MySQL官方)

  写在前的的话: 在IT技术日新月异的今天,老司机也可能在看似熟悉的道路上翻车,甚至是大型翻车现场!自己一个人开车过去翻个车不可怕,可怕的是带着整个团队甚至是整个公司一起翻车山崖...

osc_494omtst
44分钟前
15
0
关于对健壮性代码的理解

这两天学到了很多知识,对项目的严密性有了极为深刻的理解,简而言之,身为前端开发者要站在用户的角度去写相关代码,而不能仅仅局限于理所当然,也不可以认为数据有便有,没有便没有,身为开...

osc_47pscir3
46分钟前
13
0
【Spring注解驱动开发】组件注册-@ComponentScan-自动扫描组件&指定扫描规则

写在前面 在实际项目中,我们更多的是使用Spring的包扫描功能对项目中的包进行扫描,凡是在指定的包或子包中的类上标注了@Repository、@Service、@Controller、@Component注解的类都会被扫描...

osc_a5w6ccj0
47分钟前
10
0
学习c++ (五) 用duilib 编写界面

还是那句话,不想用MFC,写的界面丑,不想依赖MFC的一些库,在网上闲逛,发现duilib还可以,至于QT,有时间再研究, dulib已经没人更新了,估计也是翻不出什么花样了,但研究一下总算是C++的...

osc_jklrr90y
48分钟前
19
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部