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 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
微信小程序全局变量功能与用法详解
Jan 22 Javascript
js常见遍历操作小结
Jun 06 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
详解Node.JS模块 process
Aug 31 Javascript
JavaScript流程控制(循环)
Dec 06 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
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php代码收集表单内容并写入文件的代码
2012/01/29 PHP
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php获取淘宝分类id示例
2014/01/16 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
简单的js图片轮换代码(js图片轮播)
2014/05/06 Javascript
js代码实现无缝滚动(文字和图片)
2015/08/20 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
基于JavaScript实现购物网站商品放大镜效果
2016/09/06 Javascript
react-native fetch的具体使用方法
2017/11/01 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python 内置函数filter
2017/06/01 Python
简述Python2与Python3的不同点
2018/01/21 Python
python psutil模块使用方法解析
2019/08/01 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
python实现在一个画布上画多个子图
2020/01/19 Python
如何在Python3中使用telnetlib模块连接网络设备
2020/09/21 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
德国婴儿服装和婴儿用品购买网站:Baby Sweets
2019/12/08 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
《故乡》教学反思
2014/04/10 职场文书
团队拓展活动方案
2014/08/28 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
MySQL创建表操作命令分享
2022/03/25 MySQL
Python Numpy库的超详细教程
2022/04/06 Python
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers