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 tips提示效果
Apr 03 Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
js带闹铃功能的倒计时代码
Sep 29 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
bootstrap表单示例代码分享
May 18 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP对文件进行加锁、解锁实例
2015/01/23 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
php微信公众平台示例代码分析(二)
2016/12/06 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
js获取控件位置以及不同浏览器中的差别介绍
2013/08/08 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
2016/08/18 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
jQuery dateRangePicker插件使用方法详解
2017/07/28 jQuery
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
python 实现绘制整齐的表格
2019/11/18 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
实习教师自我鉴定
2013/12/12 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
出售房屋委托书范本
2014/09/24 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android