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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
微信小程序如何加载数据库真实数据的实现
Mar 04 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学习之正则表达式
2011/04/17 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
php构造函数实例讲解
2013/11/13 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
php 微信开发获取用户信息如何实现
2016/12/13 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
2013/03/29 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
Js 获取当前函数参数对象的实现代码
2016/06/20 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
js 实现省市区三级联动菜单效果
2017/02/20 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
js实现星星打分效果
2020/07/05 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
简单使用Python自动生成文章
2014/12/25 Python
Python中生成器和迭代器的区别详解
2018/02/10 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
Python限制内存和CPU使用量的方法(Unix系统适用)
2020/08/04 Python
python 下划线的不同用法
2020/10/24 Python
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
公司活动总结怎么写
2014/06/25 职场文书
员工保密协议书
2014/09/27 职场文书
公务员年度个人总结
2015/02/12 职场文书
质量保证书怎么写
2015/02/27 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
六种css3实现的边框过渡效果
2021/04/22 HTML / CSS
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript