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 相关文章推荐
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
JavaScript调用Activex控件的事件的实现方法
Apr 11 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
深入理解JavaScript中的并行处理
Sep 22 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
Angular项目从新建、打包到nginx部署全过程记录
Dec 09 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
ES6扩展运算符和rest运算符用法实例分析
May 23 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
基于angular实现树形二级表格
Oct 16 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/10/09 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
PHP判断是否有Get参数的方法
2014/05/05 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
简单实用jquery版三级联动select示例
2013/07/04 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
React中jquery引用的实现方法
2017/09/12 jQuery
深入理解移动前端开发之viewport
2018/10/19 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
jquery 时间戳转日期过程详解
2019/10/12 jQuery
微信小程序实现图片压缩
2019/12/03 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
在python带权重的列表中随机取值的方法
2019/01/23 Python
python程序快速缩进多行代码方法总结
2019/06/23 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
DataFrame.groupby()所见的各种用法详解
2020/06/14 Python
Python基于pyjnius库实现访问java类
2020/07/31 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
优秀团员个人的自我评价
2013/10/02 职场文书
乔迁宴答谢词
2014/01/21 职场文书
宣传普通话标语
2014/06/27 职场文书
关于读书的活动方案
2014/08/14 职场文书
暑假打工感想
2015/08/07 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers