原生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 相关文章推荐
JS 容错处理代码, 屏蔽错误信息
Mar 09 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
JavaScript检测原始值、引用值、属性
Jun 20 Javascript
JavaScript跨域调用基于JSON的RESTful API
Jul 09 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
JavaScript onclick事件使用方法详解
May 15 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上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php GUID生成函数和类
2014/03/10 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
Javascript中的数学函数
2007/04/04 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
微信小程序点击滚动到指定位置的实现
2020/05/22 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[02:15]2014DOTA2国际邀请赛 专访LGD.lin小兔子是大腿
2014/07/14 DOTA
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python 获取字符串MD5值方法
2018/05/29 Python
python 自动去除空行的实例
2018/07/24 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
python实现美团订单推送到测试环境,提供便利操作示例
2019/08/09 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
单位授权委托书范文
2014/08/02 职场文书
借款民事起诉状范文
2015/05/19 职场文书
超市主管竞聘书
2015/09/15 职场文书