js定义类的方法示例【ES5与ES6】


Posted in Javascript onJuly 30, 2019

本文实例讲述了js定义类的方法。分享给大家供大家参考,具体如下:

以下是es5标准里定义类的方法:

<script>
function Point(x,y){
  this.x=x;
  this.y=y;
}
Point.prototype.toString=function(){
  return '('+this.x+', '+this.y+')';
}
var point=new Point(1,2);
console.log(point);
</script>

运行结果:

js定义类的方法示例【ES5与ES6】

上面这样用构造函数和原型混合的方法定义类,是为了每次new新实例时可以共享方法,不用创建function新实例。所以只有函数属性放在原型对象里定义,其他属性都在构造函数里定义。

es6里简化了类的定义方法:

<script>
class Point{
   constructor(x,y){
    this.x=x;
    this.y=y;
    }
    toString(){
     return '('+this.x+', '+this.y+')';
    }
}
let point=new Point(3,4);
console.log(point);
</script>

运行结果:

js定义类的方法示例【ES5与ES6】

注意:类名首字母要大写

另:原文代码中class Point(x,y)定义会导致运行错误,本文予以修正。)

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

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

Javascript 相关文章推荐
JQuery1.4+ Ajax IE8 内存泄漏问题
Oct 15 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
Jul 31 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
OpenLayer学习之自定义测量控件
Sep 28 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
JavaScript中reduce()的用法
May 11 Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
开源一个微信小程序仪表盘组件过程解析
Jul 30 #Javascript
原生js添加一个或多个类名的方法分析
Jul 30 #Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 #Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 #Javascript
You might like
桌面中心(一)创建数据库
2006/10/09 PHP
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
php中对2个数组相加的函数
2011/06/24 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
Laravel路由设定和子路由设定实例分析
2016/03/30 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
jquery 插件 人性化的消息显示
2008/01/21 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
2014/01/23 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
jquery实现拖动效果
2016/08/10 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
简单实现jQuery弹幕效果
2017/05/06 jQuery
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
使用webpack和rollup打包组件库的方法
2021/02/25 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
python 容器总结整理
2017/04/04 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
python 调试冷知识(小结)
2019/11/11 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
2014年创卫工作总结
2014/11/24 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
2019年教师入党申请书
2019/06/27 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
vue cli4中mockjs在dev环境和build环境的配置详情
2022/04/06 Vue.js