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 相关文章推荐
juery框架写的弹窗效果适合新手
Nov 27 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
iframe跨域通信封装详解
Aug 11 Javascript
JavaScript生成.xls文件的代码
Dec 22 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
Vim快速合并行及vim 将文件所有行合并到一行
Nov 27 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
Openlayers实现地图全屏显示
Sep 28 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
PHPlet在Windows下的安装
2006/10/09 PHP
建立文件交换功能的脚本(三)
2006/10/09 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
javascript数据结构与算法之检索算法
2015/04/04 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
python删除列表内容
2015/08/04 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python实现中文文本分句的例子
2019/07/15 Python
python爬虫 urllib模块url编码处理详解
2019/08/20 Python
多个python文件调用logging模块报错误
2020/02/12 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
介绍一下linux的文件系统
2012/03/20 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
违纪检讨书2000字
2014/02/08 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
运动会开幕式主持词
2014/03/28 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
机器人总动员观后感
2015/06/09 职场文书
2015年女工委工作总结
2015/07/27 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
教你一步步实现一个简易promise
2021/11/02 Javascript
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang