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 DOM 元素ID就是全局变量
Sep 20 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
vue项目优化之通过keep-alive数据缓存的方法
Dec 11 Javascript
Vue绑定内联样式问题
Oct 17 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
Vue——前端生成二维码的示例
Dec 19 Vue.js
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
分页显示Oracle数据库记录的类之一
2006/10/09 PHP
php include加载文件两种方式效率比较
2010/08/08 PHP
PHP中=赋值操作符对不同数据类型的不同行为
2011/01/02 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
extjs grid取到数据而不显示的解决
2008/12/29 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
快速处理vue渲染前的显示问题
2018/03/05 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
2019/04/10 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
利用Python脚本在Nginx和uwsgi上部署MoinMoin的教程
2015/05/05 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python三方库之requests的快速上手
2019/03/04 Python
python与pycharm有何区别
2020/07/01 Python
python图片合成的示例
2020/11/09 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
酒店实习个人鉴定
2013/12/07 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
Java详细解析==和equals的区别
2022/04/07 Java/Android