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 相关文章推荐
js实现页面跳转重定向的几种方式
May 29 Javascript
Express的路由详解
Dec 10 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 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系统流量分析的程序
2006/10/09 PHP
PHP执行速率优化技巧小结
2008/03/15 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
让人蛋疼的JavaScript语法特性
2014/09/30 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
js实现跨域的方法实例详解
2015/06/24 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
python使用socket连接远程服务器的方法
2015/04/29 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
解决Python对齐文本字符串问题
2019/08/28 Python
wxPython实现画图板
2020/08/27 Python
python enumerate内置函数用法总结
2020/01/07 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
基于Django快速集成Echarts代码示例
2020/12/01 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
利用CSS3的transform做的动态时钟效果
2011/09/21 HTML / CSS
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
佳能英国官方网站:Canon UK
2017/08/08 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
公司募捐倡议书
2014/05/14 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
迟到检讨书
2015/01/26 职场文书
车间主任岗位职责
2015/02/03 职场文书
单身申明具结书
2015/02/26 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书