文档章节

ES6定义类-class初体验

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

    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
AngularJS2.0 教程系列(一)

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

笔阁
2015/07/22
0
1
es6中class类的全方面理解(一)

传统的javascript中只有对象,没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲,很有一种独树一帜的感脚!...

张培跃
05/06
0
0
ES6中常用的10个新特性讲解

ECMAScript 6(ES6) 目前基本成为业界标准,它的普及速度比 ES5 要快很多,主要原因是现代浏览器对 ES6 的支持相当迅速,尤其是 Chrome 和 Firefox 浏览器,已经支持 ES6 中绝大多数的特性。 ...

木亦Sam
06/10
0
0
es6基本语法

ES6是javascript的下一个版本,也叫做ECMAScript 2015,相对于es5,es6添加了许多新的特性,语言语法更加规范了,es6的出现使javascript步入了编程语言的正规军行列里,很多公司都逐渐使用es6...

马大哈tt
2017/12/23
0
0
ReactNative开发必备ES6知识

引言 现代前端应用通常都会使用ES6进行开发,ReactNative项目同样也会使用ES6进行开发,对于现代前端项目开发来说,掌握ES6成为一件十分必要的事情。对于ES6的学习,通常都会阅读阮一峰的《E...

芒言
06/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

原型模式

1、原型模式-定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象 克隆(浅度克隆->拷贝值类型或者引用,深度克隆->创建新的对象,开辟新的内存) 例如客户端知道抽象Pro...

阿元
今天
36
0
awk命令扩展使用操作

awk 中使用外部shell变量 示例1 [root@centos01 t1022]# A=888[root@centos01 t1022]# echo "" | awk -v GET_A=$A '{print GET_A}'888[root@centos01 t1022]# echo "aaaaaaaaaaaaa" | aw......

野雪球
今天
31
0
深入解析MySQL视图VIEW

Q:什么是视图?视图是干什么用的? A:视图(view)是一种虚拟存在的表,是一个逻辑表,本身并不包含数据。作为一个select语句保存在数据字典中的。   通过视图,可以展现基表的部分数据;...

IT--小哥
今天
41
0
虚拟机学习之二:垃圾收集器和内存分配策略

1.对象是否可回收 1.1引用计数算法 引用计数算法:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1;任何时候计数器值为0的对象就是不可能...

贾峰uk
今天
28
0
smart-doc功能使用介绍

smart-doc从8月份底开始开源发布到目前为止已经迭代了几个版本。在这里非常感谢那些敢于用smart-doc去做尝试并积极提出建议的社区用户。因此决定在本博客中重要说明下smart-doc的功能,包括使...

上官胡闹
昨天
39
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部