原生JavaScript之es6中Class的用法分析


Posted in Javascript onFebruary 23, 2020

本文实例讲述了原生JavaScript之es6中Class的用法。分享给大家供大家参考,具体如下:

es6class写法

class Point {
 constructor(x, y) {
  this.x = x;
  this.y = y;
 }
 toString() {
  return '(' + this.x + ', ' + this.y + ')';
 }
}

es5写法

function Point(x, y) {
 this.x = x;
 this.y = y;
}
Point.prototype.toString = function () {
 return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

对比一下

基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class改写 就是第一个那样

上面代码定义了一个“类”,可以看到里面有一个constructor方法,这就是构造方法,而this关键字则代表实例对象。也就是说,ES5 的构造函数Point,对应 ES6 的Point类的构造方法。

Point类除了构造方法,还定义了一个toString方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。

使用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。

class Bar {
 doStuff() {
  console.log('stuff');
 }
}
var b = new Bar();
b.doStuff() // "stuff"

其实就是调用原型上的方法。

| `class B {}
let b = new B();

b.constructor === B.prototype.constructor // true`| |

上面代码中,b是B类的实例,它的constructor方法就是B类原型的constructor方法。

constructor 方法

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

class Point {
}
// 等同于
class Point {
 constructor() {}
}

上面代码中,定义了一个空的类Point,JavaScript 引擎会自动为它添加一个空的constructor方法。

constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。

class Foo {
 constructor() {
  return Object.create(null);
 }
}
new Foo() instanceof Foo

静态方法

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

class Foo {
 static classMethod() {
  return 'hello';
 }
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()

注意,如果静态方法包含this关键字,这个this指的是类,而不是实例。
父类的静态方法,可以被子类继承

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() /

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

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

Javascript 相关文章推荐
JavaScript 学习 - 提高篇
Feb 02 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
Js实现滚动变色的文字效果
Jun 16 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
JavaScript结合HTML DOM实现联动菜单
Apr 05 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
原生javascript单例模式的应用实例分析
Feb 23 #Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 #Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 #Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 #Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 #Javascript
vue.js实现简单的计算器功能
Feb 22 #Javascript
Vue.js实现立体计算器
Feb 22 #Javascript
You might like
PHP调用MySQL的存储过程的实现代码
2008/08/12 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
浅说js变量
2011/05/25 Javascript
Javscript删除数组中指定元素并返回新数组
2014/03/06 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
基于jQuery实现的无刷新表格分页实例
2016/02/17 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
理解 Node.js 事件驱动机制的原理
2017/08/16 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python ORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍
2014/06/10 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
Windows下Pycharm远程连接虚拟机中Centos下的Python环境(图文教程详解)
2020/03/19 Python
python中有帮助函数吗
2020/06/19 Python
html5的input的required使用中遇到的问题及解决方法
2018/04/24 HTML / CSS
机电一体化自荐信
2013/12/10 职场文书
先进典型发言材料
2014/12/30 职场文书
2016年教师节特级教师获奖感言
2015/12/09 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS