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 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
JS检测输入字符是否包含非法字符的示例代码
Feb 11 Javascript
js中split和replace的用法实例
Feb 28 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
用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 输出简单动态WAP页面
2009/06/09 PHP
PHP数组实例总结与说明
2011/08/23 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
2013/10/21 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
解决vue中修改export default中脚本报一大堆错的问题
2018/08/27 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
vue.js iview打包上线后字体图标不显示解决办法
2020/01/20 Javascript
python strip()函数 介绍
2013/05/24 Python
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
使用requests库制作Python爬虫
2018/03/25 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
Python数据可视化常用4大绘图库原理详解
2020/10/23 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
JAVA程序员面试题
2012/10/03 面试题
会计学个人自荐信模板
2013/12/13 职场文书
毕业自我评价
2014/02/05 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书
Golang 获取文件md5校验的方法以及效率对比
2021/05/08 Golang
什么是SOLID
2022/03/24 Javascript