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 相关文章推荐
JScript内置对象Array中元素的删除方法
Mar 08 Javascript
jquery 笔记 事件
Nov 02 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
jQuery判断checkbox选中状态
May 12 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
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
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
2012/12/12 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
JS实现向表格中动态添加行的方法
2015/03/30 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
2015/04/17 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
JavaScript缓冲运动实现方法(2则示例)
2016/01/08 Javascript
JavaScript中获取纯正的undefined的方法
2016/03/06 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
使用Vue自定义数字键盘组件(体验度极好)
2017/12/19 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
JS中的算法与数据结构之列表(List)实例详解
2019/08/16 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python 动态迁移solr数据过程解析
2019/09/04 Python
Python将字典转换为XML的方法
2020/08/01 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
军训学生自我鉴定
2014/02/12 职场文书
社会体育专业大学生职业生涯规划书
2014/09/17 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
以下牛机,你有几个
2022/04/05 无线电
常用的文件对应的MIME类型汇总
2022/04/26 HTML / CSS