ES6 javascript中class静态方法、属性与实例属性用法示例


Posted in Javascript onOctober 30, 2017

本文实例讲述了ES6 javascript中class静态方法、属性与实例属性用法。分享给大家供大家参考,具体如下:

类相当于实例的原型, 所有在类中定义的方法, 都会被实例继承。 如果在一个方法前, 加上static关键字, 就表示该方法不会被实例继承, 而是直接通过类来调用, 这就称为“ 静态方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

上面代码中, Foo类的classMethod方法前有static关键字, 表明该方法是一个静态方法, 可以直接在Foo类上调用( Foo.classMethod()), 而不是在Foo类的实例上调用。 如果在实例上调用静态方法, 会抛出一个错误, 表示不存在该方法。

父类的静态方法, 可以被子类继承。

class Foo {
  static classMethod() {
    return 'hello';
  }
}
class Bar extends Foo {}
Bar.classMethod(); // 'hello'

上面代码中, 父类Foo有一个静态方法, 子类Bar可以调用这个方法。
静态方法也是可以从super对象上调用的。

class Foo {
  static classMethod() {
    return 'hello';
  }
}
class Bar extends Foo {
  static classMethod() {
    return super.classMethod() + ', too';
  }
}
Bar.classMethod();

静态属性

静态属性指的是 Class 本身的属性, 即Class.propname, 而不是定义在实例对象( this) 上的属性。

class Foo {}
Foo.prop = 1;
Foo.prop // 1

上面的写法为Foo类定义了一个静态属性prop。

目前, 只有这种写法可行, 因为 ES6 明确规定, Class 内部只有静态方法, 没有静态属性。

// 以下两种写法都无效
class Foo {
  // 写法一
  prop: 2
    // 写法二
  static prop: 2
}
Foo.prop // undefined

ES7 有一个静态属性的提案, 目前 Babel 转码器支持。

这个提案对实例属性和静态属性, 都规定了新的写法。

(1) 类的实例属性

类的实例属性可以用等式, 写入类的定义之中。

class MyClass {
  myProp = 42;
  constructor() {
    console.log(this.myProp); // 42
  }
}

上面代码中, myProp就是MyClass的实例属性。 在MyClass的实例上, 可以读取这个属性。

以前, 我们定义实例属性, 只能写在类的constructor方法里面。

class ReactCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

上面代码中, 构造方法constructor里面, 定义了this.state属性。
有了新的写法以后, 可以不在constructor方法里面定义。

class ReactCounter extends React.Component {
  state = {
    count: 0
  };
}

这种写法比以前更清晰。

为了可读性的目的, 对于那些在constructor里面已经定义的实例属性, 新写法允许直接列出。

class ReactCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  state;
}

(2) 类的静态属性

类的静态属性只要在上面的实例属性写法前面, 加上static关键字就可以了。

class MyClass {
static myStaticProp = 42;
constructor() {
console.log(MyClass.myProp); // 42
}
}

同样的, 这个新写法大大方便了静态属性的表达。

// 老写法
class Foo {}
Foo.prop = 1;
// 新写法
class Foo {
  static prop = 1;
}

上面代码中, 老写法的静态属性定义在类的外部。 整个类生成以后, 再生成静态属性。 这样让人很容易忽略这个静态属性, 也不符合相关代码应该放在一起的代码组织原则。 另外, 新写法是显式声明( declarative), 而不是赋值处理, 语义更好。

更多相关内容可查看本站专题:《ECMAScript6(ES6)入门教程》、《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家基于ECMAScript的程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
jquery插件开发之实现md5插件
Mar 17 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
JS一次前端面试经历记录
Mar 19 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 #Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 #Javascript
vue中的scope使用详解
Oct 29 #Javascript
Vue.js划分组件的方法
Oct 29 #Javascript
vue.js  父向子组件传参的实例代码
Oct 29 #Javascript
vue.js todolist实现代码
Oct 29 #Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 #Javascript
You might like
php+javascript实现的动态显示服务器运行程序进度条功能示例
2017/08/07 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
基于jQuery的弹出框插件
2012/03/18 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
vue定义全局变量和全局方法的方法示例
2018/08/01 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
python实现单向链表详解
2018/02/08 Python
快速解决安装python没有scripts文件夹的问题
2018/04/03 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
浅谈flask源码之请求过程
2018/07/26 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
Python datetime和unix时间戳之间相互转换的讲解
2019/04/01 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
python中append实例用法总结
2019/07/30 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
详解python中各种文件打开模式
2020/01/19 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
巴西手表购物网站:eclock
2019/03/19 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
聚网科技C++面试笔试题
2015/09/01 面试题
简单的JAVA编程面试题
2013/03/19 面试题
超市创业计划书
2014/04/24 职场文书
会议欢迎标语
2014/06/30 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript