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和ActionScript的交互实现代码
Aug 01 Javascript
Javascript实现简单二级下拉菜单实例
Jun 15 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
介绍JavaScript的一个微型模版
Jun 24 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 Javascript
深入剖析Node.js cluster模块
May 23 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
js tab栏切换代码实例解析
Sep 03 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
我的论坛源代码(一)
2006/10/09 PHP
PHP转换文本框内容为HTML格式的方法
2016/07/20 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP数据分析引擎计算余弦相似度算法示例
2017/08/08 PHP
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
jquery实现简单的遮罩层
2016/01/08 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
详细分析JavaScript中的深浅拷贝
2020/09/17 Javascript
Python文件和目录操作详解
2015/02/08 Python
Python利用itchat对微信中好友数据实现简单分析的方法
2017/11/21 Python
Python中实现输入一个整数的案例
2020/05/03 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
C语言开发工程师测试题
2016/12/20 面试题
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
《月球之谜》教学反思
2014/04/10 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
教师党员个人整改措施
2014/10/27 职场文书
停发工资证明范本
2015/06/12 职场文书
2015年中秋寄语
2015/07/31 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python