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 GUID生成器实现代码
Oct 31 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
纯javascript判断查询日期是否为有效日期
Aug 24 Javascript
jquery+正则实现统一的表单验证
Sep 20 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
关于vue-router路径计算问题
May 10 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php单例模式实现方法分析
2015/03/14 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
javascript数组去重方法总结(推荐)
2019/03/20 Javascript
JS实现倒序输出的几种常用方法示例
2019/04/13 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
Python简易版图书管理系统
2019/08/12 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
书香校园建设方案
2014/05/02 职场文书
放飞理想演讲稿
2014/09/09 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
模范教师材料大全
2014/12/16 职场文书
python中print格式化输出的问题
2021/04/16 Python
Python面向对象之内置函数相关知识总结
2021/06/24 Python
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
python基础之函数的定义和调用
2021/10/24 Python
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android