es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析


Posted in Javascript onFebruary 15, 2020

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

es6新增了一种定义对象实例的方法,使用class关键字定义类,与class相关的知识点也逐步火热起来,但是部分理解起来相对抽象,简单对class相关的知识点进行总结,更好的使用class。对于基本概念,请参见阮一峰老师的es6入门教程。本文主要总结class静态相关。

关于类有两个概念,1,类自身,;2,类的实例对象

总的来说:静态的是指向类自身,而不是指向实例对象,主要是归属不同,这是静态属性的核心。

难点1:静态方法的理解

class Foo {
 static classMethod() {
  return 'hello';
 }
}

静态方法使用:在方法前加上static关键字

为什么使用静态方法:阻止方法被实例继承,类的内部相当于实例的原型,所有在类中直接定义的方法相当于在原型上定义方法,都会被类的实例继承,但是使用static静态方法定义的不会被实例继承,而且可以被实例直接应用Foo.classMethod(),此时写成new Foo.classMethod()会提示不存在此方法

静态方法中this指向:this指向类而不是类的实例

class Foo {
 static bar () {
  this.baz();
 }
 static baz () {
  console.log('hello');
 }
 baz () {
  console.log('world');
 }
}
Foo.bar() // hello

继承相关:静态方法可以被子类继承,也可以被super调用

难点2:静态属性的理解,以及和实例属性的区别

理解了静态的本质就知道静态属性是class类自身的属性

相对的实例属性是指类的实例的属性,调用时使用 new Foo().'属性名'

定义实例属性的方法:2种

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

1,在类中定义

class MyClass {
 myProp = 42;
 constructor() {
  console.log(this.myProp); // 42
 }
}
//上面代码中,myProp就是MyClass的实例属性。在MyClass的实例上,可以读取这个属性。

2,在constructor中定义(react中经典写法)

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

定义静态方法,

1,就和普通的Object添加属性一样,object.a = a;(目前唯一一种方法)

缺点:老写法的静态属性定义在类的外部。整个类生成以后,再生成静态属性。容易忽略

2,静态属性的提案: 相对于实例方法定义,在定义实例方法的前面加上static关键字,该方法未发布

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js函数调用的方式
May 06 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
移除AngularJS下URL中的#字符的方法
Jun 19 Javascript
浅析JS异步加载进度条
May 05 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
javscript 数组扁平化的实现
Feb 03 Javascript
使用js实现单链解决前端队列问题的方法
Feb 03 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
js实现菜单跳转效果
Dec 11 Javascript
Vue父子传递实例讲解
Feb 14 #Javascript
Javascript操作select控件代码实例
Feb 14 #Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 #Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 #Javascript
node事件循环和process模块实例分析
Feb 14 #Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 #Javascript
JavaScript简单编程实例学习
Feb 14 #Javascript
You might like
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
javascript图片相似度算法实现 js实现直方图和向量算法
2014/01/14 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
layer的prompt弹出框,点击回车,触发确定事件的方法
2019/09/06 Javascript
JavaScript实现图片上传并预览并提交ajax
2019/09/30 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Django Admin 实现外键过滤的方法
2017/09/29 Python
python写入并获取剪切板内容的实例
2018/05/31 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
大学生学习生活的自我评价
2013/11/01 职场文书
廉政教育心得体会
2014/01/01 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
领导工作表现评语
2015/01/04 职场文书
求职简历自我评价范文
2015/03/10 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
2019公司借款合同范本2篇!
2019/07/24 职场文书
Docker部署Mysql8的实现步骤
2022/07/07 Servers