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实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
Jun 24 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
浅析VUE防抖与节流
Nov 24 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
php生成WAP页面
2006/10/09 PHP
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP 简单日历实现代码
2009/10/28 PHP
PHP 获取远程文件大小的3种解决方法
2013/07/11 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
JavaScript 继承详解(二)
2009/07/13 Javascript
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
nodejs发送http请求时遇到404长时间未响应的解决方法
2017/12/10 NodeJs
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python os模块介绍
2014/11/30 Python
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
python3定位并识别图片验证码实现自动登录功能
2021/01/29 Python
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Blank NYC官网:夹克、牛仔裤等
2020/12/16 全球购物
中科前程Java笔试题
2016/11/20 面试题
单位单身证明范本
2014/01/11 职场文书
运动会广播稿400字
2014/01/25 职场文书
房产协议书范本2014
2014/09/30 职场文书
工作简历自我评价
2015/03/11 职场文书
如何写辞职信
2015/05/13 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python道路车道线检测的实现
2021/06/27 Python
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis