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 相关文章推荐
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
jquery如何实现点击空白处隐藏元素
Dec 05 jQuery
React Form组件的实现封装杂谈
May 07 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
js实现九宫格布局效果
May 28 Javascript
vue实现从外部修改组件内部的变量的值
Jul 30 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
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
附件名前加网站名
2008/03/23 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
深入理解javascript的执行顺序
2014/04/04 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
Servlet实现文件上传,可多文件上传示例
2016/12/05 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
vue下拉菜单组件(含搜索)的实现代码
2018/11/25 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
2019/09/20 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
python学习笔记之多进程
2020/08/06 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
庆祝教师节活动方案
2014/01/31 职场文书
工作作风懒散检讨书
2014/10/29 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
医院合作意向书范本
2015/05/08 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers