ES6中定义类和对象的方法示例


Posted in Javascript onJuly 31, 2019

本文实例讲述了ES6中定义类和对象的方法。分享给大家供大家参考,具体如下:

类的基本定义和生成实例:

// 类的基本定义和生成实例
class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name;
    }
}
// 生成一个实例
let g_parent = new Parent();
console.log(g_parent); //{name: "xiaxaioxian"}
let v_parent = new Parent('v') // 'v'就是构造函数name属性 , 覆盖构造函数的name属性值
console.log(v_parent); // {name: "v"}

继承

// 继承
class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name;
    }
}
class Child extends Parent{
}
console.log('继承',new Child()) // 继承 {name: "xiaxaioxian"}

继承传递参数

// 继承传递参数
class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name;
    }
}
class Child extends Parent{
   constructor(name = 'child'){ // 子类重写name属性值
    super(name); // 子类向父类修改 super一定放第一行
    this.type= 'preson';
   }
}
console.log('继承',new Child('hello')) // 带参数覆盖默认值 继承{name: "hello", type: "preson"}

ES6重新定义的ES5中的访问器属性

class Parent{ //定义一个类
    constructor(name='xiaxaioxian'){
     this.name= name
    }
    get longName(){ // 属性
     return 'mk' + this.name
    }
    set longName(value){
     this.name = value
    }
}
let v = new Parent();
console.log('getter',v.longName)  // getter mkxiaxaioxian
v.longName = 'hello';
console.log('setter',v.longName)  // setter mkhello

类的静态方法:

class Parent{ //定义一个类
   constructor(name='xiaxaioxian'){
    this.name= name
   }
   static tell(){ // 静态方法:通过类去调用,而不是实例
    console.log('tell')
   }
}
Parent.tell(); // tell

类的静态属性:

// 静态属性
class Parent{ //定义一个类
   constructor(name='xiaxaioxian'){
    this.name= name
   }
   static tell(){ // 静态方法:通过类去调用,而不是实例
    console.log('tell') // tell
   }
}
Parent.type = 'test'; // 定义静态属性
console.log('静态属性',Parent.type) // 静态属性 test
let v_parent = new Parent();
console.log(v_parent); // {name: "xiaxaioxian"} 没有tell方法和type属性

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
Node.js Event Loop各阶段讲解
Mar 08 Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
11个Javascript小技巧帮你提升代码质量(小结)
Dec 28 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 #Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 #Javascript
vue实现中部导航栏布局功能
Jul 30 #Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 #Javascript
8个有意思的JavaScript面试题
Jul 30 #Javascript
You might like
PHP面向对象编程快速入门
2006/12/14 PHP
PHP实现向关联数组指定的Key之前插入元素的方法
2017/06/06 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
2013/06/24 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
js表单序列化判断空值的实例
2017/09/22 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[01:06]欢迎来到上海,TI9
2018/08/26 DOTA
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
使用python绘制二维图形示例
2019/11/22 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
夜大毕业生自我鉴定
2013/10/31 职场文书
违反学校规定检讨书
2014/01/18 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
大学班级学风建设方案
2014/05/01 职场文书
国际经济贸易专业自荐信
2014/06/13 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
2014迎接教师节演讲稿
2014/09/10 职场文书
工作年限证明模板
2014/11/01 职场文书
班主任工作实习计划
2015/01/16 职场文书
离婚被告答辩状
2015/05/22 职场文书
音乐剧猫观后感
2015/06/04 职场文书
小学生暑假安全保证书
2015/07/13 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
Oracle中DBLink的详细介绍
2022/04/29 Oracle
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技