原生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 相关文章推荐
IE之动态添加DOM节点触发window.resize事件
Jul 27 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
Boostrap入门准备之border box
May 09 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
Sep 01 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
详解JavaScript 异步编程
Jul 13 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/03/25 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php字符串操作常见问题小结
2016/10/11 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
javascript学习笔记(一)基础知识
2014/09/30 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
jQuery实现输入框下拉列表树插件特效代码分享
2015/08/27 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
浅谈JavaScript函数的四种存在形态
2016/06/08 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
详解一个基于套接字实现长连接的express
2019/03/28 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
2019/09/01 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python实现建立SSH连接的方法
2015/06/03 Python
python冒泡排序简单实现方法
2015/07/09 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
anaconda如何查看并管理python环境
2019/07/05 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
python开发入门——set的使用
2020/09/03 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
html5清空画布方法(三种)
2017/10/16 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
人力资源部门的主要职能
2014/02/22 职场文书
任命书怎么写
2014/06/04 职场文书
护理学专业求职信
2014/06/29 职场文书
小学家长通知书评语
2014/12/31 职场文书
护理工作心得体会
2016/01/22 职场文书
python中对列表的删除和添加方法详解
2022/02/24 Python