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 相关文章推荐
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
Jul 05 Javascript
Angular中$state.go页面跳转并传递参数的方法
May 09 Javascript
微信小程序 Buffer缓冲区的详解
Jul 06 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
JS面向对象之单选框实现
Jan 17 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
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP7如何开启Opcode打造强悍性能详解
2018/05/11 PHP
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
2015/11/30 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
详解微信小程序中的页面代码中的模板的封装
2017/10/12 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
vue实现可移动的悬浮按钮
2021/03/04 Vue.js
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
python解析json串与正则匹配对比方法
2018/12/20 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
jupyter lab的目录调整及设置默认浏览器为chrome的方法
2020/04/10 Python
容易被忽略的Python内置类型
2020/09/03 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
Python并发爬虫常用实现方法解析
2020/11/19 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
彪马美国官网:PUMA美国
2017/03/09 全球购物
销售行政专员岗位职责
2014/06/10 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
医院志愿者活动总结
2015/05/06 职场文书
前端实现滑动按钮AJAX与后端交互的示例代码
2022/02/24 Javascript