原生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 常用方法总结
Jun 03 Javascript
了解一点js的Eval函数
Jul 26 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
理解AngularJs指令
Dec 10 Javascript
基于jQuery ligerUI实现分页样式
Sep 18 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
vue 设置proxyTable参数进行代理跨域
Apr 09 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
Angular7创建项目、组件、服务以及服务的使用
Feb 19 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中类的继承和用法实例分析
2016/05/24 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
arguments对象
2006/11/20 Javascript
jquery Mobile入门—多页面切换示例学习
2013/01/08 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
2016/06/20 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
详解Sea.js中Module.exports和exports的区别
2017/02/12 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python实战之制作天气查询软件
2019/05/14 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
公司市场专员岗位职责
2014/06/29 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
幽默导游词开场白
2015/05/29 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
idea 在springboot中使用lombok插件的方法
2021/08/02 Java/Android
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技