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 相关文章推荐
Extjs学习笔记之八 继承和事件基础
Jan 08 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
React Native之prop-types进行属性确认详解
Dec 19 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
jquery向后台提交数组的代码分析
Feb 20 jQuery
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
德生S2000电路分析
2021/03/02 无线电
PHP的FTP学习(四)
2006/10/09 PHP
PHP实现图片上传并压缩
2015/12/22 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php+mysql实现简单登录注册修改密码网页
2016/11/30 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
Trip.com澳大利亚:在线旅行社
2019/12/01 全球购物
校运会入场式解说词
2014/02/10 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
代领毕业证委托书
2014/08/02 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
总经理岗位职责范本
2015/04/01 职场文书
活动总结模板大全
2015/05/11 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
python实现三次密码验证的示例
2021/04/29 Python
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle