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 相关文章推荐
jQuery 动画基础教程
Dec 25 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
Feb 20 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
js获取域名的方法
Jan 27 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
VUE引入第三方js包及调用方法讲解
Mar 01 Javascript
微信小程序开发摇一摇功能
Nov 22 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
2009/11/04 Javascript
ComboBox 和 DateField 在IE下消失的解决方法
2013/08/30 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
python提取字典key列表的方法
2015/07/11 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python爬虫中urllib库的进阶学习
2018/01/05 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
关于pytorch多GPU训练实例与性能对比分析
2019/08/19 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
C#软件工程师英语面试题
2015/06/07 面试题
打架检讨书500字
2014/01/29 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
学校总务处领导干部个人对照检查材料思想汇报
2014/10/06 职场文书
2014年医院工作总结
2014/11/20 职场文书
鸟的天堂导游词
2015/01/31 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
Java详细解析==和equals的区别
2022/04/07 Java/Android
MySQL创建管理LIST分区
2022/04/13 MySQL