文档章节

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 系列之 Babel 是如何编译 Class 的(上)

前言 在了解 Babel 是如何编译 class 前,我们先看看 ES6 的 class 和 ES5 的构造函数是如何对应的。毕竟,ES6 的 class 可以看作一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 clas...

冴羽
11/05
0
0
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

没有更多内容

加载失败,请刷新页面

加载更多

如何在Angular中使用better-scroll插件

由于需要在一个固定的的高度做无限滚动,本来css的overflow-y也可以完成的,奈何安卓不是很流畅,还很生硬,就是用了第三方库better-scroll,配合angular的ng-content。angular的ng-content和...

前端攻城老湿
9分钟前
1
0
Js中apply和Math.max()函数的问题及区别

这篇文章主要介绍了js中apply和Math.max()函数的问题,本文给大家带来两种答案,每一种答案给大家介绍的非常详细,在文章底部给大家提到了js中Math.max.apply和Math.max的区别,写的十分的全...

前端攻城小牛
10分钟前
1
0
解决 SpringBoot 不继承父starter-parent打包不包含依赖的问题

由于项目需要继承自己平台的父 parent , 有的模块是纯 api ,不能有任何依赖, 所以父 parent 不能直接引入 springboot, 单独给非 boot 项目排除依赖的话又特别的麻烦, 且不好把控。 记得刚接触...

stys35
11分钟前
0
0
vuex进阶知识点巩固

我们先回忆一下上一篇的代码 computed:{ getName(){ return this.$store.state.name }} 这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于 this.$store.state.na...

嫣然丫丫丫
26分钟前
1
0
Python出现安全策略问题的解决方法

Python运行期间出现如下错误 import: attempt to perform an operation not allowed by the security policy `PS' @ error/constitute.c/IsCoderAuthorized/408. 解决方法:在脚本的开头添加......

大糊涂
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部